Praxisleitfaden Textkontrast nach WCAG
Blassen Text wieder lesbar machen
Kontrast messen, die passende Farbe wählen und das Ergebnis erneut prüfen.
color-contrastWCAG 1.4.3
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-color-contrast.html
Befund verstehen
Die Bildunterschrift verschwindet im Hintergrund
Unter den beiden Zahnrädern erläutert ein Satz das gemeinsame Prinzip der Zahlensysteme. Seine graugrüne Schrift unterscheidet sich kaum von der Fläche dahinter. Axe erfasst 12 px Schriftgröße und normales Schriftgewicht: Für diesen Text gilt der Grenzwert für normalen Text.
Warum das relevant ist
Wer geringe Kontraste schlecht erkennt, kann die Erklärung zur Grafik kaum lesen. Der Text ist vorhanden, doch seine Information geht beim visuellen Lesen verloren.
Scanner-Signal
color-contrast meldet an .machine-tag ein Verhältnis von 1,17:1 statt mindestens 4,5:1.
- Regel
color-contrast- Referenz
- WCAG 1.4.3
Gemessener Ausgangszustand
Text: #58635f
Hintergrund: #626e69
Schrift: 12 px, normal
Axe-Messwert: 1,17:1
Erforderlich: mindestens 4,5:1Einen Textstil auf mehreren Flächen prüfen
Ein gemeinsamer Textstil kann auf unterschiedlichen Hintergründen stehen. Prüfen Sie jedes verwendete Farbpaar nach der Änderung erneut.
- Rechner× Befund im Beispiel
- Zahlensysteme× Befund im Beispiel
- Ausstellung Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenMessen Sie die tatsächlichen Text- und Hintergrundfarben jeder betroffenen Variante.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Welcher Kontrast ist für diesen Text erforderlich?
Entscheidend sind die gerenderte Schriftgröße, das Schriftgewicht und die Funktion des Inhalts.
Die Lehrskizze ordnet die beiden gemessenen Zustände ein. Sie ersetzt nicht den Bildnachweis, sondern macht den Sprung vom unzureichenden zum bestandenen Verhältnis direkt vergleichbar.
1,17:1Zwei Zahlensysteme, ein Grundgedanke#58635f auf #626e69
5,31:1Zwei Zahlensysteme, ein Grundgedanke#ffffff auf #626e69
Passende Umsetzung auswählen
Fundstelle ansehen
Der Satz gehört zur Erklärung der Zahnräder
Der vollständige Seiteneinstieg zeigt Überschrift, Einführung und Grafik gemeinsam. Die Markierung grenzt die schwache Bildunterschrift ein; die beiden Zahnräder bleiben als Bezug sichtbar.
„Zwei Zahlensysteme, ein Grundgedanke: Zustand speichern, Regel anwenden, Ergebnis ablesen.“ Dieser Satz erklärt die Grafik. Mit fast gleicher Text- und Hintergrundhelligkeit ist er nur schwer zu erkennen.
Farben korrigieren
Die Schrift auf der vorhandenen Fläche aufhellen
Für diese graugrüne Fläche erreicht weißer Text 5,31:1. Die Korrektur ändert nur die Textfarbe. Inhalt, Hintergrund, Schriftgröße und Position der Bildunterschrift bleiben erhalten.
Fundstelle zuordnen
Ordnen Sie den Vorher-Code dem betroffenen Element Ihrer Website zu.
Änderung umsetzen
Im Designsystem oder CMS Ändern Sie die Textfarbe der Bildunterschrift im zuständigen Stil oder Farbtoken. Prüfen Sie danach alle Stellen, die diesen Stil auf anderen Hintergrundflächen verwenden.
KorrekturvergleichCSS für die Bildunterschrift Vorher
.machine-tag { color: #58635f; background: #626e69; font-size: 0.75rem; }Nachher
.machine-tag { color: #ffffff; background: #626e69; font-size: 0.75rem; }Markierte Zeilen wurden geändert
Änderung nachprüfen
Prüfen Sie die geänderte Seite erneut mit dem Scanner und kontrollieren Sie das Element im Nutzungskontext.
Änderung umsetzen
Farben immer als Paar prüfen
Ein Farbwert allein sagt nichts über den Kontrast aus. Prüfen Sie ihn auf der tatsächlichen Fläche.
- 1
Lesen Sie im Browser die berechnete Textfarbe, Hintergrundfarbe, Schriftgröße und Schriftstärke aus.
- 2
Berücksichtigen Sie Vererbung, Transparenz und überlagerte Flächen; die Farbe im Designentwurf kann vom gerenderten Ergebnis abweichen.
- 3
Passen Sie den zuständigen Stil an und prüfen Sie alle damit gestalteten Beschriftungen auf ihren jeweiligen Hintergründen.
- 4
Kontrollieren Sie nach der Veröffentlichung auch Hover, Fokus, Fehlermeldungen und alternative Farbschemata, sofern diese vorkommen.
Fehlversuche vermeiden
Scheinbar kräftigere Schrift reicht nicht immer
Nur das Schriftgewicht erhöhen
Bei 12 px bleibt die Bildunterschrift unter der Schwelle für großen Text. Auch fett benötigt sie mindestens 4,5:1.
Einen Grenzwert aufrunden
4,499:1 erfüllt 4,5:1 nicht. Entscheiden Sie mit dem ungerundeten Wert; eine gerundete Anzeige ist kein ausreichender Nachweis nahe der Grenze.
Die Schrift zusätzlich transparent machen
Opacity mischt die Textfarbe mit dem Hintergrund. Weiß im CSS kann dadurch deutlich weniger Kontrast erzeugen als im hier gezeigten Beispiel.
Jede Markenfarbe als Ausnahme behandeln
Die Ausnahme für Logos gilt nicht pauschal für Beschriftungen und Fließtext in Markenfarben. Informative Texte brauchen weiterhin ausreichenden Kontrast.
Dieselbe Fundstelle besteht die Kontrastprüfung
Axe misst nach der Änderung 5,31:1 und führt .machine-tag als bestanden. Der Satz ist auf der unveränderten Fläche nun deutlich erkennbar.
So prüfen Sie die Korrektur nach
- Die veröffentlichte Bildunterschrift erneut mit der Regel color-contrast prüfen.
- Bestätigen, dass #ffffff auf #626e69 bei weiterhin 12 px und normalem Schriftgewicht gerendert wird.
- Den Satz im Zusammenhang mit der Grafik lesen und seine Lesbarkeit auch bei Vergrößerung beurteilen.
Das Ergebnis belegt die Korrektur dieser Bildunterschrift. Es bewertet weder alle Texte der Kalibrierseite noch deren vollständige Barrierefreiheit.
Gemessener Zustand nach der Korrektur
Text: #ffffff
Hintergrund: #626e69
Schrift: 12 px, normal
Axe-Messwert: 5,31:1
Ergebnis an .machine-tag: bestandenPrüfgrenzen beachten
Messbare Textfarben und offene Sichtprüfungen
Automatische Kontrastprüfungen sind belastbar, wenn sich Text und Hintergrund eindeutig bestimmen lassen.
Automatisch prüfbar
- Erkennbare Text- und Hintergrundfarben sowie Schriftwerte auswerten.
- Unterschrittene Grenzwerte an konkreten Elementen melden.
- Die geänderte Fundstelle unter denselben Bedingungen erneut messen.
Im Kontext zu entscheiden
- Unklare Befunde bei Bildern, Verläufen und überlagerten Hintergründen untersuchen.
- Texte in Bildern sowie nicht erreichte Dialoge und Interaktionszustände prüfen.
- Ausnahmen fachlich begründen und die praktische Lesbarkeit feiner Schrift beurteilen.