Kontrastrechner

Kontrast prüfen

Kontrastrechner

Textfarbe (Hex)

Hintergrundfarbe (Hex)

JavaScript ist aus, deshalb steht unten das Ergebnis für die Beispielfarben. Die Formel steht im Abschnitt "Formel und Quelle".

So sieht normaler Text aus.

So sieht großer Text aus.

Rahmen eines Bedienelements

Kontrastverhältnis

3,54:1

• Normaler Text · AA mindestens 4,5:1Nicht bestanden
• Normaler Text · AAA mindestens 7:1Nicht bestanden
• Großer Text · AA mindestens 3:1Bestanden
• Großer Text · AAA mindestens 4,5:1Nicht bestanden
• Bedienelement · AA (1.4.11) mindestens 3:1Bestanden

Normaler Text besteht AA nicht. Die nächsten Töne, die bestehen:

• Dunklerer Ton: #767676 (4,54:1)

Geben Sie einen Hex-Code ein oder nutzen Sie die Farbauswahl. Das Verhältnis wird bei jeder Änderung neu berechnet. Vorschläge ändern nur die Textfarbe, nie den Hintergrund.

So lesen Sie das Ergebnis

Der Rechner prüft fünf Schwellen gleichzeitig. Alle stammen aus dem Text der WCAG 2.2 des W3C.

Was	AA	AAA
Normaler Text (1.4.3, 1.4.6)	4,5:1	7:1
Großer Text	3:1	4,5:1
Bedienelemente und Grafiken (1.4.11)	3:1	Keine

Laut Definition des W3C ist großer Text mindestens 18 Punkt groß oder mindestens 14 Punkt fett. Das W3C merkt an, dass das bei vielen Schriften für Fließtext etwa dem 1,5-Fachen der Standardgröße entspricht, fett etwa dem 1,2-Fachen. Messen Sie es trotzdem in Ihrer eigenen Schrift nach.

Das Verhältnis wird nicht gerundet. Das W3C sagt das ausdrücklich: 4,499:1 erfüllt die Schwelle von 4,5:1 nicht. Deshalb schneidet der Rechner alles nach der zweiten Nachkommastelle ab.

Die Kontrastanforderung gilt nicht für jeden Text. Text in einem inaktiven Bedienelement und rein dekorativer Text sind ausgenommen. Ebenso Text, der Teil eines Logos oder Markennamens ist.

1.4.11 betrifft die Teile, die kein Text sind. Die visuelle Information, die man braucht, um ein Element und seinen Zustand zu erkennen, muss mindestens 3:1 gegenüber der Farbe daneben haben. Ein Rahmen, der ein Formularfeld abgrenzt, oder die Markierung eines ausgewählten Zustands sind Beispiele.

In Audits verletzen Formularfelder mit hellgrauem Rahmen diese Regel am häufigsten. Auf weißem Hintergrund sieht man nicht, wo das Feld beginnt.

Ein Beispiel: hellgrauer Text

Der Rechner startet mit grauem Text #888888 auf Weiß. Das Verhältnis liegt bei 3,54:1. Auf Stufe AA reicht das für großen Text und Rahmen von Bedienelementen, aber nicht für normalen Text.

Solche Grautöne sehe ich am häufigsten in Hinweisen unter Formularfeldern und im Kleingedruckten unter Datum und Preis. In der Designdatei wirken sie elegant, auf dem Handy in der Sonne verschwinden sie.

Auch der blasse Beispieltext in einem Formularfeld (der Platzhalter) fällt unter die Regel. Das W3C sagt das auf seiner Seite Understanding 1.4.3 ausdrücklich.

Der Vorschlagskasten nennt #767676 aus derselben Graufamilie. Sein Verhältnis liegt bei 4,54:1, also besteht er AA. Nebeneinander sind die beiden Grautöne kaum zu unterscheiden, aber nur einer erfüllt die Schwelle.

Probieren Sie es auch andersherum. „Farben tauschen“ tauscht Text und Hintergrund. Das Verhältnis bleibt gleich, weil die Formel immer die hellere Farbe nach oben stellt. Die Vorschläge ändern sich aber, weil der Rechner diesmal einen Ton für weißen Text sucht.

Formel und Quelle

Der Rechner nutzt genau die Definition der relativen Leuchtdichte aus dem Text der WCAG 2.2. Die relative Leuchtdichte ist ein Wert, der für das dunkelste Schwarz 0 und für das hellste Weiß 1 beträgt. Die Berechnung hat vier Schritte:

1. Teilen Sie für beide Farben die Werte der Kanäle Rot, Grün und Blau (0–255) durch 255.
2. Ist das Ergebnis höchstens 0,04045, teilen Sie es durch 12,92. Sonst addieren Sie 0,055, teilen durch 1,055 und erheben es zur Potenz 2,4.
3. Berechnen Sie die Leuchtdichte: L = 0,2126 × R + 0,7152 × G + 0,0722 × B.
4. Berechnen Sie das Verhältnis: (L1 + 0,05) / (L2 + 0,05), wobei L1 die Leuchtdichte der helleren Farbe und L2 die der dunkleren ist.

Probieren Sie Schwarz und Weiß. Weiß hat L = 1, Schwarz L = 0. Das Verhältnis ist 1,05 / 0,05, also 21:1, der höchstmögliche Wert.

In älteren Quellen steht vielleicht 0,03928 statt 0,04045. Laut W3C stand in der Definition vor Mai 2021 der Wert 0,03928, übernommen aus einer älteren Fassung der sRGB-Spezifikation. Für die Berechnungen in diesen Richtlinien macht die Änderung praktisch keinen Unterschied.

Die Berechnung setzt den Farbraum sRGB voraus.

Warum 4,5:1? Laut der Seite Understanding 1.4.3 des W3C ist 3:1 das Mindestverhältnis, das ISO-9241-3 und ANSI-HFES-100-1988 für normales Sehen empfehlen. Eine Sehschärfe von 20/40 geht mit einem Verlust an Kontrastempfindlichkeit um etwa das 1,5-Fache einher, also braucht jemand mit 20/40 ein Verhältnis von 3 × 1,5 = 4,5:1.

Wie behebe ich eine Farbe, die durchfällt?

Der Vorschlagskasten behält Farbton und Sättigung der Textfarbe und ändert nur die Helligkeit. Er sucht die nächste dunklere und die nächste hellere Farbe, die AA besteht. So sehen Sie den Wert, der Ihrer Markenfarbe am nächsten ist und die Schwelle erfüllt.

Welchen Vorschlag Sie nehmen, hängt vom Hintergrund ab. Auf hellem Hintergrund passt meist der dunklere Ton; auf einem mittleren Hintergrund erscheinen vielleicht beide.

Das W3C wertet es als Fehler, eine Textfarbe ohne Hintergrundfarbe festzulegen. Der Grund ist einfach: Sie kennen die Standardfarben der Nutzer nicht. Legen Sie immer beide zusammen fest.

Kontrast ist nur ein Teil der Barrierefreiheit. Die übrigen Kriterien behandle ich im Ratgeber zu den WCAG. Wenn Sie Ihr ganzes Produkt prüfen lassen möchten: Ein UX Audit enthält auch die Kernprüfungen der WCAG 2.2. Unleserlicher Text ist für mich eines der am leichtesten zu behebenden Usability-Probleme.