Farbkontrast-Prüfer
Kostenloser Farbkontrast-Prüfer — WCAG 2.2 AA- und AAA-Konformität sofort prüfen. Live-Textvorschau, Farbenblindheit-Simulation und barrierefreie...
Aktualisiert Mai 2026
Geprüft von Rafael Duarte
Good color contrast ensures text is readable for all users, including those with low vision or color blindness. Aim for WCAG 2.2 AA compliance to meet legal accessibility standards.
Accessibility Fix
Your colors pass AA!
No fix needed for normal text contrast.
Color Blindness Simulation
WCAG 2.2 Reference
| Metric | Current Value | Threshold | Status |
|---|---|---|---|
| Normal Text (AA) | 6.18:1 | 4.5:1 | PASS |
| Normal Text (AAA) | 6.18:1 | 7:1 | FAIL |
| Large Text (AA) | 6.18:1 | 3:1 | PASS |
| Large Text (AAA) | 6.18:1 | 4.5:1 | PASS |
| UI Components (AA) | 6.18:1 | 3:1 | PASS |
So funktioniert der Kontrastrechner
Zwei Farben, sofortiges WCAG-Ergebnis
1. Text- und Hintergrundfarbe festlegen
Klicke auf die Farbfläche, um den Picker zu öffnen, oder gib direkt einen 6-stelligen HEX-Code ein. "Swap Colors" tauscht Vorder- und Hintergrundfarbe mit einem Klick.
2. Kontrastverhältnis und WCAG-Stufe ablesen
Das Kontrastverhältnis sowie der AA/AAA-Status für normalen Text, großen Text und UI-Komponenten erscheinen sofort, ohne Neuladen der Seite.
3. Farbe korrigieren oder Farbsehschwäche simulieren
"Accessibility Fix" schlägt die nächstliegende bestehende Farbe vor, die den Farbton beibehält; der Simulator zeigt Deuteranopie, Protanopie, Tritanopie und mehr.
Was dieser Kontrastrechner kann
Mehr als nur das Kontrastverhältnis berechnen
Automatischer Korrekturvorschlag
Findet die nächstliegende WCAG-konforme Farbe bei gleichem Farbton, statt dich nur auf den Fehler hinzuweisen und die Suche dir zu überlassen.
Simulation von 4 Formen der Farbsehschwäche
Deuteranopie, Protanopie, Tritanopie und Achromatopsie, zusätzlich zur normalen Farbwahrnehmung — so siehst du, was betroffene Nutzer tatsächlich unterscheiden können.
Live-Vorschau in Fließtext, Überschrift und Button
Die Farbkombination wird direkt als Absatztext, große Überschrift und Schaltfläche gerendert, damit du die Lesbarkeit beurteilst und nicht nur eine Zahl.
Läuft komplett im Browser
Keine Farbwerte werden an einen Server geschickt — unbedenklich auch für noch unveröffentlichte Corporate-Design-Paletten.
Kontrastverhältnis per Tastenkürzel kopieren
Shift+Enter an beliebiger Stelle der Seite kopiert das aktuelle Kontrastverhältnis — praktisch zum direkten Einfügen in einen Prüfbericht.
Referenzwerte für Kontrastverhältnisse
Typische Kombinationen und wo sie landen
Wann du dieses Tool brauchst
Die häufigsten Anwendungsfälle unter den Nutzern
Design-Review für Web und Mobile
Text, Buttons und Formularfelder vor dem Launch prüfen — ein durchfallendes Farbpaar vorher zu erkennen ist deutlich günstiger als die Korrektur danach.
Prüfung der rechtlichen Barrierefreiheit
BFSG, BITV 2.0 und der European Accessibility Act verweisen alle auf dieselben WCAG-Schwellenwerte — die Referenztabelle zeigt jede Anforderung mit ihrem Grenzwert.
Kontrastcheck im Dark Mode
Dieselben WCAG-Verhältnisse gelten unabhängig vom Theme — prüfe, ob helle Schrift auf dunklem Hintergrund den Grenzwert weiterhin einhält.
Barrierefreiheit der Markenfarbe
Prüfe, ob eine Unternehmensfarbe als Fließtext oder als UI-Element funktioniert, und finde die nächstliegende Alternative, die besteht.
Sicherheit für Menschen mit Farbsehschwäche
Bestätige, dass eine nach Luminanz bestandene Kombination auch tatsächlich unterscheidbar bleibt — führe vor der finalen Freigabe die Simulationen für Deuteranopie und Protanopie durch.
Häufiger Fehler? Hier ansetzen
Dem optischen Eindruck vertrauen statt der Zahl
Zwei Farben, die visuell sehr unterschiedlich wirken, können nahezu identische Luminanz haben und trotzdem durchfallen — immer das tatsächliche Verhältnis prüfen.
Farbsehschwäche ignorieren, obwohl WCAG bestanden wurde
WCAG misst Luminanz, nicht Farbunterscheidung — eine Rot/Grün-Kombination kann den Kontrasttest bestehen und für farbenblinde Nutzer trotzdem nicht unterscheidbar sein.
Textgröße bei der Bewertung außer Acht lassen
Großer Text (ab 18pt bzw. 14pt fett) braucht nur 3:1 statt 4,5:1 — eine größere Schrift kann eine sonst durchfallende Farbe retten.
Den Schwellenwert für UI-Komponenten auf Text anwenden
UI-Komponenten benötigen nur 3:1 und kennen keine AAA-Stufe — wendet man diesen Maßstab auf normalen Text an, der 4,5:1 braucht, wird eine in der Praxis durchfallende Kombination fälschlich freigegeben.
Annehmen, der Korrekturvorschlag bestehe auch AAA
Das Panel "Accessibility Fix" zielt auf das AA-Minimum (4,5:1), nicht auf AAA (7:1) — wer AAA benötigt, sollte das vorgeschlagene Verhältnis vor dem Übernehmen in der Tabelle prüfen.
Warum diesen Kontrastrechner nutzen
Zu geringer Kontrast bleibt der häufigste Barrierefreiheitsfehler im Web — laut WebAIM Million betrifft er die überwiegende Mehrheit aller untersuchten Startseiten. Mit dem Barrierefreiheitsstärkungsgesetz (BFSG) und der BITV 2.0 ist eine Prüfung in Deutschland längst keine Kür mehr.
Der automatische Korrekturvorschlag und die Simulation von Farbsehschwäche gehen über eine reine Verhältnisberechnung hinaus: Sie zeigen genau, wie ein Fehler behoben wird, und decken Probleme auf, die die Zahl allein nicht sichtbar macht.
Seit dem 28. Juni 2025 gilt das BFSG für weite Teile der Privatwirtschaft in Deutschland, zusätzlich zur BITV 2.0 für öffentliche Stellen — beide verweisen über die europäische Norm EN 301 549 auf WCAG 2.1 Stufe AA. Kontrastprüfung ist damit Teil der gesetzlichen Pflicht, nicht nur guter Designpraxis.
WCAG-2.2-Kontrastanforderungen
AA (gesetzliches Minimum) vs. AAA (erweitert)
Häufig gestellte Fragen
Ein Kontrastrechner berechnet das Kontrastverhältnis zwischen zwei Farben — meist Text und Hintergrund — und prüft, ob dieses Verhältnis die WCAG-Standards für Barrierefreiheit erfüllt. Dieses Tool simuliert zusätzlich Farbsehschwäche und schlägt bestehende Alternativen vor, wenn eine Kombination durchfällt.
Weiterführende Quellen
Amtlicher Volltext des deutschen Barrierefreiheitsstärkungsgesetzes.
Deutschsprachige MDN-Anleitung zum WCAG-Kriterium für Mindestkontrast.
Das ursprüngliche Referenztool zur Prüfung von WCAG-Kontrastverhältnissen.
Verwandte Tools
- Farbkonverter & Generator Design Farben zwischen HEX, RGB, HSL und CMYK sofort konvertieren. Kostenloser Online-Farbwähler mit WCAG-Kontrastprüfer und Palettengenerator.
- Farbpaletten-Generator Design Harmonische Farbpaletten aus jeder Basisfarbe generieren. Analogie, Komplementär, Triadisch oder Tetriadisch — als CSS-Variablen oder JSON exportieren.
- Farbpalette aus Bild Design Extrahiere Farbpaletten aus jedem Bild — erhalte HEX-, RGB-, HSL-Codes und exportiere als CSS-Variablen, Tailwind, JSON oder PNG. 100% clientseitig, kein...
- CSS Box Shadow Generator — Neumorphismus, Glasmorphismus & Tailwind Design Kostenloser CSS Box Shadow Generator mit Live-Vorschau. Erstelle Schatten, Neumorphismus- und Glasmorphismus-Effekte. Exportiere zu CSS, Tailwind oder CSS-Variablen.
- CSS Flexbox Generator Design Kostenloser CSS Flexbox Generator: Live-Vorschau, Tailwind & CSS gleichzeitig, 10 Layout-Vorlagen, kontextuelle Warnungen und React/JSX-Export. Keine Anmeldung.
