WCAG-Farbkontrast: wie er berechnet wird, welche Verhältnisse gelten und wie man sie einhält

Farbkontrast ist der Helligkeitsunterschied zwischen einem Text (oder einem grafischen Element) und seinem Hintergrund, ausgedrückt als Verhältnis von 1:1 (kein Kontrast) bis 21:1 (Schwarz auf Weiß). Die WCAG, der Standard für Barrierefreiheit im Web, verlangen auf Stufe AA mindestens 4,5:1 für normalen Text und 3:1 für großen Text und Bedienelemente, auf Stufe AAA 7:1. Das ist keine Geschmacksfrage: Ein helles Grau auf Weiß, das dir elegant erscheint, ist für einen realen Teil der Besucher unlesbar, und Lighthouse, axe und jedes Audit melden es.

Dieser Artikel erklärt, wie das Verhältnis berechnet wird, was jedes Kriterium verlangt, wie man es misst und wie man die typischen Fälle behebt, ohne die Palette neu zu machen.

Wie das Verhältnis berechnet wird

Die Formel steht in der WCAG-Definition:

Verhältnis = (L1 + 0,05) / (L2 + 0,05)

Dabei ist L1 die relative Leuchtdichte der helleren Farbe und L2 die der dunkleren, beide zwischen 0 (Schwarz) und 1 (Weiß). Die Leuchtdichte ergibt sich aus den sRGB-Komponenten: Jeder Kanal wird auf 0–1 normiert, linearisiert (bei ≤ 0,04045 durch 12,92 geteilt, sonst ((c + 0,055) / 1,055) ^ 2,4) und mit den Gewichten 0,2126 R + 0,7152 G + 0,0722 B kombiniert. Grün wiegt deutlich mehr als Blau, weil das menschliche Auge dafür empfindlicher ist: Deshalb kontrastiert ein gesättigtes Blau auf Schwarz weniger, als es scheint.

In JavaScript:

function luminance([r, g, b]) {
  const lin = (c) => {
    c /= 255;
    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
  };
  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
}
function contrast(a, b) {
  const [l1, l2] = [luminance(a), luminance(b)].sort((x, y) => y - x);
  return (l1 + 0.05) / (l2 + 0.05);
}
contrast([29, 29, 31], [255, 255, 255]); // #1d1d1f auf Weiß ≈ 16,8:1
contrast([110, 110, 115], [255, 255, 255]); // #6e6e73 auf Weiß ≈ 5,1:1
contrast([134, 134, 139], [255, 255, 255]); // #86868b auf Weiß ≈ 3,6:1 (reicht nicht für normalen Text)

Die drei Beispiele sind die Grautöne dieses Blogs: Das erste ist der Haupttext, das zweite das Grau für Sekundärtext (besteht AA) und das dritte das Apple-Grau, mit dem wir begonnen hatten und das für kleinen Text aufgegeben werden musste.

Was jedes Kriterium verlangt

Kriterium	Stufe	Gilt für	Mindestverhältnis
1.4.3 Kontrast (Minimum)	AA	Normaler Text	4,5:1
1.4.3 Kontrast (Minimum)	AA	Großer Text (≥ 24 px oder ≥ 18,66 px fett)	3:1
1.4.6 Kontrast (Erhöht)	AAA	Normaler Text	7:1
1.4.6 Kontrast (Erhöht)	AAA	Großer Text	4,5:1
1.4.11 Nicht-Text-Kontrast	AA	Bedienelemente (Feldränder, nötige Icons, Fokusindikatoren) und informative Grafiken	3:1

Ausgenommen: dekorativer Text, Logos, Text in deaktivierten Bedienelementen und Text als Teil eines rein dekorativen Bildes. Ein Platzhalter in einem Formularfeld ist nicht ausgenommen: Das ist Text, den der Nutzer lesen muss.

