Prüfpunkt 1.4.3Stufe AAFarbe und Kontrast
Markenfarbe zu hell für Text: was tun?
Eine helle Markenfarbe bleibt Ihre Markenfarbe. Sie wandert auf Flächen, Rahmen und Symbole, und der Text darauf wird dunkel. Weiße Schrift auf einem hellen Orange wie #f28c28 erreicht 2,45:1; dunkle Schrift (#1d1d1b) auf derselben Farbe erreicht 6,88:1. Die Farbe bleibt, nur die Schrift ändert sich. Was die Regel vom Logo verlangt und was von Knöpfen, steht unten.
Das Logo ist frei, der Rest nicht
Das W3C nimmt Text aus, der Teil eines Logos oder Markennamens ist: Für ihn gibt es keine Kontrastanforderung. Dieselbe Erläuterung sagt aber ebenso klar, dass Text, der wegen einer Markenrichtlinie zu wenig Kontrast hat, nicht ausgenommen ist, wenn er kein Logo ist. Der Schriftzug im Kopf der Seite darf also hell auf hell bleiben. Der Werbesatz darunter, das Menü in Markenfarbe und die Beschriftung der Knöpfe brauchen die Schwelle: 4,5:1 für normalen Text, 3:1 für großen Text ab etwa 24 Pixel oder fett ab etwa 18,5 Pixel.
Flächen in Markenfarbe, Schrift in Dunkel
Die einfachste Lösung lässt die Farbe, wo sie ist, und ändert die Schrift. Ein Kasten in Orange #f28c28 mit weißer Schrift erreicht 2,45:1; mit fast schwarzer Schrift #1d1d1b erreicht er 6,88:1. Ein Grün wie #2ecc71 kommt mit weißer Schrift auf 2,10:1, mit dunkler Schrift auf 8,03:1. Weiße Schrift bleibt dort richtig, wo die Markenfarbe dunkel genug ist: Ein Blau #1a5fb4 erreicht mit Weiß 6,29:1, ein Rot #e4002b 4,85:1. Die Werte stammen aus der Formel von WCAG 2.2; jedes Kontrastwerkzeug rechnet sie in Sekunden nach.
Eine dunklere Schwester für Text in Markenfarbe
Überschriften und Links sollen oft in der Markenfarbe stehen, auf weißem Grund. Dann braucht die Farbe selbst genug Tiefe. Ein helles Blau #3b82f6 erreicht auf Weiß 3,68:1 und reicht damit nur für großen Text; die dunklere Abstufung #1d4ed8 erreicht 6,70:1 und ist für jede Schriftgröße geeignet. So entsteht ein Paar: die helle Markenfarbe für Flächen, Rahmen und Symbole, die dunkle Schwester für Text. Beide gehören ins Gestaltungshandbuch, mit dem gemessenen Wert daneben, damit die nächste Seite sie übernimmt.
Der Kaufen-Knopf ist die teuerste Stelle
Der Knopf, der zum Warenkorb führt oder das Formular absendet, steht fast immer in der Markenfarbe, und seine Beschriftung ist oft weiß. Ist die Farbe hell, liest ein Besucher mit nachlassender Sehkraft die Beschriftung nicht, und ein Kunde am Handy in der Sonne auch nicht. Er sucht, zögert, geht. Der Ausweg kostet nichts: Das W3C verlangt für die Beschriftung 4,5:1 gegen die Knopffarbe, einen eigenen Rahmen um den Knopf verlangt es nicht, solange der Knopf anders erkennbar ist. Die Markenfarbe bleibt als Fläche, die Schrift wird dunkel, und der Knopf ist lesbar.
Beispiele
Knopf in heller Markenfarbe
.knopf { color: #fff; background: #f28c28; } /* 2,45:1 */.knopf { color: #1d1d1b; background: #f28c28; } /* 6,88:1 */Die Fläche behält die Markenfarbe. Die Beschriftung wechselt von Weiß auf fast Schwarz und erreicht die Schwelle 4,5:1.
Mehr zu diesem Thema
- Welcher Farbkontrast ist für Text auf Websites vorgeschrieben?Normaler Text braucht mindestens 4,5:1 Kontrast zum Hintergrund, großer Text 3:1. Hellgrau auf Weiß fällt fast immer durch und bleibt unlesbar.
- Warum verlangt WCAG genau 4,5:1 Kontrast?4,5:1 ist eine Rechnung: 3:1 aus Normen für Bildschirmarbeit, mal 1,5 für eine Sehschärfe von 20/40, die das W3C als typisch für Menschen um 80 nennt.
- Kontrast prüfen: welche Werkzeuge gibt es?Zwei Farbwerte prüft der Contrast Checker von WebAIM, eine ganze Seite die Entwicklerwerkzeuge von Chrome. Text auf Fotos misst keines von beiden.
Weiter im Prüfbereich Barrierefreiheit
- Wie stelle ich meine Website auf barrierefrei um?Was WordPress, TYPO3, Drupal, Joomla, Shopify und Wix zur Barrierefreiheit zusagen und was Vorlage, Erweiterungen und Redaktion selbst leisten.
- Wie viele meiner Besucher erreicht meine Website nicht?Fast ein Viertel der Erwachsenen in der EU ist im Alltag eingeschränkt. Die Zahlen für Österreich, Deutschland und die EU und was sie für Ihre Website heißen.
- Muss sich Text auf einer Website auf 200 Prozent vergrößern lassen?Ja. Besucher müssen Text per Browser-Zoom verdoppeln können, ohne dass Inhalte verloren gehen. Zoom-Sperren am Handy erfüllen die Regel nicht.
- Warum ist echter Text auf Websites besser als Text im Bild?Text als Bild lässt sich weder vorlesen noch vergrößern noch von Google durchsuchen. Echter Text kann alles davon und ist leichter zu pflegen.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
