Farbkontrast-Prüfer
Kurze Antwort
Text-zu-Hintergrund-Farbkontrastverhältnisse gegen WCAG AA/AAA-Standards prüfen.
Grenzwertiger Kontrast — bei großem Text prüfen.
Der schnelle braune Fuchs springt
Der schnelle braune Fuchs springt
Verbesserungsvorschläge
WCAG-Stufe AA erfordert ein Kontrastverhältnis von mindestens 4.5:1 für normalen Text und 3:1 für großen Text (18pt oder 14pt fett). Streben Sie nach Möglichkeit 7:1 (AAA) an — das erhält die Lesbarkeit für sehschwache Nutzer und bei hellem Sonnenlicht.
Was es macht
Berechnet das WCAG-Kontrastverhältnis zwischen einer beliebigen Vorder- und Hintergrundfarbe, die Sie eingeben, mit derselben Formel für relative Leuchtdichte wie in der WCAG-Spezifikation, und prüft es gegen die AA- und AAA-Schwellenwerte für normalen und großen Text (4.5:1 / 3:1 für AA, 7:1 / 4.5:1 für AAA). Zeigt eine Live-Textvorschau in Ihren Farben zusammen mit einem Bestanden/Nicht-bestanden-Badge für jeden Schwellenwert.
Warum es wichtig ist
Text mit geringem Kontrast ist laut WebAIMs jährlichem Million-Report der häufigste automatisch erkannte Barrierefreiheits-Fehler auf Startseiten, und er lässt sich mit einer Farbänderung besonders leicht beheben. Das WCAG-2.1-Erfolgskriterium 1.4.3 legt die Mindestverhältnisse fest, und EN 301 549 – die Norm hinter dem European Accessibility Act – wendet sie auf Webinhalte an.
Wie es funktioniert
-
Eine Vordergrund- (Text-) und eine Hintergrundfarbe eingeben oder wählen
-
Wir berechnen das WCAG-Kontrastverhältnis der relativen Leuchtdichte zwischen den beiden Farben
-
Das Verhältnis gegen die AA- und AAA-Schwellenwerte für normalen und großen Text prüfen
-
Eine Live-Vorschau Ihres Texts auf Ihrem Hintergrund sowie ein Bestanden- oder Nicht-bestanden-Badge für jeden Schwellenwert ansehen
Beispiel-Ein- und Ausgabe
foreground: #767676 background: #ffffff
Kontrastverhältnis: 4.54:1 AA normaler Text (4.5:1) PASS AA großer Text (3:1) PASS AAA normaler Text (7:1) FAIL AAA großer Text (4.5:1) PASS
Wer es nutzt
-
Designer:in
Die Markenfarbpalette gegen WCAG validieren, bevor sie festgelegt wird. Viele "moderne" Pastelltöne scheitern gegen Weiß an 4.5:1 – besser, das vor der markenweiten Anwendung zu entdecken.
-
Auditor:in für Barrierefreiheit
Jedes Text-Hintergrund-Farbpaar gegen die AA- und AAA-Schwellenwerte prüfen, bevor die EAA-Anhang-V-Erklärung eines Kunden freigegeben wird.
-
Frontend-Entwickler:in
Kontrast-Regressionen durch Änderungen an CSS-Variablen-Themes abfangen, bevor sie in Produktion gehen.
Häufig gestellte Fragen
Welches WCAG-Verhältnis brauche ich?
4.5:1 für normalen Text, 3:1 für großen Text (≥18pt oder ≥14pt fett) und UI-Komponenten. WCAG 2.1 AAA verlangt 7:1 – eine höhere Latte, die die meisten Marken nicht anpeilen.
Prüft das Bilder und Icons?
Nur Textkontrast, und nur für die beiden hier eingegebenen Farben. Bildkontrast (z. B. Text-auf-Bild-Hero-Banner) braucht eine manuelle Prüfung – es gibt keinen automatischen Seiten-Scan.
Welchen Kontrast verlangt der EAA?
Für Webinhalte wendet EN 301 549 v3.2.1 WCAG 2.1 Stufe AA an, einschließlich 1.4.3 – Text braucht also mindestens 4.5:1 gegenüber seinem Hintergrund (3:1 für großen Text). Prüfen Sie jedes Farbpaar, das Ihre Website verwendet.