WCAG 2.2 Farbkontrast: AA treffen ohne Raterei

Die meisten Kontrastfehler sind keine Randfälle. Es ist grauer Platzhaltertext auf Weiss: #999 auf #fff, was 2,85:1 ergibt bei einer Anforderung von 4,5, nach Augenmass abgesegnet und ausgeliefert.

Die Behebung ist meist trivial, sobald man die Zielzahl kennt. Hier ist die Zahl, woher sie kommt, und die zwei Stellen, an denen die offizielle Mathematik danebenliegt.

Was ein Kontrastverhältnis tatsächlich misst

Ein Kontrastverhältnis ist eine einzelne Zahl, die beschreibt, wie unterschiedlich zwei Farben in der Helligkeit sind, nicht im Farbton. Es geht von 1:1 (identisch, unsichtbar) bis zu 21:1 (reines Schwarz auf reinem Weiß). Alles, was Sie entwerfen, landet irgendwo auf dieser Linie.

Das Schlüsselwort ist Helligkeit, speziell relative Luminanz. Zwei Farben können Ihrem Auge völlig anders vorkommen - ein gesättigtes Rot und ein gesättigtes Blau - und trotzdem fast auf derselben Luminanz sitzen, was geringen Kontrast und unlesbaren Text bedeutet. Der Farbton rettet Sie nicht. Luminanz ist das, um was sich die Formel kümmert, und es ist das, was das Auge verwendet, um feine Details wie Buchstaben aufzulösen.

Relative Luminanz ist eine gewichtete Summe der roten, grünen und blauen Kanäle, nachdem sie von den gamma-kodierten sRGB-Werten, die Ihr CSS verwendet, in lineares Licht umgewandelt wurden. Grün wird stark gewichtet (etwa 0,72), weil das menschliche Auge am empfindlichsten dafür ist; Blau zählt kaum (0,07). Deshalb ist reiner blauer Text auf Schwarz so schwer zu lesen, obwohl Blau sich "hell" anfühlt - es trägt fast keine Luminanz.

Die WCAG 2.2-Schwellenwerte

Hier ist die Tabelle, die es wert ist, als Lesezeichen gespeichert zu werden. Das sind die Erfolgskriterien aus WCAG 2.2¹, die die Kontrastanforderungen von 2.1 unverändert gelassen haben.

Element	AA	AAA	SC
Normaler Text	4,5:1	7:1	1.4.3 / 1.4.6
Großer Text	3:1	4,5:1	1.4.3 / 1.4.6
UI-Komponenten und grafische Objekte	3:1	n/a	1.4.11
Fokus-Indikatoren	3:1	n/a	1.4.11
Logos, deaktivierte Steuerelemente, dekorative Elemente	ausgenommen	ausgenommen	-

Einige Dinge, die Menschen falsch lesen:

• AAA ist kein "besseres AA, das man immer tun sollte". Für den Haupttext ist 7:1 mit einem Marken-Farbpalette wirklich schwer zu treffen, und es ist nirgendwo die rechtliche Grundlinie, wo ich ausgeliefert habe. AA ist das Ziel. Streben Sie nach AAA bei Langlese-Oberflächen, wenn Sie können.
• Die 3:1-Zeile für UI-Komponenten ist ein separates Kriterium (1.4.11), und viele Teams vergessen, dass es existiert. Mehr dazu unten.
• "Großer Text" hat eine genaue Definition, und sie ist nicht "sieht groß aus."

Was als großer Text gilt

Großer Text ist 18 Punkt oder größer, oder 14 Punkt fett oder größer. In CSS-Pixeln kommt das heraus auf:

• 24px und mehr für Regular-Gewicht
• 18,66px und mehr für Fett (700)

Diese 18,66 ist die echte Zahl, nicht 18 oder 19. Sie kommt von 14pt bei der 96dpi-Annahme, die Browser verwenden (14 * 96 / 72 = 18,66). Ist eine fette Überschrift 18px, ist sie kein grosser Text und braucht 4,5:1. Zwei Drittel eines Pixels entscheiden, welche Schwelle gilt, und genau so etwas findet ein Audit und eine Designerin nicht.

Nicht-Text-Kontrast: Die Regel, die jeder vergisst

SC 1.4.11 ist diejenige, die Teams aus dem Tritt bringt. Sie besagt, dass jedes nicht-Text-Element, das man wahrnehmen muss, um die Schnittstelle zu nutzen, 3:1 gegen seine benachbarten Farben erreichen muss. Das umfasst:

