WCAG-Kontrastverhältnis-Prüfer

Dieser WCAG-Kontrastverhältnis-Prüfer nimmt zwei Hex-Farben — Vordergrund und Hintergrund — entgegen und liefert das offizielle Kontrastverhältnis nach den Web Content Accessibility Guidelines, zusammen mit klaren AA- und AAA-Bestehen-Kennzeichen für normalen und großen Text. Designer, Entwickler und Prüfer nutzen dieses Verhältnis, um zu entscheiden, ob Fließtext, Schaltflächen, Beschriftungen und Bedienelemente für Menschen mit eingeschränktem Sehvermögen oder Farbsehschwächen lesbar bleiben. Die Engine folgt der WCAG-2.x-Formel für relative Leuchtdichte: Jeder Hex-Kanal wird aus sRGB linearisiert, die Leuchtdichte wird mit den Standardkoeffizienten 0,2126, 0,7152 und 0,0722 gewichtet, und das Kontrastverhältnis ist (L heller plus 0,05) geteilt durch (L dunkler plus 0,05). Die Schwellenwerte sind ungerundet: Normaler Text benötigt mindestens 4,5 für AA und 7 für AAA; großer Text benötigt mindestens 3 für AA und 4,5 für AAA. Die Ergebnisse sind deterministisch, ohne Netzwerkaufrufe, Stichproben oder datumsabhängige Abkürzungen.

Was das WCAG-Kontrastverhältnis misst und was die Antwort enthält

Das Kontrastverhältnis ist die eine Zahl, mit der WCAG beschreibt, wie stark sich Text von seinem Hintergrund abhebt, unter Berücksichtigung der menschlichen Leuchtdichtewahrnehmung statt eines einfachen RGB-Abstands. Ein Paar reines Schwarz auf reinem Weiß erreicht einundzwanzig zu eins, das theoretische Maximum für deckende sRGB-Farben, während identische Farben eins zu eins ergeben und jedes Textkriterium nicht bestehen.

Großer Text bedeutet im Sinne der WCAG mindestens 18 Punkt regulär oder das Äquivalent von 14 Punkt fett; das Tool misst die Schriftgröße nicht selbst — es wendet lediglich die Schwellenwerte für großen Text an, damit Sie die Matrix Ihrer Typografie-Skala zuordnen können. Es gibt kein Crawling von Seiten, kein CSS-Parsing, keine Deckkraft-Mischung und keine Verlaufs-Abtastung: Sie geben zwei explizite Hex-Farben an und erhalten eine reproduzierbare Matrix, geeignet für Design-Token-CI, Figma-Plugin-Backends und Ticketkommentare, die ein numerisches Verhältnis statt einer Screenshot-Meinung anführen müssen.

Wie Hex-Eingaben gelesen werden und wie AA und AAA reproduzierbar bleiben

Beide Werte müssen Hex-Werte sein: mit optionalem führendem Rautezeichen, entweder drei Ziffern, die auf sechs erweitert werden (#abc wird zu #aabbcc), oder sechs volle Ziffern, ohne Berücksichtigung der Groß-/Kleinschreibung. Alpha-Suffixe, rgb()-Funktionen, hsl()-Funktionen, benannte CSS-Farben und blanke Ganzzahlen werden mit einer Meldung abgelehnt, die das Feld benennt und zeigt, was empfangen wurde, damit ein fehlerhaftes Token nie zu einem stillen Fail-Open wird. Jede Farbe ist auf zweiunddreißig Zeichen begrenzt, um die Validierung günstig zu halten und Einfügeunfälle zu blockieren.

Nach dem Parsen werden die Kanäle mit der stückweisen WCAG-sRGB-Kurve linearisiert — dividieren durch 12,92 unterhalb der Schwelle 0,04045, andernfalls ((c plus 0,055) über 1,055) hoch 2,4 — und anschließend zur relativen Leuchtdichte kombiniert. Das Verhältnis verwendet die hellere Leuchtdichte im Zähler; die Bestehen-Kennzeichen vergleichen das ungerundete Gleitkomma-Verhältnis mit 4,5, 7,0 und 3,0, damit eine angezeigte 4,50 keine tatsächliche 4,499 verbirgt, die AA nicht bestehen sollte.

Wo Kontrastprüfungen in Design-Systemen, UI-Reviews und CI zum Einsatz kommen

Produktteams stoßen auf Kontrastanforderungen, wenn eine Markenpalette auf einer Marketing-Folie elegant wirkt, aber bei Fließtext auf einer weißen Karte scheitert, wenn ein Dark-Mode-Theme aus hellen Tokens generiert wird, oder wenn Rechts- und Compliance-Verantwortliche vor dem Launch einen dokumentierten AA-Nachweis verlangen. Ingenieure verdrahten denselben Vertrag mit Pull-Request-Prüfungen, die eine Token-Änderung blockieren, wenn AA für normalen Text bei primären Fließtextfarben unter 4,5 fällt, oder protokollieren den AAA-Status für großen Text bei Hero-Überschriften, die absichtlich näher an der Oberfläche liegen.

QA- und Barrierefreiheits-Spezialisten nutzen das numerische Verhältnis in Fehlerberichten, damit Entwickler das genaue Paar korrigieren können, statt anhand eines Screenshots zu raten. Content- und Marketingteams prüfen, ob Kampagnen-Hex-Codes auf hellen oder dunklen Website-Hintergründen weiterhin bestehen. Kombinieren Sie ihn mit Farbkonvertierungs-Tools, wenn Sie RGB- oder HSL-Zwischenwerte benötigen, sowie mit vollständigen Barrierefreiheits-Audits, wenn Sie lebendes Markup statt zwei expliziter Hex-Werte scannen müssen.