CSS Contrast Checker
Zwei Hex-Werte, ein Urteil
Fließtext, Bildunterschrift, Textlink: drei Farbpaare, ein Grenzwert.
Kontrastlabor
Vom Farbpaar zum belastbaren Wert
Vier echte Token-Paare zeigen, was 3:1, 4,5:1 und 7:1 praktisch bedeuten.
--muted auf --canvasAuch Nebentext muss lesbar bleiben.Eine zurückhaltende Farbe darf leiser wirken. Der gemessene Abstand entscheidet, ob der Text trotzdem zuverlässig lesbar ist.
#555A54 / #F3F5F1Als groß zählt mindestens 18 Punkt (24 CSS-Pixel) oder 14 Punkt (etwa 18,7 CSS-Pixel) in fetter Schrift.
Vier nachgerechnete Paare
Die Skala ist messbar, nicht gefühlt
--ink auf --canvas--signal auf --ink--one auf --canvas--muted auf --canvasBerechnet in sRGB nach WCAG 2.2, auf zwei Nachkommastellen gerundet. Die Balken reichen bis zum theoretischen Maximum von 21:1.
Der Deckkraft-Fall
Der deklarierte Hex-Wert ist nicht immer die sichtbare Farbe
--ink18,27:1opacity: 0.5Browser mischt Text und Fläche--ink3,45:1 Bei 50 Prozent Deckkraft mischt sich #151514 auf Weiß zu #8A8A8A. Für normalen Text unterschreitet das Ergebnis 4,5:1. Liegt die Deckkraft am Elternelement, werden auch dessen Hintergrund, Rahmen und Kinder gemischt.
Die Rechenkette
Vier Schritte bis zum Verhältnis
- 01RGB normieren
R8bit / 255 - 02sRGB linearisieren
Grenze 0.04045 - 03Leuchtdichte bilden
0.2126R + 0.7152G + 0.0722B - 04Hell durch dunkel teilen
(L1 + 0.05) / (L2 + 0.05)
const kanal = (wert) => {
const srgb = wert / 255;
return srgb <= 0.04045
? srgb / 12.92
: ((srgb + 0.055) / 1.055) ** 2.4;
};
const rgb = (hex) =>
[1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
const luminanz = ([r, g, b]) =>
0.2126 * kanal(r) + 0.7152 * kanal(g) + 0.0722 * kanal(b);
const kontrast = (vorne, hinten) => {
const werte = [luminanz(rgb(vorne)), luminanz(rgb(hinten))];
const hell = Math.max(...werte);
const dunkel = Math.min(...werte);
return (hell + 0.05) / (dunkel + 0.05);
};
console.log(kontrast('#555a54', '#f3f5f1').toFixed(2));
// 6.43Was eine einzelne Zahl nicht abnimmt
Fotos und VerläufeMessen Sie die schwächste Stelle direkt am Text.
Hover und FokusJeder sichtbare Zustand braucht eine eigene Messung.
Links im FließtextUnterstreichen Sie Links, wenn nur Farbe sie unterscheidet.
Abnahme im Browser
So prüfen Sie es
- 1
Wählen Sie in DevTools den Text und öffnen Sie den Farbwähler bei
color. - 2
Vergleichen Sie den berechneten Hintergrund mit der tatsächlich sichtbaren Fläche.
- 3
Prüfen Sie Normal-, Hover-, Fokus- und deaktivierten Zustand getrennt.
- 4
Kontrollieren Sie Text auf Bildern an der kontrastärmsten Stelle.
Aus dem Prüfbericht
Zwei Regeln, drei Farbpaare
Kritisch Die Bildunterschrift verschwindet in der Fläche Regel color-contrast
Der Rechner misst 1,17:1 zwischen Schrift und Hintergrund. Nötig sind 4,5:1; eine hellere Schriftfarbe auf derselben Fläche genügt.
Kritisch Der Link im Absatz ist nur farbig Regel link-in-text-block
Der Rechner vergleicht auch Link und Fließtext: 2,02:1 reichen nicht. Eine Unterstreichung löst das ohne neue Farbe.
Zum Mitnehmen
Die Farbpaare, korrigiert
Zwei Änderungen im CSS. Flächen und Schriftgrößen bleiben.
Korrektur in 2 Schritten ansehen
Die Bildunterschrift aufhellen
Weiße Schrift erreicht auf derselben graugrünen Fläche 5,31:1. Es ändert sich nur die Textfarbe, Hintergrund und Schriftgröße bleiben.
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 Geben Sie beide Werte erneut in den Rechner. Das Verhältnis liegt jetzt über 4,5:1.
Den Textlink unterstreichen
Farbe allein trägt den Link nicht. Eine Linie macht ihn im Absatz erkennbar, unabhängig vom gemessenen Farbabstand.
KorrekturvergleichSchritt 2 · CSS Vorher
.stone-link { color: #a8b08d; text-decoration: none; }Nachher
.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 Satz erkennbar.