Farb-Barrierefreiheits-Checker — WCAG-Kontrast & CVD-Simulation
Kostenloser WCAG-2.1-Kontrast-Checker für beliebige Farbkombinationen. Prüft die Lesbarkeit für AA- und AAA-Konformität — Grundlage für inklusives Webdesign.
So wird er benutzt
1
Vordergrund- und Hintergrundfarbe per Farbwähler oder Hex/RGB-Eingabe wählen.
2
Live-Textvorschau ansehen und WCAG-AA/AAA-Ergebnisse prüfen.
3
CVD-Streifen prüfen, um zu sehen, wie jede Farbsehschwäche Ihre Farben wahrnimmt.
4
Bei Durchfall auf eine vorgeschlagene Alternative klicken, um das Paar direkt zu reparieren.
5
Im Massen-Palette-Modus alle Paare Ihrer Design-Palette auf einmal prüfen.
Farbpaare auf WCAG-Kontrast und Unterscheidbarkeit bei Farbsehschwäche prüfen
Zwei Farben wählen, um Kontrast und Sichtbarkeit bei Farbsehschwäche zu prüfen.
Vordergrund
Hintergrund
Großer Text (ab 18 pt)
Überschrift-Vorschau
Normaler Text (16 px)
Der schnelle braune Fuchs springt über den faulen Hund.
Fließtext-Vorschau — so sehen Ihre Nutzer diese Farbkombination in echten Inhalten.
WCAG 2.1 Kontrast
AA verlangt 4,5:1 für normalen und 3:1 für großen Text. AAA verlangt 7:1 bzw. 4,5:1.
12.63:1
AA Normal
Bestanden
AA Groß
Bestanden
AAA Normal
Bestanden
AAA Groß
Bestanden
Farbsehschwäche-Simulation
So wirkt Ihr Farbpaar auf Menschen mit verschiedenen Farbsehschwächen.
Alternativen-Vorschläge
Barrierefreie Farb-Alternativen, die WCAG AA bestehen und unter allen CVD-Typen unterscheidbar bleiben.
Paletten-Massencheck
3–10 Hex-Farben (je Zeile oder kommagetrennt) einfügen, um alle Paare zu prüfen.
Veröffentlicht
Aktualisiert
