WCAG Kontrast Checker: Kontrastverhältnis zweier Farben

Kontrastverhältnis berechnen

Farben als Hexadezimalwert eingeben, zum Beispiel #1C5D4F, oder über die Farbauswahl des Browsers wählen.

Textfarbe (Vordergrund)

Format #RRGGBB oder #RGB.

Hintergrundfarbe

Format #RRGGBB oder #RGB.

Ergebnis nach WCAG 2.2

Anforderung	Mindestverhältnis	Ergebnis
AA, normaler Text [1]	4,5:1
AA, großer Text [1]	3:1
AAA, normaler Text [2]	7:1
AAA, großer Text [2]	4,5:1
AA, Grafik und Bedienelemente [3]	3:1

Als großer Text gilt ab 18 pt (24 px), oder ab 14 pt (18,66 px) in Fettschrift. [1]

Wie das Verhältnis berechnet wird

Das Kontrastverhältnis ist (L1 + 0,05) / (L2 + 0,05), wobei L die relative Leuchtdichte der helleren und der dunkleren Farbe ist. Die Werte reichen von 1:1 (zwei gleiche Farben) bis 21:1 (Schwarz auf Weiß). Definition und Formel stammen aus der WCAG. [7]

Was ein Kontrast Checker nicht sagt

• Text über einem Bild oder einem Verlauf hat viele Farben unter sich. Messen Sie die schlechteste Stelle, nicht den Durchschnitt.
• Inaktive Bedienelemente und rein dekorativer Text sind von 1.4.3 ausgenommen. Das ist eine Ausnahme in der Norm und kein Grund, sie im Entwurf zu ignorieren. [1]
• Zustände zählen einzeln: Hover, Fokus und aktiver Zustand haben eigene Farben und ein eigenes Verhältnis.
• Feldränder, Symbole und der Fokusindikator fallen unter 1.4.11 mit 3:1, nicht unter 4,5:1. [3]
• Farbe allein darf keine Information tragen. Das regelt 1.4.1, und ein Kontrast Checker beantwortet es nicht.

WCAG 2.2 und die Stufe AA

WCAG 2.2 ist eine W3C-Empfehlung und ergänzt WCAG 2.1 um neun neue Kriterien. Stufe AA ist die Stufe, die EN 301 549 in Kapitel 9 aus WCAG 2.1 übernimmt. Gegen diese Norm wird in der Praxis geprüft; für sich allein belegt sie nicht, dass eine Website das Gesetz erfüllt. [4] [8]

WCAG 2.2 AA Checkliste: Kriterien zu Kontrast und Sehen

• 1.4.3 Kontrast (Minimum): Text 4,5:1, großer Text 3:1.
• 1.4.6 Kontrast (Erhöht) ist Stufe AAA: 7:1 und 4,5:1.
• 1.4.11 Nicht-Text-Kontrast: Grafik und Bedienelemente 3:1.
• 1.4.1 Verwendung von Farbe: Farbe nie als einziger Träger.
• 1.4.4 Textgröße ändern: 200 Prozent ohne Verlust von Inhalt.
• 1.4.12 Textabstand: Abstände müssen anpassbar bleiben.
• 2.4.11 Fokus nicht verdeckt (neu in 2.2, Stufe AA).
• 2.5.8 Zielgröße (Minimum): 24 x 24 px (neu in 2.2, Stufe AA).

Was WCAG 2.2 neu bringt

Neun neue Kriterien, davon auf Stufe AA: 2.4.11 Fokus nicht verdeckt (Minimum), 2.5.7 Ziehbewegungen, 2.5.8 Zielgröße (Minimum) und 3.3.8 Barrierefreie Authentifizierung (Minimum). Auf Stufe A kamen 3.2.6 Konsistente Hilfe und 3.3.7 Redundante Eingabe dazu. Kriterium 4.1.1 Parsen gilt als überholt. Auf Stufe AAA: 2.4.12 Fokus nicht verdeckt (Erweitert), 2.4.13 Fokus-Erscheinungsbild und 3.3.9 Barrierefreie Authentifizierung (Erweitert). [5]

WCAG 2.3 gibt es nicht

Der Begriff wird oft gesucht, eine Version 2.3 ist aber nie erschienen. Die aktuelle veröffentlichte Fassung ist WCAG 2.2. Die nächste Generation entsteht als WCAG 3.0 und ist bislang ein W3C Working Draft, kein Standard, aus dem sich heute Pflichten ableiten lassen. [6]

Quellen

• [1] W3C: WCAG 2.2, Success Criterion 1.4.3 Contrast (Minimum), Level AA.
• [2] W3C: WCAG 2.2, Success Criterion 1.4.6 Contrast (Enhanced), Level AAA.
• [3] W3C: WCAG 2.2, Success Criterion 1.4.11 Non-text Contrast, Level AA.
• [4] W3C: Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation.
• [5] W3C: What's New in WCAG 2.2.
• [6] W3C: WCAG 3 Introduction (W3C Working Draft, not a standard).
• [7] W3C: WCAG 2.2, relative luminance and contrast ratio definitions.
• [8] ETSI EN 301 549 V3.2.1, clause 9 (web), which adopts WCAG 2.1 Level AA.