Kontrast Checker
Text- und Hintergrundfarben prüfen

Welches Kontrastverhältnis ist gut für Text?

Zudem zielen Sie auf mindestens 4.5:1 für normalen Text, das ist WCAG-Stufe AA. Für langes Lesen ist dagegen 7:1 oder mehr besser, und das ist Stufe AAA.

Ist dieser Kontrast Checker kostenlos?

Ja. Er ist kostenlos, braucht kein Konto und hat keine Grenze für die Zahl der Farbpaare.

Werden meine Farben irgendwohin gesendet?

Nein. Die ganze Prüfung läuft in Ihrem Browser-Tab, deshalb erreichen Ihre Farben nie unseren Server.

Ist ein colour contrast checker dasselbe Tool?

Ja. Colour ist die britische Schreibweise von color, daher erledigt so ein Tool genau dieselbe Arbeit wie diese Seite.

Was zählt als großer Text?

Text ab 24px, oder ab 18.66px in Fettschrift. Diese Größen entsprechen 18 und 14 Punkt.

Welche Formate kann ich eingeben?

Hex mit 3, 4, 6 oder 8 Stellen, rgb(), rgba(), hsl(), hsla() und die CSS-Farbnamen wie navy oder tomato.

Wie geht das Tool mit Transparenz um?

Zuerst wird eine durchscheinende Textfarbe mit dem Hintergrund gemischt, danach folgt die Prüfung. Ebenso wird ein durchscheinender Hintergrund vorher mit Weiß gemischt.

Warum zeigt das Tool 4.49 und nicht 4.5?

Das Verhältnis wird nach zwei Dezimalstellen abgeschnitten und nie aufgerundet. Deshalb zeigt ein Paar knapp unter der Linie eine Zahl unter der Linie und fällt durch.

Ändert ein Tausch der Farben das Verhältnis?

Nein. Das WCAG-Verhältnis bleibt in beide Richtungen gleich. Allerdings ändern sich die Vorschau und der APCA-Wert, weil APCA darauf achtet, welche Farbe oben liegt.

Was ist APCA?

APCA ist die Kontrastmethode aus dem Arbeitsentwurf von WCAG 3. Sie liefert einen Lc-Wert, der von der Textgröße und von der oberen Farbe abhängt.

Soll ich APCA oder WCAG 2 folgen?

Folgen Sie heute WCAG 2, denn Gesetze und Audits beziehen sich darauf. Außerdem nutzen Sie APCA nur als zusätzlichen Hinweis, da es noch ein Entwurf ist.

Brauchen auch Icons und Buttons Kontrast?

Ja. WCAG 2.1 hat eine 3:1-Regel für Icons, Ränder von Formularfeldern, Fokusringe und andere wichtige Teile eingeführt.

Muss ein deaktivierter Button bestehen?

Nein. WCAG nimmt inaktive Bedienelemente aus. Trotzdem sollten sie lesbar bleiben, denn Nutzer müssen wissen, dass es das Element gibt.

Was ist mit Logos und dekorativem Text?

Logos und reine Dekoration sind ausgenommen. Jeder Text mit Bedeutung muss dagegen bestehen, auch das Kleingedruckte.

Wie funktionieren die vorgeschlagenen Korrekturen?

Das Tool behält Farbton und Sättigung und ändert nur die Helligkeit. Danach wählt es den nächsten Schritt, der AA oder AAA erreicht.

Kann ich eine Farbe vom Bildschirm aufnehmen?

Ja, in Chrome und Edge. Der Button Vom Bildschirm wählen nutzt die Pipette des Browsers. In anderen Browsern nutzen Sie stattdessen das Farbfeld oder einen Code.

Was zeigt die Tabelle zur Farbenblindheit?

Sie zeigt das Paar so, wie Menschen ohne rote, grüne oder blaue Zapfen es sehen, und ganz ohne Farbsehen. Außerdem hat jede Zeile ihr eigenes Verhältnis.

Wie häufig ist Farbenblindheit?

Etwa 1 von 12 Männern und 1 von 200 Frauen hat eine Form der Farbsehschwäche. Am häufigsten ist dabei die Verwechslung von Rot und Grün.

Kann ich eine ganze Palette testen?

Ja. Danach fügen Sie bis zu 12 Farben in das Palettenfeld ein, eine pro Zeile, und klicken Sie auf Alle Paare prüfen. So erhalten Sie ein bewertetes Raster.

Wie teste ich Text auf einem Verlauf oder Foto?

Wählen Sie den hellsten Punkt hinter hellem Text oder den dunkelsten Punkt hinter dunklem Text. Wenn der schlechteste Punkt besteht, besteht auch der Rest.

Ist WCAG-Kontrast gesetzlich vorgeschrieben?

In vielen Ländern ja. Section 508 in den USA und die EU-Norm EN 301 549 verweisen auf WCAG-Stufe AA, und in Deutschland gilt zudem das BFSG.

Hat WCAG 2.2 die Kontrastregeln geändert?

Nein. WCAG 2.2 behält dieselben Kontrastwerte wie WCAG 2.1, daher besteht ein Paar, das vorher bestanden hat, auch jetzt.

Warum zeigen andere Tools eine leicht andere Zahl?

Manche runden auf eine Dezimalstelle, und manche nutzen einen älteren Grenzwert in der Formel. Der Unterschied ist winzig, kann aber ein Paar direkt an der Linie kippen.

Kann ich ein Ergebnis teilen?

Ja. Link zu diesem Paar kopieren liefert eine Adresse, die diese Seite mit denselben zwei Farben öffnet.

Ersetzt das ein vollständiges Barrierefreiheits-Audit?

Nein. Dieser WCAG Kontrast Checker prüft nur Farben. Ein vollständiges Audit prüft dagegen auch Tastaturbedienung, Überschriften, Alt-Texte und vieles mehr.