Fünf eindeutige Ergebnisse
Der Farbkontrast-Checker trennt AA normal, AAA normal, AA groß, AAA groß und die UI-Referenz 3:1. Jeder Wert bleibt beim richtigen Einsatz.
Kostenloses WCAG-2.2-Designwerkzeug
Farbkontrast-Checker für WCAG AA und AAA
Mit diesem Farbkontrast-Checker misst du Vorder- und Hintergrund, liest die passenden Grenzwerte, siehst echte UI und findest eine nahe bestandene Farbe. Deine Palette bleibt im Browser.
Aktualisiert am 25. Juli 2026
Farbkontrast-Checker
Was prüft dieser Farbkontrast-Checker?
Der Farbkontrast-Checker berechnet das WCAG-Verhältnis zweier HEX-Farben. Er trennt AA und AAA für normalen und großen Text, die 3:1-Referenz sichtbarer UI, Vorschau und Palettenmatrix. Der Farbkontrast-Checker sucht außerdem einen nahen HSB-Vordergrund für 4.5:1 oder 7:1. Ein bestandenes Paar zertifiziert keine ganze Seite.
Vom Messwert zur Designentscheidung
Der Farbkontrast-Checker verbindet Zahl, visuellen Kontext und Korrektur.
Vorschau wie echte UI
Der Farbkontrast-Checker setzt das Paar auf Überschrift, Text, Button und Badge. Probleme werden vor der Aufnahme ins Komponentensystem sichtbar.
Matrix für die ganze Palette
Füge zwei bis acht Farben hinzu. Der Farbkontrast-Checker misst jedes Paar und zeigt Kombinationen, die ein einzelner Rechner verborgen ließe.
WCAG 2.2 · HEX · HSB
Farbkontrast-Checker verwenden
Gib zwei HEX-Farben ein. Alles wird sofort und lokal berechnet.
Bestanden · AA normaler Text
Lesbare UI-Vorschau
Der Vordergrund färbt Text, Rahmen und Bedienelemente auf dem gewählten Hintergrund.
Nahen bestandenen Vordergrund finden
Die Suche erhält den Farbton möglichst und ändert HSB-Sättigung und Helligkeit minimal.
Alle Berechnungen bleiben in diesem Browser.
:root {
--accessible-foreground: #1F2937;
--accessible-background: #F9FAFB;
}
.your-component {
color: var(--accessible-foreground);
background: var(--accessible-background);
}Paletten-Kontrastmatrix
Füge zwei bis acht Farben hinzu. Jede Zelle vergleicht Zeile und Spalte.
| Farbe | 1#1F2937 | 2#F9FAFB | 3#2563EB | 4#F59E0B |
|---|---|---|---|---|
1#1F2937 | — | 14.05:1AA | 2.84:1Unter 3:1 | 6.83:1AA |
2#F9FAFB | 14.05:1AA | — | 4.95:1AA | 2.06:1Unter 3:1 |
3#2563EB | 2.84:1Unter 3:1 | 4.95:1AA | — | 2.41:1Unter 3:1 |
4#F59E0B | 6.83:1AA | 2.06:1Unter 3:1 | 2.41:1Unter 3:1 | — |
WCAG-2.2-Kontrastgrenzen
Der Farbkontrast-Checker trennt Textgrenzen von der nicht-textlichen 3:1-Referenz.
| Einsatz | Stufe | Minimum | Bedeutung |
|---|---|---|---|
| Normaler Text | AA | 4.5:1 | Text unter der WCAG-Definition für großen Text. |
| Großer Text | AA | 3:1 | 24 CSS px normal oder etwa 18.5 CSS px fett. |
| Normaler Text | AAA | 7:1 | Erhöhtes Ziel für kleineren Text. |
| Großer Text | AAA | 4.5:1 | Erhöhtes Ziel für großen Text. |
| UI und Grafik | AA | 3:1 | Erforderliche visuelle Information zu Nachbarfarben. |
Kontrastprüfung in drei Schritten
Nutze den Farbkontrast-Checker als wiederholbaren Review.
1. Produktionsfarben testen
Setze die echten Tokens in den Farbkontrast-Checker ein. Nutze keine komprimierte Bildschirmprobe, wenn der Quell-HEX vorliegt. Prüfe Standard, Hover, Aktiv, Fokus, Fehler, Auswahl und Deaktiviert getrennt, weil sich Nachbarfarben ändern können.
2. Passende Grenze wählen
Nutze 4.5:1 für normalen AA-Text und 7:1 für AAA. Die niedrigere Grenze für großen Text gilt nur bei passender Größe und Stärke. Wesentliche Grenzen, Icons und Statusanzeigen prüfst du gegen die nicht-textliche 3:1-Regel.
3. Fertige Komponente verifizieren
Nach dem Farbkontrast-Checker prüfst du Browser-Zoom, beide Themes und echte Texte. Bestätige sichtbaren Fokus, Hinweise ohne Farbe und alle Zustände. Mathematik findet das Verhältnis, menschliche Prüfung den Kontext.
So rechnet der Farbkontrast-Checker
Der Farbkontrast-Checker linearisiert jeden sRGB-Kanal und nutzt die WCAG-Gewichte der relativen Leuchtdichte: 0.2126 Rot, 0.7152 Grün und 0.0722 Blau. Danach berechnet er (L1 + 0.05) / (L2 + 0.05), wobei L1 heller ist. Identische Farben ergeben 1:1, Schwarz und Weiß 21:1.
Der Tausch von Vorder- und Hintergrund ändert die Zahl nicht, aber den Kontext. Transparenz, Verläufe, Bilder, Mischmodi und Schatten erzeugen andere Pixel. Komponiere transparente Farben zuerst auf den echten Grund und setze das Ergebnis in den Farbkontrast-Checker ein.
Warum ein bestandenes Ergebnis kein Zertifikat ist
WCAG-Konformität gilt für vollständige Seiten und Prozesse. Ein Farbkontrast-Checker weiß nicht, ob Text wirklich groß, ein Icon wesentlich oder Farbe der einzige Hinweis ist. Tastatur, Namen, Rollen, Fokusreihenfolge und Inhalt brauchen eigene Tests.
Behandle den Farbkontrast-Checker als einen Teil des Audits. Notiere Komponente, Zustand, Tokens, Grenze, Datum und Ergebnis. Diese Spur erklärt Anpassungen und macht spätere Theme-Änderungen sicherer.
Die Palettenmatrix sinnvoll nutzen
Gib jeder Farbe eine Rolle: Text, Leinwand, Fläche, Akzent, Rahmen, Erfolg, Warnung oder Fehler. Füge echte Tokens hinzu und suche zuerst Paare ab 4.5:1. Der Farbkontrast-Checker markiert Werte unter 3:1 gesondert.
Nicht jede Farbe muss mit jeder funktionieren. Definiere wenige freigegebene Paare in Komponenten. Starte den Farbkontrast-Checker nach jeder Änderung eines gemeinsamen Tokens neu, weil mehrere Kombinationen betroffen sein können.
Release-Checkliste für den Farbkontrast-Checker
Prüfe diese Punkte, bevor das Ergebnis als Release-Nachweis gilt.
- 01
Farbkontrast-Checker: Quell-HEX statt Probe aus komprimierter Aufnahme verwenden.
- 02
Farbkontrast-Checker: Helles und dunkles Theme getrennt testen.
- 03
Farbkontrast-Checker: Standard, Hover, Fokus, Aktiv, Auswahl, Fehler und Deaktiviert prüfen.
- 04
Farbkontrast-Checker: 4.5:1 auf normalen AA-Text ohne Ausnahme anwenden.
- 05
Farbkontrast-Checker: 7:1 anwenden, wenn normaler AAA-Text gefordert ist.
- 06
Farbkontrast-Checker: Größe und Stärke vor der Einstufung als großer Text bestätigen.
- 07
Farbkontrast-Checker: Wesentliche Icons, Grenzen und Zustände gegen 3:1 prüfen.
- 08
Farbkontrast-Checker: Transparenz vor Eingabe der sichtbaren Farbe komponieren.
- 09
Farbkontrast-Checker: Schwächste Stelle von Bild oder Verlauf messen.
- 10
Farbkontrast-Checker: Fehlern, Links und Zuständen einen Hinweis ohne Farbe geben.
- 11
Farbkontrast-Checker: Fokus gegen beide umgebenden Zustände prüfen.
- 12
Farbkontrast-Checker: Zoomen und Inhalt sowie Funktion bestätigen.
- 13
Farbkontrast-Checker: Echten Text statt kurzer Musterzeile testen.
- 14
Farbkontrast-Checker: Komponente, Zustand, Tokens, Grenze, Ergebnis und Datum notieren.
- 15
Farbkontrast-Checker: Freigegebene Paare wählen, nicht alle Kombinationen erzwingen.
- 16
Farbkontrast-Checker: Nach Änderungen gemeinsamer Tokens erneut prüfen.
- 17
Farbkontrast-Checker: Erzwungene Farben prüfen, wenn unterstützt.
- 18
Farbkontrast-Checker: Verhältnis mit Tastatur-, Screenreader- und Sichtprüfung verbinden.
Primäre WCAG-Nachweise
Der Farbkontrast-Checker folgt der veröffentlichten Formel und den Grenzwerten; offizielle Dokumente bleiben maßgeblich.
- WCAG 2.2 1.4.3 setzt 4.5:1 für normalen AA-Text und 3:1 für großen AA-Text. WCAG-2.2-Kontrastkriterien
- WCAG 2.2 1.4.6 setzt 7:1 für normalen AAA-Text und 4.5:1 für großen AAA-Text. WCAG-2.2-Kontrastkriterien
- WCAG 2.2 1.4.11 setzt 3:1 für wesentliche UI- und Grafikinformation zu Nachbarfarben. WCAG 2.2 Nicht-Text-Kontrast
Das AA-Textkriterium lautet:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
Farbworkflow fortsetzen
Fragen zum Farbkontrast
Welches Kontrastverhältnis ist gut?
Für normalen Text nutzt der Farbkontrast-Checker 4.5:1 als AA-Minimum und 7:1 für AAA. Großer Text nutzt 3:1 und 4.5:1; wesentliche UI-Information meist 3:1.
Besteht 3:1 WCAG AA?
Für qualifizierten großen Text und nicht-textliche Information kann es reichen, für normalen AA-Text nicht. Der Farbkontrast-Checker trennt diese Ergebnisse.
Kann Transparenz geprüft werden?
Der Farbkontrast-Checker akzeptiert feste HEX-Werte. Komponiere Transparenz zuerst auf dem echten Hintergrund. Bei Bild oder Verlauf misst du die schwächste Stelle.
Wie wählt die automatische Anpassung?
Der Farbkontrast-Checker durchsucht HSB-Sättigung und Helligkeit und erhält den Farbton möglichst. Er schlägt einen nahen Vordergrund vor, der im Design geprüft werden muss.
Macht ein bestandenes Ergebnis die Seite zugänglich?
Nein. Ein Farbkontrast-Checker prüft eine mathematische Farbbeziehung. Struktur, Tastatur, Fokus, Labels, Alternativen und der vollständige Prozess brauchen weitere Tests.