01
Sichtbare Farbebenen festlegen
Drei oder sechs HEX-Zeichen eingeben. Alpha gehört in das separate Deckkraftfeld; ein achtstelliger HEX-Wert wird nicht stillschweigend gekürzt.
Color & Accessibility
Kontrast-Checkerfür lesbare Farbkombinationen
Zwei HEX-Farben eingeben, Deckkraft und Schrift festlegen und die fünf WCAG-Ergebnisse vergleichen.
Kontrast-Checker
Beispieltext
Kontrastverhältnis
4.48:1
Ergebnis für diesen Text: Nicht bestanden · AA · Grenzwert 4.5:1
Als normale Schrift bewertet · Sichtbare Vordergrundfarbe: #777777
Normaler Text AA · 4.5:1Nicht bestanden
Normaler Text AAA · 7:1Nicht bestanden
Großer Text AA · 3:1Bestanden
Großer Text AAA · 4.5:1Nicht bestanden
UI/Grafik AA · 3:1Bestanden
Farbvorschau
Dieser Satz zeigt die gewählte Schriftgröße und Farbkombination.
Passende Farbvorschläge
Vordergrund anpassen
#767676 · 4.54:1
Hintergrund anpassen
#060606 · 4.52:1
Die Berechnung erfolgt im Browser; Farbwerte werden nicht hochgeladen.
Textbedingungen
Das Ergebnis ist aktuell.
Ein hellgraues Label wirkt im Entwurf lesbar und verfehlt auf einer weißen Karte dennoch knapp die AA-Grenze. Der Kontrast-Checker macht diese Abweichung vor der Freigabe sichtbar.
Wer Farbkontrast prüfen und das Kontrastverhältnis berechnen will, muss die tatsächlich gerenderte Vordergrundfarbe betrachten. Dieser Kontrast-Checker mischt transparente Schrift zuerst mit dem Hintergrund.
Warum diesen Kontrast-Checker nutzen
Die Berechnung berücksichtigt die sichtbare Farbe und liefert zwei getrennte Korrekturen.
Transparenz vor dem Vergleich einrechnen
Mit 50 Prozent Deckkraft ist ein dunkler HEX-Wert auf weißem Grund deutlich heller. Der Kontrast-Checker zeigt den gemischten Farbwert und beurteilt erst danach den Text Hintergrund Kontrast.
Vordergrund und Hintergrund getrennt verbessern
Scheitert die gewählte Schrift am Ziel, erscheinen zwei Farbvorschläge mit ihren eigenen Verhältnissen. Eine Markenfarbe wird erst nach Vorschau und ausdrücklichem Anwenden geändert; einmaliges Rückgängigmachen bleibt möglich.
Drei Voraussetzungen für eine belastbare Bewertung
Nur die passenden Ebenen und Schriftbedingungen machen den Grenzwert aussagekräftig.
02
Schriftgröße und Gewicht abgleichen
Große Schrift beginnt bei 24px regulär oder rund 18,67px fett. Nach einer Änderung prüft das Werkzeug automatisch mit kurzer Verzögerung; der manuelle Modus bleibt verfügbar.
03
Grenzwert ohne Rundungsfehler lesen
Die Anzeige rundet auf zwei Stellen, doch die Entscheidung verwendet den vollen Wert. Veraltete Ergebnisse können weder kopiert noch als Farbvorschlag angewendet werden.
Was die fünf Ergebnisse unterscheiden
Der Zahlenwert bleibt gleich; die Anforderungen hängen vom Einsatz der Farbe ab.
Vordergrund mit Alpha
Transparenter Text wird auf dem deckenden Hintergrund zusammengesetzt. Der resultierende HEX-Wert macht nachvollziehbar, weshalb dieselbe Ausgangsfarbe bei anderer Deckkraft anders abschneidet.
Normaler und großer Text
Für normalen Text verlangt AA 4,5:1; große Schrift braucht 3:1. Eine reguläre 20px-Beschriftung zählt weiter als normaler Text.
AA, AAA und UI-Grafik
Der WCAG Kontrastrechner zeigt normale und große Schrift je für AA und AAA sowie informative UI-Grafiken für AA. Die ausgewählte Zielstufe steuert nur das Haupturteil.
Umkehrbare Vorschläge
Farbvorschläge bewegen den Vordergrund oder Hintergrund entlang der Helligkeit. Vor dem Anwenden sieht man HEX und neues Verhältnis; danach kann man den Schritt zurücknehmen.
Grenzen einer einzelnen Farbpaarprüfung
Ein bestandener Zahlenwert ist keine Prüfung aller Zustände einer Website.
- Hintergrund muss deckend sein
- Für transparente Hintergründe fehlt die darunterliegende Ebene. Verläufe und Fotos benötigen Stichproben mehrerer Pixel; zwei HEX-Felder können das nicht ersetzen.
- Nur kurze und lange HEX-Werte
- Erlaubt sind drei oder sechs Stellen mit optionalem #. Farbnamen, rgb(), hsl(), OKLCH und achtstellige HEX-Werte werden nicht still konvertiert.
- Keine vollständige WCAG-Freigabe
- Der Kontrast-Checker beurteilt nur dieses Farbpaar und die gewählte Schrift. Tastaturbedienung, Fokus, andere Zustände und Seitenstruktur bleiben ungeprüft.
- Keine APCA-Vermischung
- AA und AAA beziehen sich hier auf WCAG 2.x. APCA verwendet andere Berechnungen und Grenzwerte und darf nicht als derselbe Befund erscheinen.
Häufige Fragen zum Kontrast-Checker
Antworten zu Berechnung, Schriftgrößen, Vorschlägen und Ausnahmen.
Was ist das WCAG-Kontrastverhältnis und wie wird es berechnet?
Das Verhältnis ist (L1 + 0,05) / (L2 + 0,05), mit der helleren relativen Luminanz oben. Der Kontrast-Checker vergleicht den ungerundeten Wert mit der gewählten Grenze.
Was bedeuten die WCAG-Stufen AA und AAA?
AA fordert für normalen Text 4,5:1 und für große Schrift 3:1. AAA erhöht diese Werte auf 7:1 beziehungsweise 4,5:1.
Welche Kontrastverhältnisse gelten für große Schrift?
Ab 24px regulär oder rund 18,67px fett gilt Schrift als groß. Die Größe ändert nicht das Farbpaar, sondern nur den anzuwendenden Grenzwert.
Warum schlägt der Checker eine angepasste Farbe vor?
Ein Vorschlag entsteht, wenn die aktuelle Kombination ihr Ziel verfehlt. Er verändert die Helligkeit einer Farbe und zeigt vor dem Anwenden, welches Verhältnis damit erreicht wird.
Gilt die WCAG-Kontrastanforderung auch für Logos und dekorative Elemente?
Logos und rein dekorative Elemente sind von der Text-Kontrastanforderung ausgenommen. Informative Symbole und Bedienflächen können dagegen eine eigene 3:1-Prüfung benötigen.
Ein falsch beurteiltes Farbpaar gefunden?
Jetzt den Kontrast-Checker verwenden
Mit dem Kontrast-Checker lassen sich knappe Grautöne, Formularlabels und Markenfarben vor der Veröffentlichung nachprüfen.
Aktuelle Werte kopieren oder eine vorgeschlagene Farbe erst ansehen und dann bewusst übernehmen.
Lokale WCAG-2.x-Prüfung eines Farbpaars.