Überprüfen Sie WCAG 2.1-Kontrastverhältnisse zwischen beliebigen Vorder- und Hintergrundfarben, sehen Sie sich Beispieltext an und erhalten Sie sofort AA/AAA-Bestehenergebnisse.
Features
- Live-Farbauswahl: Passen Sie Vorder- und Hintergrundfarben mit dem Ant Design-Picker an oder geben Sie präzise HEX-Werte ein.
- WCAG-Matrix: Sehen Sie AA/AAA-Anforderungen für normalen Text, großen Text und UI-Grafiken in einer einzigen Tabelle.
- Genaue Leuchtdichte: Kontrastverhältnisse folgen WCAG 2.1 unter Verwendung linearisierter RGB-Kanäle und umfassen Leuchtdichteablesungen pro Farbe.
- Vorschaublock: Testen Sie Überschriften und Absätze in einer Live-Beispielkarte mit Ihrer gewählten Palette.
Usage Guide
- Farben wählen: Wählen oder fügen Sie HEX-Werte für Vordergrund und Hintergrund ein.
- Verhältnis überprüfen: Überprüfen Sie das berechnete Kontrastverhältnis und die AA/AAA-Tabelle für Bestehen/Fehlschlagen-Einblicke.
- Kopie anpassen: Bearbeiten Sie den Beispieltext, um echte Étiquettes, Schaltflächen oder Marketing-Texte zu sehen.
Technical Details
Relative Leuchtdichte
Jeder RGB-Kanal wird mit der WCAG-Gammakurve in einen linearen Wert umgewandelt, bevor die Leuchtdichte mit den Koeffizienten 0.2126, 0.7152 und 0.0722 berechnet wird.
Kontrastverhältnis
Die Verhältnisformel (L1 + 0.05) / (L2 + 0.05) vergleicht die helleren und dunkleren Farben, um eine konsistente Lesbarkeit auf allen Geräten zu gewährleisten.
Schwellenwerte
AA normaler Text erfordert ≥ 4.5:1, großer Text ≥ 3:1, AAA normal benötigt 7:1, AAA groß 4.5:1, und grafische Objekte sollten 3:1 erfüllen.
Frequently Asked Questions
- Verwendet großer Text andere Schwellenwerte?
- Ja. Text ≥ 18px normal oder 14px fett gilt als groß und benötigt nur 3:1 für AA oder 4.5:1 für AAA.
- Wie teste ich Verläufe?
- Überprüfen Sie die hellsten und dunkelsten Stopps im Verlauf. Jedes Stopp-Paar sollte das gewünschte Verhältnis erfüllen.
- Zählen Symbole als Text?
- Solide Symbole und wesentliche UI-Grafiken sollten mindestens 3:1 Kontrast im Verhältnis zu ihrem Hintergrund erfüllen.
Related Documentation
- WCAG 2.1 Kontrast (Erfolgskriterium 1.4.3) - Offizielle Anleitung zu minimalen Kontraststufen für Text und Textbilder.
- WCAG 2.1 Kontrast (1.4.6) - Erweiterte Kontrastanforderungen für AAA-Konformität.
- MDN - Leuchtdichte berechnen - Hintergrund zur linearen RGB-Formel, die in Barrierefreiheits-Tools verwendet wird.
- W3C - Kontrastverhältnis-Mathematik - Details zur Verhältnisformel, Rundung und Begründung.
- Inklusive Designkarten - Tipps zum Kombinieren von Farben und Typografie für verschiedene Zielgruppen.