Farbkontrast-Algorithmen: WCAG 2 vs. APCA

Wenn ein Designer sagt "dieser Text hat genug Kontrast", meint er in der Regel eine Zahl: ein Verhaltnis wie 4,5:1, das von einem Algorithmus berechnet wird. Aber nicht alle Kontrastalgorithmen sind gleich. Der in WCAG 2 eingebettete ist seit 2008 der Industriestandard, hat jedoch dokumentierte Schwachen. Der APCA — Advanced Perceptual Contrast Algorithm — wurde als moderner Ersatz entwickelt und steht im Mittelpunkt des Entwurfs der WCAG-3.0-Spezifikation.

Zu verstehen, wie diese Algorithmen funktionieren, wo sie ubereinstimmen und wo sie abweichen, ist fur jeden Designer und Entwickler, dem Barrierefreiheit wichtig ist, unerlasslich. Dieses Tutorial erlautert beide von Grund auf.

WCAG-2-Formel fur relative Luminanz

Der WCAG-2-Kontrastalgorithmus berechnet das Verhaltnis zwischen der relativen Luminanz zweier Farben. Relative Luminanz ist ein Mass fur die Lichtmenge, die eine Farbe reflektiert, normalisiert so, dass absolutes Weiss 1,0 und absolutes Schwarz 0,0 ist.

Schritt 1: sRGB-Werte linearisieren

sRGB-Farbwerte sind Gamma-kodiert — sie sind nicht proportional zum physikalischen Licht. Bevor die Luminanz berechnet werden kann, muss jeder Kanal linearisiert werden.

Fur jeden Kanalwert (R, G oder B) als Dezimalzahl von 0 bis 1:

if channel <= 0.04045:
    linear = channel / 12.92
else:
    linear = ((channel + 0.055) / 1.055) ^ 2.4

Schritt 2: Relative Luminanz berechnen

Anwenden der CIE-Luminanzkoeffizienten, die die unterschiedliche Empfindlichkeit des Auges gegenuber rotem, grunem und blauem Licht widerspiegeln:

L = 0.2126 × R_linear + 0.7152 × G_linear + 0.0722 × B_linear

Die Gewichtung vermittelt etwas Wichtiges: Grun tragt 71,5 % zur wahrgenommenen Luminanz bei, Rot etwa 21,3 % und Blau lediglich 7,2 %. Ein lebhaftes Blau #0000FF hat eine relative Luminanz von nur 0,072, obwohl es bei oberflachlicher Betrachtung "hell" wirkt.

Schritt 3: Das Kontrastverhaltnis berechnen

Gegeben die relative Luminanz L1 der helleren Farbe und L2 der dunkleren Farbe:

Kontrastverhaltnis = (L1 + 0.05) / (L2 + 0.05)

Der Offset von 0,05 berucksichtigt das vom Bildschirm reflektierte Umgebungslicht (Schleierbeleuchtung). Er stellt sicher, dass das Verhaltnis nie durch null dividiert wird (reines Schwarz hat L=0, erhalt aber fur den Nenner eine Luminanz von 0,05).

Ein berechnetes Beispiel

