Zu wenig Kontrast zwischen Text und Hintergrund ist eines der häufigsten Probleme bei der Barrierefreiheit im Web. Der QodeCat Kontrast-Checker berechnet das exakte WCAG-2.1-Kontrastverhältnis zweier Farben und zeigt dir, welche Erfolgskriterien sie erfüllen.
AA normaler Text: mindestens 4,5:1.
AA großer Text (24px oder 18,66px fett): mindestens 3:1.
UI-Komponenten und Grafiken (Icons, Rahmen von Eingabefeldern, Fokusringe): mindestens 3:1.
Wie wird das Kontrastverhältnis berechnet?
Die offizielle Formel
Jede Farbe wird mit der von WCAG definierten sRGB-Kurve in ihre relative Leuchtdichte umgerechnet. Das Verhältnis ist (hellere Farbe + 0,05) geteilt durch (dunklere Farbe + 0,05) und liegt zwischen 1:1 (kein Kontrast) und 21:1 (Schwarz auf Weiß). Es wird nie aufgerundet, 4,48:1 besteht AA also nicht.
Durchgefallene Farben schnell korrigieren
Besteht ein Farbpaar AA nicht, sucht das Tool die nächste hellere oder dunklere Textfarbe, die besteht, und behält dabei Farbton und Sättigung bei. Übernimm sie mit einem Klick und passe sie danach nach Belieben an.
Häufig gestellte Fragen
F. Welche Farbformate kann ich eingeben?
HEX-Codes wie #333 oder #1a2b3c und rgb()-Werte wie rgb(26, 43, 60). Du kannst auch den Farbwähler neben jedem Feld benutzen.
F. Was zählt als großer Text?
WCAG definiert großen Text als mindestens 18pt (24px) normal oder 14pt (etwa 18,66px) fett. Großer Text braucht für AA nur ein Verhältnis von 3:1.
F. Reicht AA aus?
AA ist die Stufe, die die meisten Gesetze und Richtlinien verlangen. AAA ist strenger und wird für lange Lesetexte und Menschen mit Sehschwäche empfohlen.