• Den Rahmen oder die Füllfarbe eines Buttons, Inputs oder Kontrollkästchens - was auch immer seine Grenze visuell definiert
• Icons, die Bedeutung tragen (ein Papierkorb-Icon, ein Status-Punkt, eine Diagrammlinie)
• Fokus-Indikatoren, der Ring oder Umriss, der die Tastaturposition zeigt
• Toggle- und Schieberegler-Zustände

Das klassische Versagen ist ein Sucheingabefeld mit einem #e0e0e0-Rahmen von einem Pixel auf weisser Seite. Dieser Rahmen ergibt 1,32:1, weniger als die Hälfte des Geforderten. Eine sehbehinderte Person erkennt nicht, wo das Feld ist. Der Wechsel auf #767676 bringt 4,54:1, bequem über 3:1, und das Formular hat plötzlich Struktur. Nebenbei ist #767676 das dunkelste Grau, das auf Weiss noch 4,5:1 besteht, eine nützliche Zahl zum Merken.

Fokus-Ringe sind das andere große Problem. Ein schwacher Umriss, der Ihrem Markenblau auf einem blauen Button entspricht, kann unter 3:1 fallen und für Tastaturbenutzer effektiv verschwinden. Geben Sie dem Fokus-Indikator sein eigenes Kontrastbudget, getrennt vom Ruhezustand des Buttons.

Wie das Verhältnis berechnet wird

Die Mathematik ist kurz. Sie nehmen jede Farbe, konvertieren sRGB in lineares Licht, berechnen Luminanz und setzen beide Luminanzwerte in die Verhältnisformel ein. Hier in JS:

// Kanal: 0-255 sRGB-Wert -> lineares Licht 0-1
function linearize(c) {
  c = c / 255;
  return c <= 0.04045
    ? c / 12.92
    : Math.pow((c + 0.055) / 1.055, 2.4);
}

function relativeLuminance({ r, g, b }) {
  const R = linearize(r);
  const G = linearize(g);
  const B = linearize(b);
  // Rec. 709 / sRGB-Luminanzgewichte
  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
}

function contrastRatio(fg, bg) {
  const L1 = relativeLuminance(fg);
  const L2 = relativeLuminance(bg);
  const lighter = Math.max(L1, L2);
  const darker = Math.min(L1, L2);
  return (lighter + 0.05) / (darker + 0.05);
}

Zwei Details, die viel vom Verhalten der Formel erklären:

Der 2.4-Exponent und die 0.04045-Aufteilung sind die sRGB-Übertragungsfunktion. Unterhalb dieser Schwelle ist die Kurve linear (das dunkle Ende), darüber ist es eine Potenzkurve mit Gamma 2.4. Deshalb schwingen kleine numerische Änderungen in dunklen Farben die Luminanz mehr als die gleiche Änderung in hellen Farben.

Der 0.05-Offset, der zu beiden Luminanzwerten hinzugefügt wird, ist der Glanzterm. Er modelliert Umgebungslicht, das von einem Bildschirm abprallt, sodass reines Schwarz nie eine Null-Luminanz erreicht. Ohne ihn würde Schwarz-auf-irgendwas ein viel höheres Verhältnis berechnen. Diese einzelne Konstante ist auch der Ort, an dem die meiste bekannte Ungenauigkeit der Formel lebt.

Warum die Formel wirklich fehlerhaft ist

Die 2.x-Kontrastformel stammt aus den späten 1990ern und war nie dazu gedacht, die Wahrnehmung über den vollen Bereich der Bildschirme zu modellieren, die wir jetzt verwenden. Zwei Versagensmodi tauchen ständig auf.

Sie ist symmetrisch, und Lesen ist es nicht. Tauschen Sie Vorder- und Hintergrund, und die Formel liefert dieselbe Zahl, denn sie vergleicht nur zwei Luminanzen. So funktioniert Wahrnehmung nicht.

#767676 auf Weiss ergibt 4,54:1. #8a8a8a auf #222222 ergibt 4,61:1, nach der Formel also minimal besser, und ist sichtbar anstrengender. Der 0,05-Glanzoffset dominiert das dunkle Ende, sodass zwei dunkle Farben nahe beieinander trotzdem ein bestandenes Verhältnis melden.

