Farbe und Design
Textkontrast prüfen
Zwei deckende HEX-Farben mit den WCAG-Textkontrast-Schwellen vergleichen.
Prüft nur Textkontrast, nicht die gesamte Barrierefreiheit. Nur deckende Vollfarben; keine Transparenz, Verläufe oder Bilder.
Ihre Antwort erscheint hier.
Hilfe und Methode
WCAG 2.2 nutzt die relative sRGB-Leuchtdichte: (heller + 0.05) / (dunkler + 0.05). AA verlangt 4.5:1 für normalen und 3:1 für großen Text; AAA 7:1 bzw. 4.5:1. Großer Text beginnt bei 18 pt (24 CSS-px) oder 14 pt fett (etwa 18.67 CSS-px). Die Bewertung nutzt den ungerundeten Quotienten, nicht den gerundeten Anzeigewert.
WCAG 2.2 · 1.4.3WCAG 2.2 · 1.4.6Methoden und VerlässlichkeitDurchgerechnetes Beispiel
Ein Beispiel zum Ausprobieren oder Anpassen an deine Werte.
- Textfarbe (HEX)
- #000000
- Hintergrundfarbe (HEX)
- #ffffff
Ergebnis
Kontrastverhältnis: 21:1; AA · normaler Text: Erfüllt; AA · großer Text: Erfüllt; AAA · normaler Text: Erfüllt; AAA · großer Text: Erfüllt