Kontrastrechner

Eine Zahl zwischen 1 und 21

Text ist lesbar, wenn er deutlich heller oder dunkler ist als das, was dahinter liegt. Der Farbton spielt kaum eine Rolle. Reines Rot auf reinem Grün sind zwei sehr verschiedene Farben mit fast derselben Helligkeit, und die Buchstaben scheinen zu flimmern. Deshalb misst WCAG den Unterschied in der relativen Leuchtdichte, der Lichtmenge, die eine Farbe ans Auge schickt, auf einer Skala von 0 (Schwarz) bis 1 (Weiß).

Zur Berechnung wird jeder der Kanäle Rot, Grün und Blau von seinem gespeicherten Wert in lineares Licht umgerechnet, dann werden die drei danach gewichtet, wie empfindlich das Auge für jeden ist:

L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L lighter + 0.05) ÷ (L darker + 0.05)

Grün macht mehr als 70 % des Ergebnisses aus, Blau etwa 7 %. Deshalb verhält sich reines Blau #0000ff wie eine dunkle Farbe und reines Gelb wie eine helle. Zwei identische Farben ergeben 1:1. Schwarz auf Weiß ergibt 21:1. Text und Hintergrund zu vertauschen ändert das Verhältnis nicht.

Die Schwellenwerte und wo sie gelten

AA ist die Stufe, auf die Gesetze und Beschaffungsregeln in der Regel verweisen, darunter die europäische Norm EN 301 549 und Section 508 in den USA. AAA ist ein Ziel für Stellen, an denen ausführlich gelesen wird. Logos, deaktivierte Bedienelemente und rein dekorativer Text sind ausgenommen.

Ein praktischer Anhaltspunkt ist das Grau #767676, das auf Weiß 4,54:1 erreicht und AA besteht. Eine Stufe heller ergibt #777777 4,47:1 und fällt durch.

Wie der vorgeschlagene Ton gewählt wird

Liegt Text in normaler Größe unter 4,5:1, rechnet der Rechner die Textfarbe in Farbton, Sättigung und Helligkeit um. Er behält die ersten beiden und verschiebt die Helligkeit in Schritten von einem halben Prozent, abwechselnd dunkler und heller, bis das Verhältnis zu Ihrem Hintergrund 4,5 erreicht. Der erste Treffer ist der nächstgelegene Ton, der besteht, Ihr Blau bleibt also Ihr Blau. Manchmal kann keine Helligkeit der Textfarbe bestehen, typischerweise vor einem Hintergrund in mittlerem Ton. Dann versucht er, den Hintergrund auf dieselbe Weise anzupassen. Wählen Sie Übernehmen, um den Vorschlag anzuwenden.

Hintergründe in mittleren Tönen sind der schwierige Fall. Ein mittleres Grau wie #808080 ergibt etwa 3,9:1 gegen Weiß und 5,3:1 gegen Schwarz, also funktioniert darauf nur sehr dunkler Text. Orangetöne und leuchtende Grüntöne von Marken haben dasselbe Problem mit weißem Text. Sie müssen den Hintergrund abdunkeln oder auf dunklen Text wechseln.

Farben hinein- und herausbekommen

Beide Felder nehmen alles an, was ein Browser als CSS-Farbe versteht: #1d3557, 1d3557, rgb(29 53 87), hsl(215 50% 23%) oder einen Namen wie teal. Um eine Farbe von einer Live-Seite zu lesen, öffnen Sie die Entwicklertools, wählen den Text aus und kopieren die berechneten Werte color und background-color.

Die Seitenadresse aktualisiert sich bei jeder Änderung, in der Form ?fg=1d3557&bg=ffffff. Kopieren Sie sie, um einer Kollegin oder einem Kollegen genau das Paar zu schicken, über das Sie gerade streiten. Um eine ganze Markenpalette in einem Durchgang zu testen, nutzen Sie das Kontrastraster für Paletten.

Was ein Verhältnis nicht verrät

• Transparenz. Ein Alphawert wird ignoriert. Bei halbtransparentem Text messen Sie die gemischte Farbe, die der Bildschirm am Ende anzeigt.
• Bilder und Verläufe. Ein Hintergrundfoto hat viele Farben. Testen Sie den hellsten und den dunkelsten Bereich hinter dem Text, oder legen Sie eine einfarbige Fläche darunter.
• Schriftstärke und Größe unterhalb der Schwellen. Eine dünne Schrift mit 12 px bei 4,6:1 besteht auf dem Papier und ist trotzdem schwer zu lesen.
• Dunkle Designs. Die WCAG-2-Formel überschätzt bekanntermaßen manche dunklen Paare. Besteht heller Text auf dunklem Hintergrund nur knapp, sehen Sie ihn sich auch mit eigenen Augen an, etwa im Sehsimulator.