APCA oder WCAG-2-Kontrast: Formel, Status und Modus für hohen Kontrast

Wer als Designerin oder Designer Farben prüft, begegnet früher oder später zwei Zahlen: dem WCAG-Kontrastverhältnis (4,5:1, 3:1) und einem APCA-Wert wie Lc 75. Sie stimmen nicht immer überein. Diese Seite erklärt, wie die WCAG-2-Formel funktioniert, was APCA ist und welchen Status es wirklich hat und wie der Windows-Modus für hohen Kontrast zu beidem steht.

Die kurze Antwort für alle, die eine Anforderung erfüllen müssen: Gesetze und Normen verwenden das WCAG-2-Kontrastverhältnis. Das sind allgemeine Informationen, keine Rechtsberatung.

Die WCAG-2-Formel, Schritt für Schritt

Die WCAG 2.2 definieren Kontrast in zwei Schritten, beide in ihrem Glossar.

1. Relative Leuchtdichte – wie hell eine Farbe ist, von 0 für das dunkelste Schwarz bis 1 für das hellste Weiß. Für jeden sRGB-Kanal:

C_srgb = C_8bit / 255
C = C_srgb / 12.92                         if C_srgb <= 0.04045
C = ((C_srgb + 0.055) / 1.055) ^ 2.4       otherwise

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

Die Gewichte zeigen, dass das Auge für Grün weit empfindlicher ist als für Blau. (Vor Mai 2021 verwendete der WCAG-Text 0,03928 als Schwellenwert; das W3C merkt an, dass das praktisch keine Auswirkung hat.)

2. Kontrastverhältnis – mit L1 als Leuchtdichte der helleren und L2 der dunkleren Farbe:

contrast ratio = (L1 + 0.05) / (L2 + 0.05)

Das Ergebnis reicht von 1:1 (dieselbe Farbe) bis 21:1 (Schwarz auf Weiß). Ein Beispiel: Das Grau #767676 hat eine Leuchtdichte von etwa 0,181, erreicht auf Weiß also (1 + 0,05) / (0,181 + 0,05) ≈ 4,54:1 und besteht das Minimum von 4,5:1. Eine Stufe heller, #777777, ergibt etwa 4,48:1 und besteht nicht – das W3C sagt, die Werte dürfen nicht gerundet werden, 4,499:1 erfüllt 4,5:1 also nicht.

Die Schwellenwerte

Großer Text ist mindestens 18 Punkt (24 CSS-Pixel) oder 14 Punkt fett (etwa 18,66 CSS-Pixel). Das W3C erklärt den Wert 4,5:1 als Ausgleich für den Verlust an Kontrastempfindlichkeit, der mit einer Sehschärfe von etwa 20/40 einhergeht. Prüfen Sie jedes Paar mit unserem Kontrast-Checker.

Bekannte Grenzen der WCAG-2-Formel

Die Formel ist einfach und prüfbar, deshalb eignet sie sich für Regelwerke. Sie hat aber auch Grenzen, die das Understanding-Dokument des W3C selbst erwähnt: Sie berücksichtigt die Schriftstärke nicht, und dünne oder ungewöhnliche Schriften können wegen der Kantenglättung viel blasser wirken als ihre nominelle Farbe – „ein Kontrastverhältnis, das nominell besteht … in der Praxis aber einen viel geringeren Kontrast hat“. Dort wird empfohlen, kräftigere Schriften oder ein Farbpaar zu verwenden, das das Minimum übertrifft. Die Formel setzt außerdem sRGB-Farben voraus.

Die Formel ist auch symmetrisch: Vertauscht man Text und Hintergrund, ergibt sich dasselbe Verhältnis. Das APCA-Projekt geht weiter und stellt fest, dass die Kontrastberechnung nach WCAG 2 „weder die menschliche visuelle Wahrnehmung noch Sehbeeinträchtigungen genau abbildet“ – der Ausgangspunkt für APCA.

Was APCA ist

Der Accessible Perceptual Contrast Algorithm wird in seinem offiziellen Repository als Bewertungsmethode beschrieben, die den wahrgenommenen Kontrast zwischen sRGB-Farben auf einem Monitor vorhersagt und für die Arbeit an „Silver“ / WCAG 3 des W3C entwickelt wurde. Die Unterschiede zu WCAG 2 in der Praxis:

