Kontrastprüfer

Ein Kontrastprüfer für Farbpaare, der zwei unabhängige Barrierefreiheits-Kennzahlen gleichzeitig anzeigt: das WCAG-2.1-Kontrastverhältnis (der aktuelle gesetzliche Standard für AA-/AAA-Konformität) und den wahrnehmungsbasierten Leichtigkeitskontrast Lc nach APCA. Vorder- und Hintergrundfarbe wählen, und die Seite zeigt eine Live-Vorschau sowie signierte Ergebnisse für beide Verfahren - genau wie die Design-Tools, die bereits mit APCA arbeiten.

So verwenden Sie das Tool

Vordergrundfarbe (Text) wählen - über den Farbwähler oder durch Eingabe eines HEX-Werts wie #111111.
Hintergrundfarbe wählen - zum Beispiel #e8e6dd. Das Vorschaufenster aktualisiert sich sofort.
Die beiden Ergebnisbereiche ablesen. Das WCAG-2.1-Panel zeigt das Luminanzverhältnis mit vier Bestanden-/Nicht-bestanden-Abzeichen (normaler und großer Text, jeweils AA und AAA). Das APCA-Panel zeigt einen signierten Lc-Wert und ob die gewählte Stufe erreicht wird.
Eine APCA-Stufe zum Prüfen auswählen - Fließtext (Lc 75), Inhaltstext (Lc 60), großer Text (Lc 45) oder Spot-Text (Lc 30). Das Tool hebt die höchste tatsächlich erreichte Stufe hervor.
Das Paar tauschen mit der Tauschen-Schaltfläche, um die entgegengesetzte Polarität zu testen - heller Text auf dunklem Grund wird unter APCA anders bewertet als dunkler Text auf hellem Grund.

Die Farbeingaben akzeptieren #rgb und #rrggbb, mit oder ohne #-Präfix. Alles wird clientseitig berechnet - es werden keine Farben an einen Server übertragen.

WCAG-2.1-Verhältnis

Die Web Content Accessibility Guidelines sind in den meisten Ländern die Grundlage für gesetzlich geforderte Barrierefreiheit im Web. WCAG 2.1 vergleicht die relative Luminanz zweier Farben mit (L1 + 0,05) / (L2 + 0,05) und verlangt:

Stufe	Normaler Text	Großer Text (≥18 pt / ≥14 pt fett)
AA (Minimum)	4,5 : 1	3 : 1
AAA (erhöht)	7 : 1	4,5 : 1

Das Verhältnis ist polaritätsblind: Vertauscht man die beiden Farben, bleibt die Zahl identisch. 21:1 ist Schwarz auf Weiß, 1:1 sind zwei identische Farben. Diese Zahl ist es, nach der Ihr Compliance-Audit am wahrscheinlichsten fragt.

APCA (Lc)

APCA - der Accessible Perceptual Contrast Algorithm - ist ein unabhängiges, wahrnehmungsbasiertes Kontrastverfahren, das sich derzeit in der Beta-Phase befindet. Es wurde für WCAG 3 erprobt, aber 2023 wieder aus dem Arbeitsentwurf entfernt; welcher Kontrastalgorithmus in WCAG 3 verwendet wird, ist noch offen. Statt eines Luminanzverhältnisses erzeugt APCA einen signierten Leichtigkeitskontrastwert von etwa +106 bis −108. Ein positiver Wert bedeutet dunkler Text auf hellem Grund („BoW"), ein negativer Wert heller Text auf dunklem Grund („WoB"). Die Polarität spielt eine Rolle, weil das menschliche Sehsystem beide Fälle unterschiedlich verarbeitet.

APCA ist wahrnehmungskalibriert: Anders als WCAG 2 überschätzt es den Kontrast sehr dunkler Farbpaare nicht. Zwei dunkle Farben, die ein Verhältnis von 4,5:1 bestehen, können hier durchaus unter Lc 45 liegen. Das Tool zeigt daher ein negatives Vorzeichen statt eines Absolutwerts; abgelesen wird der Betrag. Typische Stufen:

Stufe	Lc-Minimum	Typische Verwendung
Fließtext	75	Laufende Absätze bei 16px/Stärke 400
Inhaltstext	60	24px/400 oder 16px/700, im Mittelbereich in etwa wie 4,5:1
Großer Text	45	Überschriften bei 36px/400 oder 24px/700, „ungefähr wie" 3:1
Spot-Text	30	Platzhalter, deaktivierter Text - die Untergrenze für alles Lesbare

Die Entsprechung zu WCAG-2-Verhältnissen (60 ≈ 4,5:1, 45 ≈ 3:1, 75 ≈ 7:1) gilt nur für Farbpaare nahe einer Luminanz von 0,32–0,40; außerhalb dieses Bereichs weichen APCA und WCAG tatsächlich voneinander ab. Wenn sich beide Methoden widersprechen, gilt der strengere Wert - und bedenken Sie, dass APCA nicht Teil eines normativen Standards ist; für die Konformität bleibt WCAG 2 maßgeblich.

Rechenbeispiel

Prüfen Sie dunkelgrauen Text #111111 auf dem papierweißen Hintergrund #e8e6dd:

WCAG-2.1-Verhältnis: etwa 14,6 : 1 - besteht alle vier AA-/AAA-Abzeichen.
APCA: Lc 90,48 - deutlich über dem Fließtext-Minimum von Lc 75.

Versuchen Sie jetzt #767676 auf Weiß. Das WCAG-Verhältnis beträgt etwa 4,5 : 1 und besteht normalen Text gerade eben bei AA - APCA meldet jedoch rund Lc 71, also unterhalb der Lc-75-Schwelle für Fließtext. Das ist genau der Fall, in dem sich beide Standards unterscheiden: APCA stellt kleine graue Schrift strenger, weil WCAG aufgehellte dunkle Farben überbewertet.

Hinweise

Die APCA-Implementierung hier verwendet die stabilen Konstanten 0.0.98G-4g aus der apca-w3-Referenz (unverändert seit Februar 2021).
APCA ist polaritätsabhängig: Bitte vertauschen Sie Vorder- und Hintergrund nicht.
Diese Seite ist die passende Ergänzung zum Farbkonverter: Erstellen Sie dort die Palette und prüfen Sie hier Ihr gewähltes Text-/Hintergrundpaar.