Normaler Textbeispiel - Der schnelle braune Fuchs.
Großer Text (18pt+)
–
Kontrastverhältnis
| Standard | Niveau | Mindestverhältnis | Ergebnis |
|---|---|---|---|
| Normaler Text | WCAG AA | 4.5:1 | – |
| Großer Text (≥18pt / ≥14pt fett) | WCAG AA | 3:1 | – |
| Normaler Text | WCAG AAA | 7:1 | – |
| Großer Text (≥18pt / ≥14pt fett) | WCAG AAA | 4.5:1 | – |
So verwenden Sie den Kontrast-Checker
- Verwenden Sie die Farbwähler oder geben Sie HEX-Codes für Vordergrund- (Text) und Hintergrundfarbe ein.
- Kontrastverhältnis und WCAG-Konformität werden sofort aktualisiert.
- Verwenden Sie Tauschen, um Vorder- und Hintergrund zu vertauschen.
WCAG-Kontrastanforderungen
| Standard | Texttyp | Mindestverhältnis |
|---|---|---|
| WCAG AA | Normaler Text | 4,5:1 |
| WCAG AA | Großer Text (≥18pt oder ≥14pt fett) | 3:1 |
| WCAG AAA | Normaler Text | 7:1 |
| WCAG AAA | Großer Text | 4,5:1 |
WCAG 2.1 Level AA ist der gesetzliche Mindeststandard für die meisten Barrierefreiheitsvorschriften (EU, UK, USA).
Berechnung des Kontrastverhältnisses
Die relative Luminanz (L) wird nach Gamma-Linearisierung berechnet: L = 0,2126R + 0,7152G + 0,0722B. Das Verhältnis ist (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere Farbe ist.
Warum Kontrast wichtig ist
Weltweit haben ca. 300 Millionen Menschen Farbsehschwäche. Ausreichender Kontrast sichergestellt Lesbarkeit bei allen Bedingungen: Sehbeeinträchtigungen, helles Sonnenlicht, schlechte Bildschirmqualität.
Tipps für WCAG AA
- Dunkelblau (
#003087) oder sehr dunkles Grau (#333333) auf Weiß erfüllen 4,5:1 problemlos - Wenn Ihre Markenfarbe hell ist, verwenden Sie sie als Hintergrund mit dunklem Text
- Verwenden Sie Farbe nie allein zur Informationsübermittlung, ergänzen Sie Icons oder Muster