• Die Reihenfolge zählt. Die erste Farbe ist der Text, die zweite der Hintergrund; das Ergebnis hat ein Vorzeichen, das die Polarität zeigt (dunkel auf hell oder hell auf dunkel).
• Eine andere Skala. Das Ergebnis ist ein Lc-Wert, ungefähr von −108 bis 106, kein Verhältnis.
• Größe und Stärke sind Teil der Antwort. Eine Nachschlagefunktion liefert zu einem Lc-Wert die nötigen Schriftgrößen für die Stärken 100 bis 900. Die README nennt Regeln wie ein Maximum von Lc 90 für Schriften über 24 px mit Stärke 300 oder mehr.
• Beta. Die Bibliothek (apca-w3 auf npm) befindet sich in der öffentlichen Beta-Validierung, und die README bezeichnet das zugehörige Kriterium im Entwurf als laufende Arbeit.

Ist APCA Teil der WCAG 3?

Nicht als endgültiger Beschluss. Zwei Fakten, beide an den offiziellen Quellen geprüft:

1. Das APCA-Repository sagt, APCA werde evaluiert als Ersatz für die Kontrastberechnung der WCAG 2 in künftigen Standards.
2. Der aktuelle Arbeitsentwurf der WCAG 3 vom 10. September 2026 sagt: „The contrast algorithm used in WCAG 3 is yet to be determined.“ (Der in der WCAG 3 verwendete Kontrastalgorithmus steht noch nicht fest.) Seine Anforderungen an den Textkontrast haben den Status developing, das Messverfahren bleibt offen. Der Entwurf sagt außerdem, es sei unangemessen, ihn anders als als laufende Arbeit zu zitieren.

APCA ist also ein Kandidat, die WCAG 3 ein Entwurf, und beides ist nicht normativ. Die WCAG 2.2 ist die aktuelle W3C-Empfehlung, und die EN 301 549, die europäische Norm hinter dem European Accessibility Act, verweist auf Erfolgskriterien der WCAG 2. Ein Farbpaar, das APCA besteht, aber 4,5:1 verfehlt, verfehlt die Anforderung.

WCAG oder APCA: eine praktische Regel

1. Erfüllen Sie das WCAG-2-Verhältnis für jeden Text und jede UI-Komponente. Das ist die Anforderung.
2. Nutzen Sie APCA, wenn Sie möchten, als Gestaltungshilfe obendrauf: zum Beispiel, um für dünnen Text eine kräftigere Schrift zu wählen, oder um zu merken, dass ein Paar, das 4,5:1 gerade so besteht, bei heller Schrift auf dunklem Grund trotzdem schwer lesbar ist.
3. Geben Sie APCA-Ergebnisse nicht als Konformität aus. Berichte, Erklärungen und Ausschreibungen verweisen auf die WCAG 2.

Windows-Modus für hohen Kontrast und erzwungene Farben

„WCAG High-Contrast-Modus“ ist eine häufige Suche, vermischt aber zwei Dinge.

Was es ist. Windows bietet Kontrastdesigns (Windows 11; in Windows 10 Modus für hohen Kontrast genannt). Microsoft dokumentiert sie unter Einstellungen → Barrierefreiheit → Kontrastdesigns, mit der Tastenkombination linke Alt-Taste + linke Umschalttaste + Druck. Browser wenden dann die begrenzte Palette der Nutzerin oder des Nutzers auf Webseiten an. CSS erkennt das mit dem Media Feature forced-colors: active bedeutet, dass der User Agent eine vom Nutzer gewählte begrenzte Farbpalette erzwingt und dem Autor nur Systemfarben zur Verfügung stehen.

Was die WCAG sagen. Kein Erfolgskriterium der WCAG 2.2 verlangt namentlich einen Modus für hohen Kontrast oder die Unterstützung erzwungener Farben, und eine Website muss keinen eigenen Schalter für hohen Kontrast anbieten, um AA zu erfüllen. Aber Ihr Code kann die Seite für Menschen, die so einen Modus nutzen, beschädigen, und dann scheitern andere Kriterien:

