Kontrast prüfen und eine bessere Farbe finden
Kontrast ist der Befund, der auf fast jeder Website auftaucht, und der einzige, der sich mit einer einzigen Zahl entscheiden lässt. Der Rechner misst nach der Formel von WCAG 2.1, wählt die richtige Schwelle für Ihre Schriftgrösse und schlägt eine Farbe vor, die sie erreicht.
Ihr Messwert erscheint hier.
So geht es
- Farben eintragenTextfarbe und Hintergrundfarbe als Hex-Wert. Beide finden Sie in den Entwicklerwerkzeugen des Browsers oder in Ihrem Design-System.
- Schriftgrösse angebenDie Schwelle hängt daran: Ab 24 Pixeln, oder ab 18,66 Pixeln bei fettem Schnitt, gilt Text als gross und die Anforderung sinkt von 4,5:1 auf 3:1.
- Vorschlag übernehmenReicht der Kontrast nicht, wird die Textfarbe so weit abgedunkelt oder aufgehellt, bis die Schwelle erreicht ist. Der Farbton bleibt dabei erhalten.
Welche Schwelle wann gilt
WCAG 2.1 kennt drei Schwellen, und sie werden regelmässig verwechselt. Für Fliesstext gilt nach Erfolgskriterium 1.4.3 Kontrast (Minimum) auf Stufe AA ein Verhältnis von 4,5:1, für grosse Schrift 3:1. Erfolgskriterium 1.4.6 auf Stufe AAA verschärft das auf 7:1 beziehungsweise 4,5:1. Für Bedienelemente, Symbole und Diagramme gilt Erfolgskriterium 1.4.11 Nicht-Text-Kontrast mit 3:1, unabhängig von jeder Schriftgrösse.
Gross ist Schrift nach der Definition von WCAG ab 18 Punkt, also 24 Pixeln, oder ab 14 Punkt fett, also 18,66 Pixeln. Diese Grenze ist der häufigste Grund, warum zwei Werkzeuge dasselbe Farbpaar unterschiedlich bewerten.
Warum ein Scan Kontraste nur teilweise findet
Ein Wert lässt sich nur messen, wo Text- und Hintergrundfarbe zusammen bekannt sind. Im Quelltext ist das bei Inline-Angaben der Fall. Kommen die Farben aus einem Stylesheet, entscheiden Kaskade, Vererbung und der tatsächlich gerenderte Hintergrund darüber, was übereinanderliegt, und das steht nicht im HTML.
Der Scan von BarriereRadar meldet deshalb nur Inline-Paare als Befund und nennt die Lücke ausdrücklich. Für die Farben aus Ihrem Design-System ist dieser Rechner der richtige Weg: Sie prüfen die Paare, die Ihr System überhaupt erzeugt, und zwar einmal statt auf jeder Seite neu.
Häufige Fragen
Gilt 4,5:1 auch für Logos?
Nein. Erfolgskriterium 1.4.3 nimmt Logos und reine Dekoration ausdrücklich aus. Für Bedienelemente und aussagetragende Grafiken gilt 1.4.11 mit 3:1.
Warum ändert der Vorschlag den Farbton nicht?
Weil eine frei gewählte Farbe kein Vorschlag wäre, sondern eine Umgestaltung. Verschoben wird nur die Helligkeit der Textfarbe, und nur so weit, bis die Schwelle erreicht ist.
Was, wenn kein Vorschlag kommt?
Auf mittelgrauem Grund ist eine hohe Schwelle in keine Richtung erreichbar. Dann muss der Hintergrund geändert werden, und das entscheidet Ihr Design, nicht der Rechner.
Alle Funktionen inklusive. Keine Kreditkarte.
Ganze Website prüfenFormel nach WCAG 2.1 · Rechnet ohne Konto · Keine Speicherung
Der Rechner misst nach der Formel von WCAG 2.1 und bewertet einzelne Farbpaare, nicht Ihre Seite. Der Scan von BarriereRadar ist eine automatisierte Erstprüfung und ersetzt weder den vollständigen BITV-/WCAG-Test noch eine Rechtsberatung.