Farbkontrastprüfer
Geben Sie Vordergrund- und Hintergrundfarben ein, und der Prüfer gibt das WCAG-Kontrastverhältnis (1:1 bis 21:1) sowie die Bestehen/Nicht-Bestehen-Urteile gegen die WCAG 2.1 AA- und AAA-Schwellenwerte für normalen Text, großen Text und Nicht-Text-Elemente zurück. Im Hintergrund verwendet es die WCAG-Luminanzformel, einfache Mathematik, aber entscheidend für die Barrierefreiheit. Beheben Sie Mängel, indem Sie die Helligkeit anpassen, bis das Verhältnis den benötigten Schwellenwert erreicht.
Wie das Kontrastverhältnis berechnet wird
-
1
Geben Sie zwei Farben ein
Hex mit 3 oder 6 Ziffern für beide Farben. Für jede Farbe ist ein Farbwähler verfügbar.
-
2
Relative Luminanz für jede Farbe berechnet
L = 0.2126·R + 0.7152·G + 0.0722·B, wobei jeder Kanal aus sRGB linearisiert wird.
-
3
Kontrastverhältnis
(L_heller + 0.05) / (L_dunkler + 0.05). Verhältnisse zwischen 1:1 und 21:1.
-
4
Bestehen/Nicht-Bestehen-Abzeichen
AA (4.5:1 für normal, 3:1 für groß/UI), AAA (7:1 für normal, 4.5:1 für groß). Großer Text = ≥18pt regulär oder ≥14pt fett.
WCAG-Kontrastschwellen
| Inhaltstyp | AA-Schwelle | AAA-Schwelle |
|---|---|---|
| Normaler Text | 4.5:1 | 7:1 |
| Großer Text (≥18pt regulär oder ≥14pt fett) | 3:1 | 4.5:1 |
| Nicht-Text (UI-Komponenten, Fokusringe) | 3:1 | - |
| Gelegentlicher Text (dekorativ, deaktiviert, Logos) | befreit | befreit |
“Großer Text” bedeutet 18pt+ reguläre Schriftart (~24px in CSS) oder 14pt+ fett (~19px fett).
Beispielkontraste
| Paar | Verhältnis | AA normal | AA groß | AAA normal |
|---|---|---|---|---|
| Schwarz auf Weiß | 21:1 | Bestehen | Bestehen | Bestehen |
| #333 auf Weiß | 12.6:1 | Bestehen | Bestehen | Bestehen |
| #666 auf Weiß | 5.7:1 | Bestehen | Bestehen | Nicht bestehen |
| #888 auf Weiß | 3.5:1 | Nicht bestehen | Bestehen | Nicht bestehen |
| #AAA auf Weiß | 2.3:1 | Nicht bestehen | Nicht bestehen | Nicht bestehen |
| Weiß auf #1976D2 (Material Blau 700) | 4.6:1 | Nicht bestehen | Bestehen | Nicht bestehen |
| Weiß auf #2196F3 (Material Blau 500) | 3.1:1 | Nicht bestehen (normal) | Bestehen | Nicht bestehen |
Häufige Barrierefreiheitsfallen
- Grauer Text auf Weiß bei #999 oder heller, besteht nicht AA. Verwenden Sie #767676 oder dunkler für Fließtext auf Weiß.
- Blauer Link auf Grau: besteht oft nicht, da beide Farben mittlere Luminanz haben.
- Weißer Text auf Markenfarbe: besteht bei dunkleren Schattierungen (≥ 4.5:1), besteht nicht bei mitteltönigen Markenfarben. Verwenden Sie größeren Text oder dunklere Markenfarbe.
- Platzhaltertext hat oft einen niedrigen Kontrast für “Hinweise”, WCAG gilt weiterhin, wenn Benutzer den Platzhalter lesen müssen.
- Deaktivierter Zustand: WCAG 2.2 erfordert 3:1 für deaktivierten Text gegen den Hintergrund der Steuerung, es sei denn, der Zustand selbst wird auf andere Weise kommuniziert.
Was WCAG Ihnen nicht sagt
- WCAG 2.x verwendet eine Formel aus dem Jahr 1988. Der moderne APCA (Advanced Perceptual Contrast Algorithm) spiegelt die wahrgenommene Lesbarkeit besser wider, ist aber noch nicht die rechtliche Grundlage. Erhöhen Sie die Zahlen leicht über die WCAG-Minima, um APCA und Grenzfälle zu berücksichtigen.
- Kontrast ist nicht die einzige Dimension der Barrierefreiheit. Ein Verhältnis von 21:1 bedeutet nichts, wenn die Schriftart 9px ist, der Zeilenabstand eng ist oder die Bedeutung rot-grün ist.
Verbesserung eines nicht bestandenen Paares
- Hellerer Vordergrund auf dunklem Hintergrund oder dunklerer Vordergrund auf hellem.
- Schriftgröße oder -gewicht erhöhen, die Schwelle für großen Text ist niedriger.
- Hintergrund hinzufügen hinter Text über Bildern (Überlagerung, Verlauf).
- Kontrast niemals durch Verblassen auf ein Grau beheben, das weiterhin nicht besteht, drücken Sie, bis Sie AA erreichen.
Prüfen Sie nach jeder Anpassung erneut nach, das Tool berechnet das Verhältnis live, und eine kleine Helligkeitsänderung kann das Urteil schnell kippen lassen.
Häufig gestellte Fragen
AA ist die rechtliche Grundlage in den meisten Jurisdiktionen (Section 508 USA, EN 301 549 EU) und das, was die meisten Prüftools kennzeichnen. AAA ist erstrebenswert, nur für spezifische Barrierefreiheitskontexte erforderlich (Bildungsinhalte für Benutzer mit Sehbehinderungen). Streben Sie AA an und betrachten Sie AAA als Bonus.
Nein, er akzeptiert nur deckende Hex-Farben mit 3 oder 6 Ziffern. Konvertieren Sie RGB oder HSL zuerst in Hex oder nutzen Sie den Farbwähler, der immer Hex ausgibt.
WCAG 2.1 SC 1.4.11 erfordert 3:1 Kontrast für Nicht-Text-UI-Komponenten und grafische Objekte. Dies gilt für Fokusindikatoren, Eingabekanten, nur Symbol-Schaltflächen und Zustände (Hover, aktiv). Überprüfen Sie sowohl die Standard- als auch die Fokuszustände.
Testen Sie jeden Modus separat, Kontrastverhältnisse in hellen und dunklen Themen sind unabhängig. Viele Paletten, die im hellen Modus bestehen, scheitern im Dunkelmodus bei der gleichen relativen Helligkeit.
Verwandte Tools
ASCII-Tabelle Referenz
Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.
Referenz für Tastenkombinationen
Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.
HTML-Zeichenreferenz
Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.
Zufallsbuchstaben-Generator
Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.
Telefonnummern prüfen
Prüfen Sie die Struktur von Telefonnummern nach Land und zeigen Sie Region, Typ sowie E.164-, internationale, nationale und RFC-3966-Formate an.
Binär-zu-ASCII-Konverter
Fügen Sie Binärdaten (durch Leerzeichen getrennte Bytes oder einen langen Bitstrom) ein und erhalten Sie den ASCII-Text, den sie darstellen, dekodiert 8 Bits auf einmal.