Color Contrast
Zwei Farben ergeben ein Verhältnis
Text auf Fläche und Link im Absatz: zwei Messungen.
Kontrastlabor
Vier Farbpaare, drei Schwellen
Echte Designtoken zeigen, wann ein Verhältnis wofür ausreicht.
Violett auf Weiß: 9,27:1
Die Vordergrundfarbe --one wird gegen den tatsächlich sichtbaren Hintergrund --paper gerechnet. Das Ergebnis übertrifft 7:1 und eignet sich damit auch für normalen Text auf Stufe AAA.
(Lhell + 0,05)(Ldunkel + 0,05)
Die Schwellen sind Einsatzgrenzen
Ein Wert besteht oder fällt ohne Aufrunden. 4,499:1 erreicht die Schwelle 4,5:1 deshalb nicht.
Großer Text und sichtbare Steuerung
Auf Stufe AA gilt 3:1 für großen Text sowie für notwendige Grenzen, Zustände und grafische Objekte. Groß bedeutet mindestens 24 px normal oder 18,67 px fett.
Normaler Text auf Stufe AA
Text unterhalb der Großtextgrenze braucht mindestens 4,5:1. Derselbe Wert gilt auf Stufe AAA bereits für großen Text.
Normaler Text auf Stufe AAA
Für normalen Text verlangt die erhöhte Stufe 7:1. Logotypes und rein dekorative Inhalte sind von diesen Textgrenzen ausgenommen.
Dieselben Token, andere Nachbarn
Die Farbe allein hat keinen Kontrastwert. Erst das Paar entscheidet.
--line auf --paper
1,57:1 · nur als nicht notwendige Trennlinie geeignet.
--muted auf --canvas
6,43:1 · normaler Text besteht AA, aber nicht AAA.
--muted auf --paper
7,06:1 · normaler Text überschreitet 7:1 knapp.
--ink auf --signal
12,08:1 · auch kleiner Text hat deutliche Reserve.
So rechnen Werkzeuge
Sie linearisieren die sRGB-Kanäle mit dem WCAG-2.2-Schwellenwert 0,04045, gewichten Rot, Grün und Blau zur relativen Leuchtdichte und setzen beide Leuchtdichten in die Formel oben ein.
Messen Sie den berechneten Farbwert im jeweiligen Zustand. Transparenz, Bilder, Verläufe sowie Hover- und Fokuszustände können ein neues Farbpaar erzeugen.
So prüfen Sie es
- Wählen Sie in den Entwicklertools den Text oder die sichtbare Kontur aus.
- Lesen Sie
colorund den tatsächlich angrenzenden Hintergrund ab. - Prüfen Sie jeden Zustand und vergleichen Sie ungerundet mit seiner Schwelle.
Die Beispiele nutzen die im Designsystem definierten Farbwerte. Bei geänderten Token oder überlagerter Deckkraft rechnen Sie neu.
Aus dem Prüfbericht
Zwei Farbpaare, zwei Befunde
Kritisch Die Bildunterschrift auf der Farbfläche Regel color-contrast
Graugrüne Schrift auf graugrüner Fläche ergibt 1,17:1. Normaler Text braucht mindestens 4,5:1 zum Hintergrund.
Kritisch Der Link im Absatz ist nur farbig Regel link-in-text-block
Zwischen Linkfarbe und Textfarbe liegen 2,02:1. Eine Unterstreichung macht den Link auch ohne Farbsehen erkennbar.
Zum Mitnehmen
Die beiden Farbpaare, korrigiert
Eine Textfarbe, eine Unterstreichung.
Korrektur in 2 Schritten ansehen
Den Textkontrast anheben
Normaler Text braucht mindestens 4,5:1 zum Hintergrund. Auf der vorhandenen graugrünen Fläche erreicht weiße Schrift 5,31:1.
KorrekturvergleichSchritt 1 · CSS Vorher
.machine-tag { color: #58635f; background: #626e69; font-size: 0.75rem; }Nachher
.machine-tag { color: #ffffff; background: #626e69; font-size: 0.75rem; }Markierte Zeilen wurden geändert
So prüfen Sie es Sehen Sie die Stelle bei geringer Bildschirmhelligkeit an. Der Text hebt sich klar von der Fläche ab.
Links im Fließtext unterstreichen
Farbe allein trägt die Bedeutung nicht. Eine Unterstreichung macht den Link im Absatz erkennbar, auch ohne Farbwahrnehmung.
KorrekturvergleichSchritt 2 · CSS Vorher
.rune-transcript .stone-link { color: #a8b08d; text-decoration: none; }Nachher
.rune-transcript .stone-link { color: #a8b08d; text-decoration: underline; text-underline-offset: 0.15em; }Markierte Zeilen wurden geändert
So prüfen Sie es Stellen Sie den Bildschirm auf Graustufen. Der Link bleibt im Absatz erkennbar.