Farbkontrastverhältnis-(WCAG-)Rechner
Farbkontrastverhältnis-(WCAG-)Rechner
Geben Sie eine Vordergrundfarbe (Text) und eine Hintergrundfarbe als Hex-Codes ein. Dies berechnet ihr Kontrastverhältnis nach der WCAG-Formel und sagt Ihnen, welche Barrierefreiheits-Konformitätsstufen (AA, AAA) die Kombination erfüllt.
- Formel: Kontrastverhältnis = (L1 + 0.05) ÷ (L2 + 0.05), wobei L1 und L2 die relative Leuchtdichte der helleren und dunkleren Farbe gemäß der WCAG-2.x-Formel sind.
- WCAG-Schwellenwerte: AA erfordert 4.5:1 für normalen Text und 3:1 für großen Text (18pt+ oder 14pt+ fett); AAA erfordert 7:1 für normalen Text und 4.5:1 für großen Text.
- Läuft vollständig in Ihrem Browser: Ihre Farben werden lokal mit JavaScript berechnet und nie an einen Server gesendet.
Was zählt als "großer Text" für den niedrigeren AA/AAA-Schwellenwert?
18pt (24px) normale Stärke oder 14pt (~18.5px) fett oder größer — großer Text ist bei geringerem Kontrast leichter lesbar.
Meine Farben bestehen WCAG AA nicht — was sollte ich ändern?
Verdunkeln Sie die dunklere Farbe, hellen Sie die hellere auf, oder beides — schon kleine Helligkeitsanpassungen können das Kontrastverhältnis deutlich erhöhen.
Farbkontrastverhältnis-(WCAG-)Rechner
Geben Sie eine Vordergrundfarbe (Text) und eine Hintergrundfarbe als Hex-Codes ein. Dies berechnet ihr Kontrastverhältnis nach der WCAG-Formel und sagt Ihnen, welche Barrierefreiheits-Konformitätsstufen (AA, AAA) die Kombination erfüllt.
- Formel: Kontrastverhältnis = (L1 + 0.05) ÷ (L2 + 0.05), wobei L1 und L2 die relative Leuchtdichte der helleren und dunkleren Farbe gemäß der WCAG-2.x-Formel sind.
- WCAG-Schwellenwerte: AA erfordert 4.5:1 für normalen Text und 3:1 für großen Text (18pt+ oder 14pt+ fett); AAA erfordert 7:1 für normalen Text und 4.5:1 für großen Text.
- Läuft vollständig in Ihrem Browser: Ihre Farben werden lokal mit JavaScript berechnet und nie an einen Server gesendet.
Was zählt als "großer Text" für den niedrigeren AA/AAA-Schwellenwert?
18pt (24px) normale Stärke oder 14pt (~18.5px) fett oder größer — großer Text ist bei geringerem Kontrast leichter lesbar.
Meine Farben bestehen WCAG AA nicht — was sollte ich ändern?
Verdunkeln Sie die dunklere Farbe, hellen Sie die hellere auf, oder beides — schon kleine Helligkeitsanpassungen können das Kontrastverhältnis deutlich erhöhen.