Kontrast-Rechner

Das Kontrastverhältnis misst, wie gut Text vor dem Hintergrund lesbar ist, und zwar auf einer Helligkeitsskala von 1:1 (identische Farben) bis 21:1 (Schwarz auf Weiß). WCAG 2.x verwendet die relative Luminanz, die aus sRGB-Hex-Werten berechnet wird – nicht nur Farbton oder Sättigung. Zwei Blautöne mit der gleichen Helligkeit können sich unterschiedlich verhalten, wenn einer näher am Mittelgrau liegt, weshalb das Betrachten von Farbpaaren bei der Überprüfung der Barrierefreiheit fehlschlägt.

Stufe AA erfordert mindestens 4,5:1 für normalen Fließtext und 3:1 für großen Text (18 pt normal oder 14 pt fett und größer). Stufe AAA legt die Messlatte für normalen Text auf 7:1 und für großen Text auf 4,5:1 an. Nicht-Text-UI-Komponenten und grafische Objekte benötigen gemäß WCAG 2.1-Erfolgskriterium 1.4.11 ein Verhältnis von 3:1 zu benachbarten Farben. Dieser Rechner konzentriert sich auf Textpaare, es gilt jedoch die gleiche Verhältnisberechnung.

Geben Sie Hexwerte für den Vordergrund (Text) und den Hintergrund ein. Die Reihenfolge ändert das Verhältnis nicht – #333 auf #FFF entspricht mathematisch gesehen #FFF auf #333, obwohl für die Typografie nur eine Paarung verwendbar ist. Ungültiges Hex gibt einen Bindestrich zurück, bis beide Felder analysiert werden.

Funktioniertes Beispiel mit den Standardfeldern: Vordergrund #333333 auf Hintergrund #FFFFFF. Dunkelgrau auf Weiß ergibt etwa 12,63:1 – deutlich über AA und AAA für normalen Text. Die Zusammenfassung zeigt „Besteht den normalen WCAG AA-Text.“ Die Zeilen AA groß und AAA lauten alle „Pass“. Bei einem Beinahe-Unfall-Grau wie #767676 auf Weiß sinkt das Verhältnis auf etwa 4,54:1 – knapp über dem AA-Normalwert.

Markenpaletten enthalten häufig Akzentfarben, die bei Weiß versagen – korrigieren Sie diese mit dunkleren Farbtönen für Textrollen und behalten Sie hellere Akzente für große Überschriften oder Symbole über 18 pt bei. Verlassen Sie sich nicht allein auf die Schriftstärke, um einen geringen Kontrast zu vermeiden. Fettdruck hilft bei der Qualifizierung für die Schwellenwerte für „großen Text“, dünne Kapitälchen zählen jedoch weiterhin als normaler Text.

Zu den häufigsten Fehlern gehören die Überprüfung von Hex-Farbfeldern, während die echte Benutzeroberfläche halbtransparente Überlagerungen verwendet (Alpha verringert den effektiven Kontrast), das Ignorieren der Fokusringfarben und das Testen nur von reinem Schwarz #000 anstelle von abgeschwächten Grautönen im Textkörper. Ein weiterer Fehler besteht in der Annahme, dass die Statusfarben Grün/Rot standardmäßig lesbar sind – viele scheitern vor weißen oder dunkelgrauen Hintergründen.

Bei diesem Tool handelt es sich um eine mathematische Prüfung, nicht um eine Prüfung der Einhaltung gesetzlicher Vorschriften. Echte Überprüfungen der Barrierefreiheit umfassen Fokusreihenfolge, Tastaturpfade, Bewegung und nicht farbliche Statusanzeigen. Testen Sie immer mit Benutzern und unterstützender Technik, wenn Sie die Produktions-Benutzeroberfläche ausliefern.

Einschränkungen: Nur sRGB-Hex-Paare – kein Alpha-Compositing, Farbverläufe oder Text über Fotografie, es sei denn, Sie probieren eine flache Farbe aus. Subpixel-Antialiasing und farbige Textschatten können den wahrgenommenen Kontrast geringfügig vom berechneten Verhältnis abweichen.