Fur Weiss (#FFFFFF) auf dunklem Slate (#1E293B):

1. Weiss: L = 1,0 (alle Kanale vollstandig linear)
2. #1E293B in RGB: (30, 41, 59) → normalisiert: (0,118; 0,161; 0,231) → linearisiert und luminanzgewichtet: L ≈ 0,021
3. Kontrastverhaltnis: (1,0 + 0,05) / (0,021 + 0,05) = 1,05 / 0,071 ≈ 14,8:1

Ein Verhaltnis von 14,8:1 besteht alle WCAG-Ebenen problemlos. Prufen Sie beliebige Paare sofort mit dem Kontrast-Checker.

WCAG-2-Schwellenwerte

Bekannte Einschränkungen von WCAG 2

Die WCAG-2-Formel hat mehrere gut dokumentierte Schwachen, die sich auf die reale Nutzbarkeit auswirken:

1. Heller Text auf dunklen Hintergrunden wird ubermassig benachteiligt. Die Formel ist symmetrisch: Sie unterscheidet nicht, welche Farbe Vordergrund und welche Hintergrund ist. Das menschliche Sehvermogen ist aber nicht symmetrisch. Wir lesen dunklen Text auf hellem Hintergrund in der Regel leichter als hellen Text auf dunklem Hintergrund, besonders bei kleinen Schriftgrossen. WCAG 2 kann diese Fälle nicht unterscheiden.

2. Sehr dunkler oder sehr heller Text kann trotz hohem Luminanzkontrast nicht bestehen. Ein nahezu schwarzes #0A0A0A auf reinem Schwarz #000000 hat ein sehr niedriges Verhaltnis (ca. 1,1:1), was sinnvoll ist. WCAG 2 hat jedoch auch Schwierigkeiten mit bestimmten Mitteltoncombinationen, die das menschliche Auge problemlos lesen kann.

3. Schriftgrosse und -gewicht werden nur grob berucksichtigt. WCAG 2 kennt zwei Kategorien: "normaler" und "grosser" Text, wobei Fettschrift als Modifikator fur die 14-Punkt-Schwelle behandelt wird. In der Realitat ist Kontrastlesbarkeit eine kontinuierliche Funktion von Schriftgrosse, Gewicht und Renderingqualitat. Eine 700-Gewicht-16px-Schrift bei 4,5:1 liest sich ganz anders als eine 300-Gewicht-12px-Schrift bei 4,5:1.

4. Die Formel wurde fur Desktop-Monitore der fruhen 2000er Jahre entwickelt. Moderne OLED-Bildschirme, HDR-Displays und variierendeBeleuchtungsbedingungen werden nicht berucksichtigt.

APCA: Advanced Perceptual Contrast Algorithm

Der APCA wurde von Andrew Somers im Rahmen der Accessibility Guidelines Working Group als Kontrast-Engine fur WCAG 3.0 entwickelt. Er verfolgt einen grundlegend anderen Ansatz: Anstatt ein Luminanzverhaltnis zu messen, berechnet er eine Helligkeitsdifferenz, die auf die menschliche visuelle Wahrnehmung von Text kalibriert ist.

Kernunterschiede zu WCAG 2

Wie APCA funktioniert

Schritt 1: Linearisieren (ahnlich wie bei WCAG 2)

APCA verwendet eine leicht modifizierte Linearisierung mit dem Exponenten 2,4 (gleicher Exponent wie sRGB):

Y = (sRGB / 255) ^ 2.4  (vereinfacht)

Schritt 2: Luminanz berechnen

APCA verwendet dieselben CIE-Koeffizienten wie WCAG 2:

Y = 0.2126 × R + 0.7152 × G + 0.0722 × B

Schritt 3: APCA Soft Clamp anwenden

APCA wendet einen "Soft Clamp" auf niedrige Luminanzen an, um zu simulieren, wie sich unsere Augen bei schwachen Lichtverhältnissen anpassen:

if Y <= 0.022:
    Y_adjusted = Y + (0.022 - Y) ^ 1.414

Schritt 4: SAPC berechnen (Spatial Average Polarity Contrast)

APCA verwendet eine vorzeichenbehaftete Differenz, die zwischen dunklem Text auf hellem Hintergrund (positives Lc) und hellem Text auf dunklem Hintergrund (negatives Lc) unterscheidet:

if Y_background > Y_text:
    # Dunkler Text auf hellem Hintergrund (Polaritat: +)
    Lc = (Y_background ^ 0.56 - Y_text ^ 0.57) × 1.14
else:
    # Heller Text auf dunklem Hintergrund (Polaritat: −)
    Lc = (Y_background ^ 0.65 - Y_text ^ 0.62) × 1.14

Die verschiedenen Exponenten (0,56 bzw. 0,57 fur Text, 0,65 bzw. 0,62 fur Hintergrund) kodieren die empirische Asymmetrie zwischen dem Lesen von Dunkel-auf-Hell versus Hell-auf-Dunkel.

APCA-Lc-Werte interpretieren

Die Ausgabe ist eine vorzeichenbehaftete Zahl. Positives Lc bedeutet dunkler Text auf hellem Hintergrund; negatives Lc bedeutet heller Text auf dunklem Hintergrund. Fur die Nutzbarkeitsbeurteilung nimmt man den Absolutwert:

| |Lc|-Wert | Nutzbarkeit | |------------|-------------| | < 30 | Text ist praktisch unsichtbar | | 30–45 | Nur fur grossen, fetten Dekorationstext geeignet | | 45–60 | Minimum fur grossen Fliesstext (18pt+) | | 60–75 | Akzeptabel fur die meisten Fliesstexte (14pt+ bei normalem Gewicht) | | 75–90 | Guter Kontrast fur standardmaßigen Fliesstext (12pt regulär) | | 90+ | Ausgezeichneter Kontrast; geeignet fur sehr kleinen Text |

Ein berechnetes Beispiel

Weiss #FFFFFF Text auf Tailwinds blue-500 #3B82F6:

• WCAG-2-Verhaltnis: ca. 3,0:1 → Nicht bestanden AA fur normalen Text
• APCA Lc: ca. Lc 57 → Nur fur grossen Text akzeptabel (18pt+)

Beide Algorithmen sind sich einig, dass diese Kombination fur Fliesstext problematisch ist. APCA gibt jedoch mehr Nuancen: Bei Lc 57 ist sie fur 18-pt-Überschriften nutzbar, aber nicht fur 14-pt-Fliesstext, wahrend WCAG 2 ein binares Bestehen/Nicht-Bestehen liefert.

Nun zum Vergleich #1D4ED8 (blue-700) auf Weiss #FFFFFF:

• WCAG-2-Verhaltnis: ca. 7,2:1 → Bestanden AAA
• APCA Lc: ca. Lc 79 → Gut fur 12pt+ regulares Gewicht

Vergleich nebeneinander

Wo sie ubereinstimmen

Bei den meisten einfachen Fallen — dunkler Text auf Weiss oder schwarzer Text auf einem Pastellhintergrund — liefern WCAG 2 und APCA ubereinstimmende Urteile. Ein Paar mit einem WCAG-Verhaltnis von 4,5:1 entspricht typischerweise einem Lc-Wert zwischen 55 und 70, je nach Richtung.

Wo sie abweichen

Fall 1: Heller Text auf dunklen Hintergrunden

WCAG 2 behandelt Weiss-auf-Dunkel identisch mit Schwarz-auf-Hell bei gleichem Verhaltnis. APCA wendet fur jede Richtung unterschiedliche Exponenten an. Empirisch ist APCA bei Hell-auf-Dunkel bei hohen Lc-Werten nachgiebiger — eine Kombination, fur die WCAG 2 7:1 verlangen wurde, bewertet APCA möglicherweise mit Lc 80 und halt sie fur standardmaßigen Fliesstext akzeptabel.

Fall 2: Kleiner, leichtgewichtiger Text

Ein Verhaltnis von 4,5:1 in WCAG 2 soll allen normalen Text abdecken. Aber APCA wurde mit seiner Schrift-Nachschlagetabelle eine Schrift mit dunnem Gewicht (300) bei 12px am gleichen 4,5:1-Paar als Lc 90+ benotigend einstufen — was bedeutet, sie besteht APCAs Kriterien nicht, auch wenn sie WCAG 2 besteht.

Fall 3: Grosser dekorativer Text

Eine 48px-Fettschrift-Überschrift kann bei viel niedrigerem Kontrast gelesen werden als Fliesstext. WCAGs "grosser Text"-Schwellenwert von 3:1 ist ein stumpfes Werkzeug. APCAs gleitende Skala basierend auf Schriftgrosse und -gewicht ist praziser: Eine 700-Gewicht-32px-Überschrift könnte bei Lc 45 bestehen, wahrend eine 300-Gewicht-32px-Überschrift Lc 60 benotigen wurde.

Beispielpaare: WCAG 2 vs. APCA-Urteil

Die Urteile stimmen in den meisten praktischen Fallen uberein. Abweichungen treten an den Grenzen auf und sind am bedeutsamsten, wenn Schriftgrosse und -gewicht berucksichtigt werden.

Die Zukunft von Kontrast in WCAG 3.0

WCAG 3.0 (derzeit ein Arbeitsentwurf, noch nicht finalisiert) ersetzt das verhaltnisbasierte Kontrastmodell durch APCA-basierte Kriterien namens Bronze/Silber/Gold-Konformitatsebenen. Die wichtigsten Anderungen:

1. Schriftbewusste Anforderungen: Mindest-Lc-Werte hangen von Schriftgrosse und -gewicht ab. Es gibt keine einzelne Zahl; stattdessen ordnet eine Nachschlagetabelle (Grosse, Gewicht, Verwendung) einem minimalen Lc zu.
2. Gerichteter Kontrast: Hell-auf-Dunkel und Dunkel-auf-Hell werden unterschiedlich bewertet.
3. Nicht-Text-Elemente: Unterschiedliche Anforderungen fur Icons, UI-Komponenten und dekorative Grafiken.
4. Gleitende Skala: Das binare Bestehen/Nicht-Bestehen von WCAG 2 wird durch ein granulareres Konformitatsmodell ersetzt.

WCAG 3.0 befindet sich seit 2021 in der Entwurfsphase und wird voraussichtlich fruhestens 2026–2027 als finalisierte Empfehlung verabschiedet. Gesetzliche Anforderungen (ADA, EN 301 549, AODA) verweisen derzeit auf WCAG 2.1 AA oder 2.2 AA, die daher der verbindliche Standard fur Konformitätszwecke bleiben.

Welchen Standard man heute verwenden sollte

Fur Konformitat und rechtliche Absicherung: WCAG 2.1 AA verwenden.

Wer Konformitat mit Barrierefreiheitsgesetzen nachweisen, automatisierte Audits bestehen oder staatliche Beschaffungsanforderungen erfullen muss, sollte WCAG 2.1 (oder 2.2) AA verwenden. Jeder Prufer, jedes automatisierte Tool und jeder Rechtsanwalt versteht 4,5:1.

Fur bessere Designergebnisse: APCA als Erganizung verwenden.

APCA liefert handlungsorientiertere Informationen. Wenn eine Kombination WCAG 2 bei 4,5:1 besteht, aber eine dunne Schrift bei 12px verwendet, wird APCA sie als grenzwertig kennzeichnen. Verwenden Sie APCA, um Fälle zu erkennen, in denen WCAG 2 ein falsches Bestehen liefert.

Praktischer Workflow: 1. WCAG-2-Verhaltnis mit dem Kontrast-Checker auf Konformitat prufen 2. Bei grenzwertigen Kombinationen (4,5:1–5,5:1) Schriftgrosse und -gewicht berucksichtigen 3. APCA Lc als zusatzliches Signal verwenden — liegt es unter 60 fur Fliesstext, die Kombination ubdenken, auch wenn WCAG 2 besteht 4. Fur kreative Projekte und Design-Systeme ohne strenge Konformitatsanforderungen ist APCA das bessere Design-Tool

Wichtige Erkenntnisse

• WCAG 2 berechnet ein Luminanzverhaltnis unter Verwendung linearisierter sRGB-Werte und der CIE-Koeffizienten (0,2126 R + 0,7152 G + 0,0722 B). Das Verhaltnis muss ≥ 4,5:1 fur normalen Text (AA) und ≥ 7:1 fur erhohen Kontrast (AAA) betragen.
• WCAGs 2 Schwachen umfassen: symmetrische Behandlung von Dunkel-auf-Hell versus Hell-auf-Dunkel, grobe Schriftgrossenkategorien und Kalibrierung auf Display-Technologie der fruhen 2000er.
• APCA berechnet einen vorzeichenbehafteten Lc-Wert, der Polaritat unterscheidet (dunkler Text / heller Hintergrund versus heller Text / dunkler Hintergrund) und fur jede Richtung unterschiedliche Exponenten verwendet.
• APCAs Schrift-Nachschlagetabelle macht Kontrastanforderungen von Schriftgrosse und -gewicht abhangig — ein realistischeres Modell der tatsachlichen Textlesbarkeit.
• Die meisten realen Paare liefern ubereinstimmende Urteile zwischen beiden Algorithmen. Abweichungen sind bei kleinen Schriftgrossen, niedrigen Schriftgewichten und Hell-auf-Dunkel-Konfigurationen am bedeutsamsten.
• WCAG 3.0 wird APCA als Kontrast-Engine ubernehmen, befindet sich aber noch im Entwurfsstadium, und aktuelle gesetzliche Anforderungen verweisen weiterhin auf WCAG 2.1/2.2.
• Beste Praxis heute: WCAG 2 fur Konformitat, APCA als erganzendes Design-Qualitats-Prufwerkzeug verwenden. Den Kontrast-Checker verwenden, um WCAG-2-Verhaltnisse fur jede wesentliche Text/Hintergrund-Kombination im Design zu verifizieren.