Es unterschätzt einige Mitteltöne. Bestimmte Grau-auf-Grau- und gesättigte Mittelluminanz-Paare bestehen die Formel nicht, während sie vollkommen lesbar sind, was Designer zu härteren Paletten drängt als notwendig. Die Formel behandelt Kontrast als symmetrisch (Vorder- und Hintergrundfarbe tauschen gibt die gleiche Zahl), aber die menschliche Wahrnehmung von Text ist nicht symmetrisch - dunkler Text auf hellem Hintergrund liest sich anders als das Inverse beim gleichen berechneten Verhältnis.

Also ist die Zahl eine nützliche Leitplanke, keine Grundwahrheit. 4,5:1 zu bestehen ist ein gutes Zeichen. Es ist keine Garantie, und ein knapper Durchgang im Dunkelmodus verdient einen echten menschlichen Blick.

APCA und die WCAG 3-Zukunft

Der Ersatz ist APCA, der Accessible Perceptual Contrast Algorithm, der die Kandidaten-Kontrastmethode für WCAG 3 ist (noch ein Arbeitsentwurf, Jahre davon entfernt, ein Standard zu sein). Er ist in Weisen unterschiedlich aufgebaut, die wichtig sind:

• Er ist wahrnehmungsbasiert und basiert auf Helligkeitsunterschied, abgestimmt auf tatsächliche Lesbarkeitsstudien statt auf ein Luminanzverhältnis der 1990er.
• Er ist asymmetrisch. Polarität ist wichtig, sodass Dunkel-auf-Hell und Hell-auf-Dunkel auf ihre eigenen Bedingungen bewertet werden. Das behebt direkt die Dunkelmodusunterschätzung.
• Er berücksichtigt Schriftgröße und -gewicht als Teil der Punktzahl, anstatt der stumpfen zweiteiligen "normal vs. groß"-Aufteilung. Dünner 14px-Text benötigt mehr Kontrast als fetter 24px, und APCA sagt das.
• Seine Ausgabe ist ein Lc-Wert (Helligkeitskontrast) bis plus oder minus 106, kein Verhältnis, und das Vorzeichen trägt die Polarität: ein negatives Lc bedeutet hellen Text auf dunklem Grund². Dieses Vorzeichen ist die Asymmetrie, ausgedrückt in der Zahl selbst.
• Seine veröffentlichten Stufen laufen andersherum, als sie meist zitiert werden. Fliesstext ist der anspruchsvolle Fall, nicht der einfache: Lc 90 ist die bevorzugte Stufe für Fliesstext mit 14px regular, Lc 75 das Minimum für Fliesstext mit 18px, und Lc 60 gilt für Nicht-Fliesstext mit 24px regular oder 16px fett². Höheres Lc heisst mehr geforderter Kontrast, und der kleinste, meistgelesene Text braucht am meisten.

APCA ist noch kein Compliance-Ziel, denn Audits, Verträge und Klagen verweisen auf WCAG 2.2 AA. Als Entscheidungshilfe taugt es gut: Wenn ein Paar 4,5:1 gerade so kratzt und APCA es als schwach bewertet, beschreibt die APCA-Ablesung, was eine Leserin erleben wird.

Ein Arbeitsablauf, der kein Raten beinhaltet

Ein Ablauf, der Raterei vermeidet.

1. Wählen Sie zuerst die Farben für die Absicht - Marke, Hierarchie, Zustand - ohne sich um Kontrast zu kümmern. Verwenden Sie ein Tool wie den Farbwähler , um genaue Werte aus einem Mockup oder einem vorhandenen Bildschirm zu erfassen, anstatt aus dem Gedächtnis zu nähern.
2. Bauen Sie den gesamten Satz als System auf, nicht paarweise. Der Farbpaletten-Generator ist nützlich, um eine Rampe aus Tönen und Schatten anzulegen, damit Sie legale Optionen bei jedem Schritt haben, bevor Sie anfangen, Text zu platzieren.
3. Prüfen Sie jedes Text-auf-Fläche-Paar gegen die obige Tabelle. Die meisten Checker melden das Verhältnis direkt.
4. Wenn ein Paar versagt, passen Sie die Helligkeit an, nicht den Farbton. Das ist die nützlichste Einzelregel. Die Markenidentität lebt hauptsächlich im Farbton und in der Sättigung; Kontrast lebt in der Helligkeit. Konvertieren Sie die Farbe in HSL mit dem Farbkonverter , dann senken oder erhöhen Sie den L-Wert, bis das Verhältnis besteht. Die Farbe liest sich immer noch als "Ihr Blau", nur dunkler oder heller.
5. Verifizieren Sie das Ergebnis so, wie Benutzer es sehen, einschließlich eines Farbenblindheits-Simulator -Durchgangs.

