Zu schwache Farbkontraste gehören zu den häufigsten Barrieren im Web. Dabei lassen sie sich mit kostenlosen Werkzeugen in Sekunden messen. Die WCAG verlangen für normalen Text ein Kontrastverhältnis von mindestens 4,5 : 1, für große Schrift und Bedienelemente 3 : 1. Hier lesen Sie, welche Werte wo gelten, wie Sie sie prüfen und wie Sie Markenfarben retten, die knapp durchfallen.
Warum Kontrast so wichtig ist
Ausreichender Kontrast hilft Menschen mit Sehbehinderung, mit Farbsehschwäche und allen, deren Sehkraft mit dem Alter nachlässt. Er hilft aber auch allen anderen: auf dem Smartphone in der Sonne, auf einem älteren Bildschirm oder mit gedimmter Helligkeit am Abend. Hellgrauer Text auf weißem Grund mag elegant aussehen, wird aber schnell zur Zumutung.
Die Anforderungen der WCAG im Überblick
| Was | Mindestkontrast (Stufe AA) | Erhöht (Stufe AAA) | WCAG-Kriterium |
|---|---|---|---|
| Normaler Text | 4,5 : 1 | 7 : 1 | 1.4.3 / 1.4.6 |
| Großer Text: ab 24 px normal oder ab ca. 18,7 px fett | 3 : 1 | 4,5 : 1 | 1.4.3 / 1.4.6 |
| Bedienelemente: Rahmen von Eingabefeldern, Schaltflächen ohne Füllung, Kontrollkästchen, Fokusrahmen | 3 : 1 | – | 1.4.11 |
| Grafiken mit Information: Diagrammlinien, Symbole ohne Text | 3 : 1 | – | 1.4.11 |
Das Kontrastverhältnis reicht von 1 : 1 (gleiche Farbe) bis 21 : 1 (Schwarz auf Weiß). Ausgenommen sind Logos und Schriftzüge von Marken, rein dekorative Elemente sowie deaktivierte Bedienelemente.
So messen Sie den Kontrast
Sie brauchen die Farbwerte von Vordergrund und Hintergrund, zum Beispiel als Hex-Code wie #62667f. Drei kostenlose Wege:
- Browser-Entwicklertools: In Chrome, Edge und Firefox klicken Sie mit der rechten Maustaste auf einen Text und wählen „Untersuchen“. Im Bereich „Styles“ oder „Regeln“ klicken Sie auf das Farbkästchen neben
color. Das Fenster zeigt das Kontrastverhältnis und ob AA und AAA erfüllt sind. - WebAIM Contrast Checker: Auf webaim.org geben Sie zwei Farbwerte ein und sehen sofort das Ergebnis für Text, große Schrift und Bedienelemente. Praktisch, um Farben schon bei der Gestaltung zu prüfen.
- Colour Contrast Analyser: Das kostenlose Programm von TPGi für Windows und macOS hat eine Pipette, mit der Sie Farben überall auf dem Bildschirm aufnehmen, auch in Bildern, PDFs oder Gestaltungsentwürfen.
Wenn Sie eine ganze Seite auf einmal prüfen möchten, zeigt die Browser-Erweiterung WAVE alle Texte mit zu geringem Kontrast direkt auf der Seite an.
Wo Kontrastfehler sich verstecken
- Grauer Fließtext und Bildunterschriften: Ein Grau wie
#999999auf Weiß erreicht nur 2,85 : 1. Erst ab#767676sind es 4,54 : 1. - Platzhaltertext in Formularfeldern: Er ist oft absichtlich blass, muss aber ebenfalls 4,5 : 1 erreichen, wenn er Information enthält.
- Text auf Fotos und Verläufen: Hier ändert sich der Hintergrund von Stelle zu Stelle. Messen Sie an der hellsten (bei weißer Schrift) bzw. dunkelsten Stelle oder legen Sie eine halbtransparente Fläche hinter den Text.
- Zustände von Bedienelementen: Prüfen Sie auch Hover, Fokus und ausgewählte Zustände, etwa den aktiven Reiter oder den Fokusrahmen.
- Rahmen von Eingabefeldern: Ein hellgrauer Rahmen auf Weiß lässt das Feld unsichtbar werden. Er braucht 3 : 1 zum Hintergrund.
- Dunkelmodus: Wer einen dunklen Modus anbietet, muss alle Farbpaare dort erneut prüfen.
Wenn die Markenfarbe nicht reicht
Viele Markenfarben sind leuchtend und hell und fallen deshalb als Textfarbe auf Weiß durch. So ist es auch bei uns: Das kräftige Magenta dieser Website (#ff006e) erreicht auf Weiß nur 3,83 : 1. Für Logo, Dekoration und große Überschriften genügt das, für Fließtext und Links nicht. Wir haben deshalb abgestufte Varianten festgelegt:
| Farbe | Kontrast auf Weiß | Einsatz |
|---|---|---|
Magenta #ff006e | 3,83 : 1 | nur Logo und Dekoration |
Magenta für Schaltflächen #e0005c | 4,86 : 1 | Schaltflächen mit weißer Schrift |
Magenta für Text #d1005a | 5,44 : 1 | Hervorhebungen und Links |
Navy #1f2446 | 15,01 : 1 | Überschriften und Fließtext |
Für die Wirkung der Marke macht der Unterschied kaum etwas aus, für die Lesbarkeit sehr viel. Legen Sie solche Varianten am besten zentral fest, im Styleguide und in den Design-Token Ihres Themes, damit niemand aus Versehen die zu helle Farbe für Text verwendet.
Farbe allein reicht nicht
Unabhängig vom Kontrast darf Farbe nicht das einzige Merkmal sein, an dem man etwas erkennt (WCAG 1.4.1). Links im Fließtext sollten deshalb zusätzlich unterstrichen sein, Pflichtfelder einen Text- oder Sternhinweis haben und Fehlermeldungen in Worten erklärt werden. Diagramme brauchen neben Farben auch Beschriftungen oder Muster. Etwa jeder zwölfte Mann hat eine Farbsehschwäche, meist eine Rot-Grün-Schwäche. Rote und grüne Markierungen sehen dann ohne weiteres Merkmal fast gleich aus.
Häufige Fragen zum Farbkontrast
Welcher Farbkontrast ist für Barrierefreiheit vorgeschrieben?
Nach WCAG 2.2 Stufe AA, die für das Barrierefreiheitsstärkungsgesetz und die BITV 2.0 maßgeblich ist, braucht normaler Text mindestens 4,5 : 1. Große Schrift ab 24 Pixel (oder ab etwa 18,7 Pixel fett) sowie Bedienelemente und informative Grafiken brauchen mindestens 3 : 1.
Gilt die Kontrastanforderung auch für mein Logo?
Nein. Logos und Text, der Teil eines Markennamens ist, sind von den Kontrastanforderungen ausgenommen. Das gilt aber nur für das Logo selbst, nicht für Text in Markenfarbe an anderen Stellen der Website.
Ist mehr Kontrast immer besser?
Meistens ja. Manche Menschen, etwa mit Legasthenie oder bestimmten Formen der Lichtempfindlichkeit, empfinden reines Schwarz auf reinem Weiß aber als anstrengend. Ein sehr dunkles Grau oder Blau auf Weiß, wie das Navy auf dieser Website mit 15 : 1, ist ein guter Kompromiss. Wer mehr Kontrast braucht, kann ihn zusätzlich über die Einstellungen des Betriebssystems erhöhen.
Wie prüfe ich Text auf einem Bild?
Nehmen Sie mit der Pipette des Colour Contrast Analyser die Schriftfarbe und die ungünstigste Stelle des Hintergrunds auf, also die hellste bei heller Schrift. Wenn das Ergebnis nicht reicht, legen Sie eine einfarbige oder halbtransparente Fläche hinter den Text oder setzen Sie den Text neben das Bild.
Quellen
- W3C: Understanding Success Criterion 1.4.3: Contrast (Minimum) (englisch)
- W3C: Understanding Success Criterion 1.4.11: Non-text Contrast (englisch)
- WebAIM: Contrast Checker (englisch)
- TPGi: Colour Contrast Analyser (englisch)
Ihre Farben fallen durch? Wir passen Ihr Farbschema barrierefrei an, ohne dass Ihre Marke an Wiedererkennung verliert. Sprechen Sie uns an.