# Farbkontrast-Prüfer

https://rankproof.eu/de/tools/compliance-color-contrast

## Kurze Antwort

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

## 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.

## 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

```text
foreground: #767676
background: #ffffff
```

AUSGABE

```text
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
```

## 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.

## 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.

## Verwandte Tools in EAA-Konformität

- [Barrierefreiheits-Checker](https://rankproof.eu/de/tools/compliance-wcag-scanner)
- [Generator für Barrierefreiheitserklärungen](https://rankproof.eu/de/tools/compliance-accessibility-statement-generator)