Color Contrast Checker für Websites
Von der URL zum Farbwert
Seite prüfen, Paar ablesen, Farbe im gemeinsamen CSS ändern.
Kontrast im System prüfen
Aus zwei Farben wird ein belastbarer Wert
Messen Sie das Paar, finden Sie sein CSS-Token und prüfen Sie alle Fundstellen erneut.
- Vordergrund
--line· #CBD0C8- Hintergrund
--paper· #FFFFFF- Ergebnis
- × nicht für Text
(1,0000 + 0,05) ÷ (0,6198 + 0,05) = 1,5677
--line--muted- Vordergrund
--muted· #555A54- Hintergrund
--paper· #FFFFFF- Ergebnis
- ✓ AA für normalen Text
(1,0000 + 0,05) ÷ (0,0988 + 0,05) = 7,0547
/shop--text-mutedEin gemeinsames Token kann viele Fundstellen korrigieren. Prüfen Sie danach trotzdem jede Kombination: Dasselbe Texttoken liegt nicht überall auf demselben Hintergrund.
Chrome zeigt Messwert und CSS-Quelle zusammen
color finden Mit Strg + Umschalt + C wählen Sie ein Element aus; auf macOS verwenden Sie Cmd + Option + C. Der Farbwähler an der color-Deklaration zeigt das Verhältnis.
Der Grenzwert folgt der Funktion
Schriftgröße und Funktion gehören deshalb in jeden Befund. Ein nacktes „3:1“ sagt noch nicht, ob ein Ergebnis besteht.
Zwei bestandene Paare reichen noch nicht
Die Versandbedingungen sind lesbar, heben sich farblich aber nicht mit 3:1 vom umgebenden Text ab. Die sichtbare Unterstreichung löst die Abhängigkeit von Farbe.
So prüfen Sie es
- Prüfen Sie die ganze URL und öffnen Sie eine konkrete Fundstelle.
- Lesen Sie Vordergrund, Hintergrund, Größe und Verhältnis gemeinsam.
- Ändern Sie die Quellvariable im Stylesheet, nicht nur im Browser.
- Prüfen Sie dieselbe Komponente in anderen Seiten und Zuständen erneut.
Aus dem Prüfbericht
Zwei Befunde je Textfarbe
Kritisch Schwache Textkontraste auf der geprüften Seite Regel color-contrast
Der Check nennt jedes unzureichende Paar mit seinem Verhältnis. Für normalen Text gilt 4,5:1, für großen Text 3:1.
Kritisch Links, die nur an der Farbe erkennbar sind Regel link-in-text-block
Auch Links im Fließtext werden gemessen. Reicht der Farbabstand zum Text nicht, gehört eine Unterstreichung dazu.
Zum Mitnehmen
Die gefundenen Farbpaare, korrigiert
Ein Farbtoken, eine Regel für Textlinks.
Korrektur in 2 Schritten ansehen
Das Farbtoken abdunkeln
Die schwache Schriftfarbe stammt aus einem Token. Ein dunklerer Wert hebt sie von 2,59:1 auf 6,24:1, überall wo das Token gilt.
KorrekturvergleichSchritt 1 · CSS Vorher
:root { --text-muted: #9aa39d; } .machine-tag { color: var(--text-muted); background: #ffffff; }Nachher
:root { --text-muted: #5c625e; } .machine-tag { color: var(--text-muted); background: #ffffff; }Markierte Zeilen wurden geändert
So prüfen Sie es Sehen Sie die Stelle im Browser an. Der Text hebt sich deutlich von der weißen 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.