So funktioniert dieses Werkzeug
Das Verhältnis wird so berechnet, wie es die Richtlinien zur Barrierefreiheit definieren: Jede Farbe wird in eine relative Leuchtdichte umgerechnet, wobei die drei Kanäle danach gewichtet werden, wie hell das Auge sie wahrnimmt — Grün zählt weit mehr als Blau — und die beiden Leuchtdichten werden als Verhältnis zwischen 1 und 21 verglichen. Identische Farben ergeben 1:1; Schwarz auf Weiß ergibt 21:1. Gemessen wird ein Helligkeitsunterschied, kein Farbunterschied, und deshalb können zwei Farben durchfallen, die deutlich verschieden aussehen.
Zwei Schwellen werden gemeldet: 4.5:1 als AA-Minimum für gewöhnlichen Fließtext und 7:1 als erhöhte AAA-Stufe. Das sind die Werte für Text in normaler Größe, und sie sind meist die entscheidenden, denn über Lesbarkeit wird im Fließtext entschieden.
Das Ergebnis ehrlich lesen
- Die angezeigten Schwellen gelten für Text in normaler Größe: Großer Text — etwa 24px, oder 19px bei Fettschrift — wird an 3:1 für AA und 4.5:1 für AAA gemessen. Eine Überschrift, die hier durchfällt, kann in ihrer tatsächlichen Größe bestehen.
- Bedienelemente haben ihr eigenes Minimum: Schaltflächen, Rahmen, Fokusringe und bedeutungstragende Symbole brauchen 3:1 gegenüber ihrer Umgebung. Das ist eine niedrigere Hürde als bei Text, aber keine Null.
- Das Verhältnis ignoriert den Farbton vollständig: Zwei Farben ähnlicher Helligkeit fallen durch, wie verschieden sie auch aussehen — und genau darum geht es: Es bildet Lesende ab, die diese Farbtöne nicht unterscheiden.
- Prüfen Sie die Farben, die Sie tatsächlich ausliefern: Text über einem Verlauf, einem Bild oder einer halbtransparenten Ebene hat keine einzelne Hintergrundfarbe. Nehmen Sie die ungünstigste Stelle, nicht den Durchschnitt.