„Groß“ ist in Punkt definiert (18 pt oder 14 pt fett); in CSS entspricht das etwa 24 px und 18,66 px.

Wie man misst

• Farbwerkzeug von AIMRAN Tools: Text- und Hintergrundfarbe eingeben (HEX, RGB, HSL oder OKLCH), und es zeigt das Verhältnis und ob AA und AAA für normalen und großen Text bestanden sind. Läuft im Browser.
• Chrome DevTools: Beim Inspizieren eines Textes zeigt der Farbwähler im Styles-Panel das Verhältnis und zwei Linien im Farbrad, die markieren, wo AA und AAA beginnen. Das Panel CSS Overview listet alle kontrastschwachen Paare der Seite.
• Lighthouse / axe: Die Prüfung color-contrast listet die durchgefallenen Elemente mit ihrem aktuellen Verhältnis.
• Firefox: Der Barrierefreiheits-Inspektor hat eine Kontrastprüfung mit Farbenblindheits-Simulation.

Automatische Werkzeuge erkennen Text auf Bildern oder Verläufen nicht: Dort musst du gegen die hellste (oder dunkelste) Stelle des Hintergrunds messen, die unter dem Text liegen kann.

Die häufigsten Fehler und ihre Behebung

1. „Dezentes“ Grau für Sekundärtext. #999 auf Weiß ergibt 2,9:1. Geh auf #6e6e73 (5,1:1) oder #595959 (7:1). Hierarchie entsteht auch durch Größe und Schriftstärke, nicht nur durch Farbe.
2. Weißer Text auf hellen Markenfarben. Weiß auf #0071e3 ergibt 4,7:1 (besteht); auf #34c759 (Grün) nur 2,2:1. Für Labels in hellen Farben nutze dunklen Text oder mische die Farbe mit Schwarz: In diesem Blog verwenden die Kategorie-Labels color-mix(in srgb, var(--c) 62%, black) für den Text und die reine Farbe nur in Icons und Hintergründen.
3. Links, die sich nur durch Farbe unterscheiden. Neben dem Kontrast zum Hintergrund muss sich ein Link im Fließtext vom normalen Text abheben (die WCAG verlangen 3:1 zwischen beiden oder ein zusätzliches Merkmal wie Unterstreichung). Unterstreichen ist am einfachsten.
4. Helle Platzhalter. Das Standardgrau vieler Browser erreicht keine 4,5:1. Setze ::placeholder { color: #6e6e73 }.
5. Unsichtbarer Fokusindikator. Die Tastatur-outline braucht 3:1 gegen den angrenzenden Hintergrund. Ein outline: 2px solid in der Primärfarbe auf Weiß besteht meist; auf einem Button derselben Farbe nicht: Ergänze einen outline-offset, damit der Ring auf dem Hintergrund liegt.
6. Dunkelmodus nicht geprüft. Grautöne, die auf Weiß funktionieren, funktionieren auf #000 nicht. Miss beide Paletten getrennt.

Eine Anmerkung zu APCA

Die WCAG 3, noch im Entwurf, untersuchen einen anderen Algorithmus (APCA), der Polarität (heller Text auf dunkel gegenüber dunkel auf hell) und Schriftgröße besser berücksichtigt. Als Designreferenz interessant, aber die rechtliche Anforderung und das, was Audits heute messen, ist das Verhältnis der WCAG 2, also musst du dieses einhalten.

Fazit

Der Kontrast wird mit einer festen Formel aus der Leuchtdichte beider Farben berechnet und mit drei Schwellen verglichen: 4,5:1 für Text, 3:1 für großen Text und Komponenten, 7:1 für AAA. Miss mit den DevTools oder einem Kontrastwerkzeug, prüfe Hell und Dunkel getrennt und denk daran, dass visuelle Hierarchie nicht nur vom Grau abhängt: Größe, Schriftstärke und Abstand leisten dieselbe Arbeit, ohne jemanden auszuschließen.