Stellen Sie sicher, dass alle Ihren Text lesen können
Hellgrauer Text auf Weiß, weißer Text auf einem pastellfarbenen Button oder blaue Links auf dunklem Hintergrund mögen in einer Design-Datei elegant aussehen, sind für echte Nutzer aber oft unlesbar. Dieser Kontrast-Checker misst das Kontrastverhältnis zwischen beliebigen Text- und Hintergrundfarben. Er zeigt sofort, ob die Web Content Accessibility Guidelines (WCAG) der Stufen AA und AAA erfüllt werden – und falls nicht, schlägt er die ähnlichste Farbe vor, die den Anforderungen entspricht.
Funktionen
- Kontrastverhältnis von 1:1 bis 21:1.
- WCAG 2 AA und AAA Ergebnisse für normalen Text, großen Text und UI-Komponenten.
- Beliebiges Farbformat: HEX, RGB, HSL oder CSS-Farbnamen.
- Live-Vorschau mit Überschrift, Fließtext und kleinem Text.
- Barrierefreie Farbvorschläge, die Ihren Farbton beibehalten.
- Wechsel-Button zur Prüfung von Hell-auf-Dunkel-Varianten.
WCAG-Anforderungen auf einen Blick
| Inhalt | AA | AAA |
|---|---|---|
| Normaler Text | 4.5:1 | 7:1 |
| Großer Text (≥ 24 px oder ≥ 19 px fett) | 3:1 | 4.5:1 |
| UI-Komponenten und Grafiken | 3:1 | — |
| Logos und dekorativer Text | Keine Anforderung | Keine Anforderung |
Häufige Kombinationen
| Text | Hintergrund | Verhältnis | AA normaler Text |
|---|---|---|---|
| #000000 | #FFFFFF | 21:1 | Bestanden |
| #767676 | #FFFFFF | 4.54:1 | Bestanden (hellstes zulässiges Grau) |
| #999999 | #FFFFFF | 2.85:1 | Nicht bestanden |
| #FFFFFF | #0EA5E9 | 2.77:1 | Nicht bestanden |
| #FFFFFF | #0369A1 | 5.93:1 | Bestanden |
Ähnliche Tools
Konvertiere Farben zwischen Formaten mit dem Farbkonverter, erstelle eine komplette Palette mit dem Farbpaletten-Generator oder bestimme exakte Farben aus einem Screenshot mit dem Farbwähler für Bilder.