Zum Inhalt springen

Farbkontrast-Prüfer

Kurze Antwort

Text-zu-Hintergrund-Farbkontrastverhältnisse gegen WCAG AA/AAA-Standards prüfen.

Was es nicht leistet: Es prüft nur die zwei Farben, die Sie eingeben; es scannt keine Seite, und Text auf Bildern oder Verläufen muss von Hand geprüft werden.

Kostenlos · Ohne Anmeldung · Läuft im Browser
4,54Kontrastverhältnis

Grenzwertiger Kontrast — bei großem Text prüfen.

Der schnelle braune Fuchs springt

Der schnelle braune Fuchs springt

AA · Normaler TextBestanden
AA · Großer TextBestanden
AAA · Normaler TextNicht bestanden
AAA · Großer TextBestanden

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

  1. Eine Vordergrund- (Text-) und eine Hintergrundfarbe eingeben oder wählen

  2. Wir berechnen das WCAG-Kontrastverhältnis der relativen Leuchtdichte zwischen den beiden Farben

  3. Das Verhältnis gegen die AA- und AAA-Schwellenwerte für normalen und großen Text prüfen

  4. Eine Live-Vorschau Ihres Texts auf Ihrem Hintergrund sowie ein Bestanden- oder Nicht-bestanden-Badge für jeden Schwellenwert ansehen

Beispiel-Ein- und Ausgabe

EINGABE
foreground: #767676
background: #ffffff
AUSGABE
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

So lesen Sie das Ergebnis

Kontrastverhältnis (4,54:1 im Beispiel)
Wie viel heller die hellere Farbe als die dunklere ist, von 1:1 (dieselbe Farbe) bis 21:1 (Schwarz auf Weiß). Es nutzt die in WCAG 2.1 definierte Formel der relativen Leuchtdichte, sodass das Ergebnis mit jedem standardkonformen Tool übereinstimmt.
AA normaler Text (4,5:1)
Die Stufe, auf die der European Accessibility Act über EN 301 549 verweist: Fließtext braucht mindestens 4,5:1. #767676 auf Weiß besteht mit 4,54:1 und ist damit das hellste reine Grau, das auf Weiß besteht — #777777 fällt schon durch.
AA großer Text (3:1)
Großer Text — mindestens 18 pt (24 px) oder 14 pt (etwa 18,7 px) fett — braucht 3:1. Bedienelemente und aussagekräftige Grafiken wie Eingaberahmen und Icons brauchen ebenfalls 3:1 gegenüber ihrer Umgebung (WCAG 1.4.11).
AAA (7:1 und 4,5:1)
Die erweiterte Stufe. Weder der EAA noch EN 301 549 verlangen sie, aber sie hilft Menschen mit Sehschwäche und allen, die bei hellem Licht lesen. Das Beispiel besteht AAA für großen Text und fällt für normalen Text durch.
Vorschau und Farbe des Verhältnisses
Ihr Text in Ihren beiden Farben in zwei Größen, damit Sie das Paar auch mit dem Auge beurteilen, nicht nur an der Zahl. Das Verhältnis erscheint grün ab 7:1, orange ab 4,5:1 — das besteht AA — und rot darunter.

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-Erklärung zur Barrierefreiheit eines Kunden freigegeben wird.

  • Frontend-Entwickler:in

    Kontrast-Regressionen durch Änderungen an CSS-Variablen-Themes abfangen, bevor sie in Produktion gehen.

Häufige Probleme und ihre Lösung

  1. Hellgrauer Text auf Weiß

    Graue Platzhalter, Bildunterschriften und Footer-Texte sind der übliche Fehler. Nehmen Sie auf Weiß #767676 oder dunkler für normalen Text; auf farbigem Hintergrund ändern Sie die Helligkeit einer Farbe und prüfen erneut.

    :root {
  --text: #1f2937;       /* 14.7:1 on #ffffff */
  --text-muted: #595959; /*  7.0:1 on #ffffff */
}

  2. Die Markenfarbe ist zu hell für Text

    Behalten Sie die Markenfarbe für große Überschriften, Icons und Hintergründe und nutzen Sie für kleinen Text und Links einen dunkleren Ton davon. Ein dunklerer Ton wirkt weiter wie die Marke.

  3. Weißer Text auf farbigem Button

    Prüfen Sie die Buttonfarbe gegen Weiß, nicht nur gegen die Seite. Fällt sie durch, dunkeln Sie den Button ab oder setzen Sie dunklen Text darauf, und prüfen Sie Hover- und Fokusfarben genauso.

  4. Text über Bildern oder Verläufen

    Es gibt keine einzelne Hintergrundfarbe zum Messen. Prüfen Sie die hellste Stelle hinter dem Text oder legen Sie eine deckende oder halbtransparente Fläche dahinter, damit das Verhältnis überall gilt.

  5. Links, die sich nur durch die Farbe vom Text abheben

    Sind Links im Fließtext nur an der Farbe erkennbar, braucht diese Farbe zusätzlich 3:1 zum umgebenden Text (W3C-Technik G183) und bei Hover und Fokus ein weiteres Merkmal. Eine Unterstreichung ist die einfachere Lösung.

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.

Quellen

Die Dokumentation, auf der dieses Tool und die Erklärungen auf dieser Seite beruhen.

Kostenlose Tools zum Thema

Ratgeber zum Thema

Studiendaten zum Thema

Verwandte Tools in EAA-Konformität

Alle EAA-Konformität-Tools anzeigen