So funktioniert es
- Wählen Sie die Farben oder tippen Sie sie ein – Hex, rgb(), hsl(), oklch() oder ein Farbname.
- Lesen Sie das Verhältnis und die vier WCAG-Ergebnisse ab und prüfen Sie die Live-Vorschau darunter.
- Klicken Sie bei einem Fehlschlag neben einem Vorschlag auf Diese Farbe verwenden.
Optionen erklärt
- AA
- Mindestens 4,5:1 für normalen Text und 3:1 für großen Text (18 pt / 24 px, oder 14 pt / etwa 18,7 px fett). Die meisten Vorschriften und Designsysteme verlangen AA.
- AAA
- Mindestens 7:1 für normalen Text und 4,5:1 für großen Text, für Inhalte, bei denen Lesbarkeit am wichtigsten ist.
- Vorgeschlagene Farbe
- Behält Farbton und Sättigung (Chroma) im Farbraum OKLCH bei und ändert nur die Helligkeit, um die nächstgelegene Farbe zu finden, die gerade noch besteht.
- Transparente Farben
- Eine Textfarbe mit Transparenz wird so gemessen, wie sie über dem Hintergrund erscheint.
So wird das Verhältnis berechnet
Jede Farbe wird von sRGB in lineares Licht und dann in die relative Leuchtdichte umgerechnet:
linear = c ÷ 12.92 if c ≤ 0.04045
linear = ((c + 0.055) ÷ 1.055) ^ 2.4 otherwise (c is 0–1)
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)Grün zählt am meisten, weil das Auge dafür am empfindlichsten ist. Einige Ergebnisse auf weißem Hintergrund:
| Textfarbe | Verhältnis | Ergebnis |
|---|---|---|
| #000000 | 21 : 1 | AAA |
| #0066cc | 5,57 : 1 | AA normaler Text, nicht AAA normaler Text |
| #767676 | 4,54 : 1 | AA normaler Text |
| #777777 | 4,48 : 1 | Erfüllt AA für normalen Text nicht, für großen Text schon |
Die WCAG-Definitionen finden Sie unter Understanding Success Criterion 1.4.3.
Häufig gestellte Fragen
Wie wird der Kontrast berechnet?
Mit der WCAG-2.x-Formel (hellere relative Leuchtdichte + 0,05) ÷ (dunklere relative Leuchtdichte + 0,05), was 1:1 bis 21:1 ergibt. Schwarz auf Weiß ergibt 21:1.
Warum wird #767676 so oft erwähnt?
Es ist das hellste Grau, das auf Weiß 4,5:1 erreicht (etwa 4,54:1), und daher eine gängige Untergrenze für sekundären Text.
Müssen auch Symbole und Rahmen geprüft werden?
Ja. Seit WCAG 2.1 brauchen Bedienelemente und Grafiken – Schaltflächen-Rahmen, Eingabefelder, Symbole – mindestens 3:1 gegenüber benachbarten Farben.
Datenschutz
Dieses Tool läuft vollständig in Ihrem Browser. Ihre Dateien und Texte werden auf Ihrem Gerät verarbeitet und nie auf unsere Server hochgeladen.