Hover-, Deaktiviert- und Fokus-Zustände

Der Ruhezustand ist der einfache Teil. Die Zustände sind der Ort, an dem Dinge gleiten.

• Hover: Lassen Sie einen Hover-Hintergrund Ihren Text nicht unter die Schwelle fallen. Wenn Ihr Button-Text im Ruhezustand besteht und der Hover-Zustand die Füllfarbe abdunkelt oder aufhellt, prüfen Sie den Text erneut bei der Hover-Farbe. Das sind verschiedene Paare.
• Deaktiviert: Deaktivierte Steuerelemente sind ausdrücklich von den Kontrastregeln ausgenommen, sodass Sie sie unter 4,5:1 ausgrauen können. Aber ausgenommen bedeutet nicht "unsichtbar machen". Halten Sie den deaktivierten Zustand gut genug erkennbar, dass Benutzer wissen, dass das Steuerelement existiert; lassen Sie ihn aber nicht das einzige Signal für den deaktivierten Zustand sein, kombinieren Sie ihn mit einem Cursor- oder Label-Hinweis.
• Fokus: Geben Sie dem Fokus-Indikator sein eigenes 3:1 gegen die Seite, und stellen Sie sicher, dass er nicht die gleiche Farbe wie ein benachbartes aktives Element hat. Ein zweifarbiger Umriss (ein heller innerer Ring plus ein dunkler äußerer Ring) ist ein billiger Trick, der 3:1 gegenüber sowohl hellen als auch dunklen Umgebungen besteht.

/* Fokus-Ring, der 3:1 auf den meisten Hintergründen hält */
:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #ffffff; /* heller Hof trennt den Ring vom Element */
}

Der Farbenblindheits-Aspekt

Kontrastverhältnis und Farbenblindheit sind verwandte, aber nicht dieselbe Problematik. Die Verhältnisformel nähert das für Sie bereits an - weil sie auf Luminanz basiert, ist ein Paar, das 4,5:1 besteht, normalerweise für alle Farbsehtypen unterscheidbar. Luminanz ist der Kanal, den die meisten Farbsehdefizite erhalten.

Die Falle ist, Farbe als den einzigen Träger von Informationen zu verwenden. Roter Fehlertext und grüner Erfolgstext können beide den Kontrast gegen Weiß bestehen und für jemanden mit Deuteranopie ununterscheidbar voneinander sein. Die Lösung ist nicht mehr Kontrast, es ist redundante Kodierung: ein Icon, ein Label, eine Form oder ein Positionsunterschied neben der Farbe. Führen Sie Ihre Fehler- und Statuszustände durch einen Simulator und bestätigen Sie, dass sie immer noch verschiedene Geschichten erzählen, wenn der Farbton herausgenommen wird.

Eine Rot-Grün-Farbsehschwäche betrifft rund 8 Prozent der Männer und etwa 0,4 Prozent der Frauen europäischer Herkunft, wobei die Häufigkeit je nach Abstammung deutlich schwankt³. Bei einem Publikum nennenswerter Grösse ist das kein Fall, den man verschieben kann.

Zusammenfassung

Kontrast ist ein Luminanzvergleich, kein Farbvergleich, und die Ziele sind festgelegt: 4,5:1 für normalen Text, 3:1 für großen Text und alle bedeutungsvollen Nicht-Text-Elemente unter SC 1.4.11, 7:1 wenn Sie AAA anstreben. Großer Text bedeutet 24px Regular oder 18,66px Fett, und diese Ein-Pixel-Grenze ist real. Die WCAG 2.x-Formel linearisiert sRGB, gewichtet die Kanäle in Richtung Grün und fügt einen 0.05-Glanzoffset hinzu - und diese alternde Mathematik überschätzt den Dunkelmoduskontrast und stolpert über einige Mitteltöne, was genau das ist, was APCA und der WCAG 3-Entwurf zu beheben gebaut sind. Bis dahin bauen Sie die Palette als System auf, beheben Sie Versager durch Änderung der Helligkeit statt des Farbtons, geben Sie Fokus-Ringen ihr eigenes Kontrastbudget und lassen Sie niemals Farbe das einzige sein, was Bedeutung trägt.