CSS Color Contrast
Die wirksame Farbe zählt
Farbe, Hintergrund, Deckkraft: drei Angaben ergeben ein Verhältnis.
Kontrastlabor
Kontrast entsteht zwischen zwei Farben
Sechs echte Farbpaare zeigen, warum Hexwert, Hintergrund und Deckkraft zusammengehören.
Gemessen nach WCAG 2.2
Die Farbpaare im Messfeld
(Lhell + 0,05) / (Ldunkel + 0,05)Möglicher Bereich: 1:1 bis 21:1#151514 auf #FFFFFF#3B2BBD auf #FFFFFF#555A54 auf #F3F5F1#151514 auf #FFCB45#FFCB45 auf #FFFFFF#151514 auf #F3F5F1Große Schrift: ab 18 pt normal oder 14 pt fett.
Normaler Text einschließlich Hinweis- und Platzhaltertext.
Visuelle Information, die Bedienelemente und Zustände erkennen lässt.
Deckkraft mitrechnen
Aus zwei Hexwerten werden drei Messfarben
opacity mischt das ganze Element mit dem Untergrund. Gemessen wird die sichtbare Mischung, nicht der ursprüngliche Textwert.
Kopierbare Grundlage
Sechs Token mit festem Bezug
:root {
--surface: #f3f5f1;
--text: #151514; /* 16.66:1 auf surface */
--muted: #555a54; /* 6.43:1 auf surface */
--link: #3b2bbd; /* 8.45:1 auf surface */
--focus: #3b2bbd; /* 8.45:1 auf surface */
--signal: #ffcb45; /* text auf signal: 12.08:1 */
}
body {
color: var(--text);
background: var(--surface);
}
.hint {
color: var(--muted);
}
.prose a {
color: var(--link);
text-decoration: underline;
text-underline-offset: 0.15em;
}
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 2px;
}So prüfen Sie es
- Wählen Sie in DevTools das tatsächliche Element und den sichtbaren Zustand aus.
- Öffnen Sie in Styles das Farbfeld neben
colorund klappen Sie Contrast ratio auf. - Prüfen Sie den berechneten Hintergrund, auch über Bildern und verschachtelten Flächen.
- Wiederholen Sie die Messung für Hover, Fokus, Fehler, deaktivierte und besuchte Zustände.
- Kontrollieren Sie Links zusätzlich ohne Farbe: Unterstreichung oder anderes Formmerkmal.
Aus dem Prüfbericht
Zwei gemessene Stellen
Kritisch Die Schriftfarbe des Hinweistexts Regel color-contrast
12 px normale Schrift auf der Farbfläche ergibt 1,17:1. Erst ab 4,5:1 ist der Hinweis verlässlich lesbar.
Kritisch Die Linkfarbe im Absatz Regel link-in-text-block
Ein Link, der sich nur farblich abhebt, braucht 3:1 zum Fließtext. Sonst gehört eine Unterstreichung dazu.
Zum Mitnehmen
Die Textfarben, korrigiert
Eine Farbe ohne Deckkraft, ein unterstrichener Link.
Korrektur in 2 Schritten ansehen
Deckkraft durch eine echte Farbe ersetzen
opacity blasst das ganze Element ab und macht den Wert schwer nachvollziehbar. Eine ausgerechnete Farbe bleibt prüfbar und stabil.
KorrekturvergleichSchritt 1 · CSS Vorher
.machine-tag { color: #151514; background: #626e69; opacity: 0.45; }Nachher
.machine-tag { color: #ffffff; background: #626e69; opacity: 1; }Markierte Zeilen wurden geändert
So prüfen Sie es Lesen Sie die Stelle bei geringer Bildschirmhelligkeit. Der Text bleibt erkennbar.
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.