• Fokus. Die W3C-Technik C40 warnt, dass User Agents box-shadow in Modi mit erzwungenen Farben häufig unterdrücken, sodass eine nur mit einem Schatten gebaute Fokusanzeige verschwindet. C40 schlägt vor, sie für die Kompatibilität mit solchen Modi mit outline: 2px transparent solid zu kombinieren – relevant für 2.4.7 Fokus sichtbar.
• Icons und Ränder. Icons, die mit Hintergrundbildern gezeichnet sind, und Bedienelemente, die sich nur durch eine Hintergrundfarbe unterscheiden, können verschwinden. Das berührt 1.4.11 Nicht-Text-Kontrast und 1.4.1 Benutzung von Farbe.
• Nehmen Sie nicht mehr Kontrast an. Die Media-Queries-Spezifikation merkt an, dass erzwungene Farben nicht zwingend den Wunsch nach mehr Kontrast bedeuten; dafür gibt es prefers-contrast.

Einige wichtige Seiten mit eingeschaltetem Kontrastdesign zu testen, ist gute Praxis, auch wenn kein Kriterium es nennt.

Was unsere Prüfungen tun

Unsere Prüfungen verwenden wie die Anforderungen das WCAG-2-Kontrastverhältnis: zu geringen Textkontrast auf Stufe AA (1.4.3) und erhöhten Kontrast auf Stufe AAA (1.4.6), den unsere Berichte getrennt von den AA-Ergebnissen zeigen. APCA-Werte melden wir nicht. Lassen Sie den kostenlosen WCAG-Checker über eine Seite laufen oder testen Sie ein einzelnes Paar mit dem Kontrast-Checker. Unsere Prüfungen sind eine automatische Prüfung, kein vollständiges Audit und keine Rechtsberatung.

Häufige Fragen

Sollte ich für den Kontrast WCAG oder APCA verwenden?

Nutzen Sie das Kontrastverhältnis nach WCAG 2, um Anforderungen zu erfüllen: Darauf beziehen sich WCAG 2.2, die EN 301 549 und die darauf aufbauenden Gesetze. APCA kann in der Gestaltung eine nützliche zweite Meinung sein, ist aber heute nicht Teil einer verbindlichen Norm.

Ist APCA Teil der WCAG 3?

Nicht als Beschluss. APCA wurde als Kandidat für die WCAG 3 entwickelt und befindet sich in einer öffentlichen Beta. Der aktuelle Arbeitsentwurf der WCAG 3 vom September 2026 sagt, der Kontrastalgorithmus stehe noch nicht fest, und die WCAG 3 selbst ist ein Entwurf, keine Norm.

Wie wird das WCAG-Kontrastverhältnis berechnet?

Wandeln Sie beide Farben in relative Leuchtdichte um: Linearisieren Sie jeden sRGB-Kanal, dann gilt L = 0,2126 R + 0,7152 G + 0,0722 B. Das Verhältnis ist (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere Farbe ist. Es reicht von 1:1 bis 21:1 und wird nicht gerundet.

Verlangen die WCAG Unterstützung für den Windows-Modus für hohen Kontrast?

Kein WCAG-Kriterium nennt den Modus für hohen Kontrast oder erzwungene Farben. Aber Ihr eigenes CSS kann die Seite in diesem Modus beschädigen, zum Beispiel ein Fokusrahmen, der nur mit box-shadow gebaut ist, den Browser dort häufig entfernen. Ein Test mit erzwungenen Farben ist gute Praxis.

Kann ein Farbpaar die WCAG bestehen und trotzdem schwer lesbar sein?

Ja. Die WCAG-Formel berücksichtigt die Schriftstärke nicht, und dünne Schriften mit Kantenglättung können blasser wirken, als ihre Farbe vermuten lässt. Das W3C empfiehlt in diesem Fall kräftigere Schriften oder mehr Kontrast als das Minimum.

Quellen

• W3C, WCAG 2.2 (definitions of relative luminance and contrast ratio): https://www.w3.org/TR/WCAG22/
• W3C, Understanding 1.4.3 Contrast (Minimum): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• W3C, WCAG 3.0 Working Draft: https://www.w3.org/TR/wcag-3.0/
• APCA, apca-w3 repository: https://github.com/Myndex/apca-w3
• W3C, Technique C40, two-colour focus indicator: https://www.w3.org/WAI/WCAG22/Techniques/css/C40
• W3C, Media Queries Level 5 (forced-colors): https://www.w3.org/TR/mediaqueries-5/
• Microsoft, Change color contrast in Windows: https://support.microsoft.com/en-us/windows/change-color-contrast-in-windows-fedc744c-90ac-69df-aed5-c8a90125e696