Beispiele für schlechten Farbkontrast, gemessen und behoben
Beispiele für schlechten Farbkontrast
Beispiele für schlechten Farbkontrast und wie du jedes behebst | We.Inc
Acht typische Beispiele für schlechten Farbkontrast aus realistisch wirkenden Shopseiten, jeweils mit berechnetem WCAG-Verhältnis, Fehlerursache und einer Korrektur zum Ausprobieren.
Schlechter Farbkontrast bedeutet, dass die Farbe eines Textes oder Bedienelements zu nah an der Farbe dahinter liegt, sodass viele Besucher ihn kaum lesen können. Die üblichen Verdächtigen sind blassgrauer Text, Weiß auf knalligem Orange oder Grün, Platzhaltertexte und Überschriften auf Fotos. WCAG 2.2 verlangt 4.5:1 für normalen Text; jedes Beispiel unten zeigt sein Verhältnis.
Das Kontrastverhältnis jedes Beispiels vor und nach der Korrektur
Beispiel
Vorher
Nachher
Hellgrauer Fließtext
Platzhaltertext als Beschriftung
Weißer Text auf knallorangem Button
Weißer Text auf hellgrünem Badge
Grauer Text auf grauer Karte
Blauer Markentext auf dunklem Panel
Weiße Überschrift auf hellem Foto
Diese Fehler tauchen auf Websites kleiner Unternehmen ständig auf. Wir haben sie hier mit eigenen Farben nachgebaut, damit du die Zahlen siehst. Jedes Beispiel nennt die Regel, gegen die es verstößt, und im Editor kannst du eine Korrektur ausprobieren und zusehen, wie sich das Verhältnis ändert.
Suche den kleinsten, blassesten Text auf der Seite: Datumsangaben, Bildunterschriften, Footer, Formularhinweise.
Prüfe ihn gegen genau den Hintergrund, auf dem er steht, einschließlich getönter Karten und Banner.
Bei Text auf einem Foto testest du gegen den hellsten Bereich des Bildes hinter den Buchstaben.
Korrigiere zuerst die Helligkeit. Ein dunklerer oder hellerer Ton desselben Farbtons erhält den Markenlook.
Beurteile Kontrast nicht nur auf einem hellen Desktop-Monitor. Sieh dir die Seite draußen auf dem Handy an.
Deaktivierte Buttons sind in WCAG ausgenommen, aber ein aktiver Button darf nie deaktiviert aussehen.
Text bei Hover und Fokus zählt ebenfalls. Das W3C führt Text, der bei Hover oder Tastaturfokus erscheint, ausdrücklich mit auf.
Wenn ein Sale-Banner eine helle Markenfarbe nutzt, setze dunklen statt weißen Text darauf.
Verhältnisse zwischen 3:1 und 4.5:1 reichen für große Überschriften und Icons, nicht für Absätze.
Häufige Fragen
Warum fällt weißer Text auf Orange so oft durch?
Orange und Gelb sind helle Farben, ihre Leuchtdichte liegt also nah an Weiß. Unser Beispiel-Orange #F5A623 erreicht mit weißem Text nur etwa 2:1.
Muss Platzhaltertext den Kontrast erfüllen?
Ja. Die W3C-Erläuterung zum Erfolgskriterium 1.4.3 zählt Platzhaltertext zu dem Text, der abgedeckt ist. Eine sichtbare Beschriftung über dem Feld ist trotzdem das bessere Muster.
Wie prüfe ich Text auf einem Foto?
Miss gegen den Bildbereich direkt hinter dem Text und geh vom hellsten Bereich aus. Das W3C nennt Hintergrundbilder ohne ausreichenden Kontrast ausdrücklich als Fehler.
Ist ein farbiger Link ohne Unterstreichung ein Kontrastfehler?
Es ist ein Problem der Farbverwendung nach Erfolgskriterium 1.4.1, das besagt, dass Farbe nicht das einzige visuelle Mittel zur Vermittlung von Informationen sein darf. Eine Unterstreichung löst es.
Sind ausgegraute, deaktivierte Buttons ein Problem?
Text in inaktiven Bedienelementen hat nach 1.4.3 keine Kontrastanforderung. Achte nur darauf, dass der Button wirklich inaktiv ist und nicht bloß so gestaltet.
Warum diese Fehler so häufig sind
Designs werden oft auf einem großen, hellen Bildschirm abgenommen, auf dem blasser Text noch scharf aussieht. Dieselbe Seite auf einem älteren Handy mit gedimmter Helligkeit erzählt eine andere Geschichte.
Den Rest erledigen Markenfarben. Ein fröhliches Orange oder Limettengrün sieht als Fläche super aus, dann setzt jemand weißen Text darauf, weil Buttons in Markenfarbe meistens so aussehen.
Die Regel, bei der es nicht um Verhältnisse geht
Erfolgskriterium 1.4.1 ist unabhängig von den Verhältnissen: Es verlangt, dass Farbe nie das einzige Mittel ist, mit dem Informationen dargestellt werden. Links, die nur durch Farbe erkennbar sind, Pflichtfelder, die nur rot markiert sind, und Diagramme, die sich nur im Farbton unterscheiden, verstoßen alle dagegen.
Kombiniere Farbe mit etwas anderem: einer Unterstreichung, einem Icon, einer Beschriftung, einem Muster.
Was bei jedem Beispiel schiefgeht
Problem und Korrektur für jedes Beispiel
Beispiel
Warum es durchfällt
Korrektur
Hellgrauer Fließtext
Blassgrau wirkt im Mockup ruhig, verblasst aber auf dem Handy bei Tageslicht.
Dunkle das Grau auf #595959 ab, das erreicht 7:1 auf Weiß.
Platzhaltertext als Beschriftung
Der Hinweis in einem leeren Feld ist meist blass, und WCAG zählt Platzhaltertext ebenfalls zu Text, der Kontrast braucht.
Behalte eine sichtbare Beschriftung über dem Feld und dunkle den Hinweis auf #6B7280 ab.
Weißer Text auf knallorangem Button
Kräftige Mitteltöne wie Orange und Gelb sind hell, deshalb hat weißer Text darauf wenig Kontrast.
Nimm ein gebranntes Orange wie #C2410C oder behalte das knallige Orange und setze dunklen Text darauf.
Weißer Text auf hellgrünem Badge
Erfolgs- und Sale-Badges nutzen oft ein knalliges Grün, auf dem weißer Text nicht funktioniert.
Nimm hinter weißem Text ein tieferes Grün wie #15803D.
Grauer Text auf grauer Karte
Ein Grau, das auf Weiß besteht, kann auf einer getönten Karte durchfallen, weil die Karte dunkler ist als die Seite.
Nimm auf getönten Flächen ein dunkleres Grau, etwa #4B5563.
Blauer Markentext auf dunklem Panel
Ein mittleres Blau, das auf Weiß funktioniert, wird auf Anthrazit trüb: Beide Farben liegen in der Mitte des Helligkeitsbereichs.
Hell das Blau auf dunklen Panels auf #93C5FD auf.
Weiße Überschrift auf hellem Foto
Text auf einem Foto wird gegen die Bildbereiche dahinter geprüft. Ein heller Himmel oder eine weiße Wand lässt weißem Text keine Chance, sich abzuheben.
Setze die Überschrift auf ein einfarbiges oder stark abgedunkeltes Band oder nimm sie aus dem Bild heraus.
Ein Link, der nur durch Farbe erkennbar ist
Wenn sich ein Link vom umgebenden Satz nur durch Farbe unterscheidet, finden ihn Menschen nicht, die die Farben nicht auseinanderhalten können.
Unterstreiche Links im Fließtext. Die Farbe kann bleiben.
Korrekturen in CSS
Lesbare Überschrift auf einem Foto
Ein dunkles Band hinter den Wörtern gibt weißem Text einen gleichmäßigen Hintergrund, egal was das Foto zeigt.
Links, die nicht auf Farbe angewiesen sind
Unterstreiche Links in Absätzen und gib dem Tastaturfokus einen klaren Rahmen.
Vorher-Nachher-Editor
Wähle ein Beispiel und ändere dann die korrigierten Farben, um zu sehen, wie weit du deinen Markenton treiben kannst, bevor er durchfällt.
Beispiel
Textfarbe
Hintergrundfarbe
Kontrast {r}
Link gegenüber Fließtext {r}
Erfüllt 4.5:1 für Fließtext.
Erfüllt nur 3:1, also höchstens für großen Text oder Icons.
Unter 3:1. Für viele Menschen schwer lesbar.
Die Korrektur behält die Farben und ergänzt eine Unterstreichung, damit Farbe nicht mehr das einzige Signal ist.
Keine Hex-Farbe
Diese Woche kostenlose Lieferung ab $50 Bestellwert.
In den Warenkorb
Deine E-Mail-Adresse
Die Frühlingskarte ist da
Lies unsere
Rückgabebedingungen
, bevor du bestellst.
Die Farben werden in deinem Browser mit der WCAG-2.2-Formel geprüft.
Hellgrauer Fließtext
Platzhaltertext als Beschriftung
Weißer Text auf knallorangem Button
Weißer Text auf hellgrünem Badge
Grauer Text auf grauer Karte
Blauer Markentext auf dunklem Panel
Ein Link, der nur durch Farbe erkennbar ist
Blassgrau wirkt im Mockup ruhig, verblasst aber auf dem Handy bei Tageslicht.
Der Hinweis in einem leeren Feld ist meist blass, und WCAG zählt Platzhaltertext ebenfalls zu Text, der Kontrast braucht.
Kräftige Mitteltöne wie Orange und Gelb sind hell, deshalb hat weißer Text darauf wenig Kontrast.
Erfolgs- und Sale-Badges nutzen oft ein knalliges Grün, auf dem weißer Text nicht funktioniert.
Ein Grau, das auf Weiß besteht, kann auf einer getönten Karte durchfallen, weil die Karte dunkler ist als die Seite.
Ein mittleres Blau, das auf Weiß funktioniert, wird auf Anthrazit trüb: Beide Farben liegen in der Mitte des Helligkeitsbereichs.
Wenn sich ein Link vom umgebenden Satz nur durch Farbe unterscheidet, finden ihn Menschen nicht, die die Farben nicht auseinanderhalten können.
Dunkle das Grau auf #595959 ab, das erreicht 7:1 auf Weiß.
Behalte eine sichtbare Beschriftung über dem Feld und dunkle den Hinweis auf #6B7280 ab.
Nimm ein gebranntes Orange wie #C2410C oder behalte das knallige Orange und setze dunklen Text darauf.
Nimm hinter weißem Text ein tieferes Grün wie #15803D.
Nimm auf getönten Flächen ein dunkleres Grau, etwa #4B5563.
Hell das Blau auf dunklen Panels auf #93C5FD auf.
Unterstreiche Links im Fließtext. Die Farbe kann bleiben.