Die Logofarbe wurde für das Schild über der Tür, den Briefkopf und den Firmenwagen ausgesucht, nicht für Fließtext auf weißem Grund. Trotzdem landet sie auf vielen Websites unverändert in Überschriften, Links und Knöpfen, und genau dort wird sie zum Problem. Auf 83,9 Prozent der Startseiten der eine Million meistbesuchten Websites fand WebAIM im Februar 2026 Text mit zu schwachem Kontrast, ein Jahr zuvor waren es 79,1 Prozent (WebAIM Million 2026). Zu schwacher Kontrast war damit der am häufigsten gefundene Barrierefreiheitsfehler der Untersuchung. Dieser Beitrag zeigt, wie aus einer einzigen Markenfarbe eine Webpalette mit klaren Rollen wird: eine Farbe für Text und Links, eine für Flächen, eine für Knöpfe, ein Akzent für Linien und Hervorhebungen und eine für den Fokus. Dazu kommen die Schwellenwerte der WCAG, ein durchgerechnetes Beispiel, die Stellen, an denen Farbe nicht das einzige Signal sein darf, und ein Prüfplan für die eigene Website.
Warum die Logofarbe allein nicht reicht
WebAIM prüft jedes Jahr die Startseiten der eine Million meistbesuchten Websites automatisiert mit dem Prüfwerkzeug WAVE.
Im Februar 2026 fand die Untersuchung auf jeder Startseite im Durchschnitt 34 verschiedene Stellen mit zu kontrastarmem Text, 15 Prozent mehr als 2025 (WebAIM Million 2026). Auf 95,9 Prozent der Startseiten erkannte das Werkzeug mindestens einen Verstoß gegen die WCAG 2 (WebAIM Million 2026). Weil automatisierte Werkzeuge nicht jeden Verstoß erkennen, ist das eine Untergrenze und kein vollständiges Bild. Der HTTP Archive Web Almanac kommt mit einem anderen Messverfahren zu einer ähnlichen Lage: Nur 31 Prozent der mobilen Websites erfüllen die Mindestanforderungen an den Farbkontrast (HTTP Archive Web Almanac 2025). Wie Schriftgröße und Kontrast auf dem Telefon zusammenspielen, beschreibt der Beitrag Website auf dem Handy: lesbar und leicht bedienbar.
Dass ausgerechnet der Kontrast so oft scheitert, hat einen einfachen Grund. Markenfarben werden nach Wiedererkennung ausgesucht: ein frisches Grün, ein warmes Orange, ein helles Blau, das auf dem Fahrzeug aus zwanzig Metern auffällt. Diese mittelhellen, kräftigen Töne leuchten als Fläche, als Schrift auf Weiß sind sie oft zu hell. Ein kleiner Betrieb übernimmt die Logofarbe dann für alles: für Überschriften, Links, den Knopf „Termin anfragen“, den Hintergrund eines Bandes und die Linie unter dem aktiven Menüpunkt. Jede dieser Stellen hat eine andere Aufgabe und braucht damit einen anderen Helligkeitswert. Am deutlichsten sieht man das auf der Startseite, wo Markenfarbe, Hauptbotschaft und Knopf auf engem Raum zusammenkommen; was in diesen ersten Bildschirm der Startseite gehört, steht in einem eigenen Beitrag.
Das Logo ist ausgenommen, die Schrift nicht
Was 4,5:1 bedeutet
Das Kontrastverhältnis vergleicht die relative Helligkeit zweier Farben. Es reicht von 1:1 bei zwei gleichen Farben bis 21:1 bei Schwarz auf Weiß (W3C, WCAG 2.2).
Die WCAG 2.2 legen für die Stufe AA fest, dass normaler Text mindestens 4,5:1 erreicht (W3C, WCAG 2.2); großer Text kommt mit 3:1 aus (W3C, WCAG 2.2). Als groß gilt Text ab 18 Punkt oder ab 14 Punkt fett, in CSS-Pixeln sind das etwa 24 Pixel beziehungsweise 18,5 Pixel (W3C, Understanding WCAG 2.2). Für die höchste Stufe AAA verlangen die Richtlinien 7:1 für normalen Text (W3C, WCAG 2.2). Bedienelemente und Grafiken, die zum Verständnis nötig sind, brauchen mindestens 3:1 gegenüber den angrenzenden Farben (W3C, WCAG 2.2). Wie sich die Schriftwahl auf die Lesbarkeit auswirkt und welche Schriften sich gut kombinieren lassen, zeigt der Beitrag Schriften für die Website wählen.
Die Zahl ist nicht willkürlich gewählt. Nach der Begründung des W3C gleicht 4,5:1 den Verlust an Kontrastempfindlichkeit aus, den Menschen mit einer Sehschärfe von etwa 20/40 haben, als Dezimalwert 0,5 (W3C, Understanding WCAG 2.2). Diese Sehschärfe gilt laut W3C als typischer Wert für ältere Menschen um 80 Jahre (W3C, Understanding WCAG 2.2). Die Stufe AAA mit 7:1 ist auf eine Sehschärfe von etwa 20/80 ausgelegt (W3C, Understanding WCAG 2.2). Wer dabei nur an eine kleine Gruppe denkt, unterschätzt die Lage. Zum Jahresende 2025 lebten in Deutschland gut 7,8 Millionen Menschen mit schwerer Behinderung (Statistisches Bundesamt), gut ein Drittel von ihnen, 34 Prozent, war 75 Jahre und älter (Statistisches Bundesamt). Bei 4 Prozent der schwerbehinderten Menschen war Blindheit oder eine Sehbehinderung die schwerste Behinderung (Statistisches Bundesamt). Dazu kommen alle, die nicht als schwerbehindert erfasst sind und trotzdem schlechter sehen: ältere Kundinnen und Kunden, Menschen mit Farbsehschwäche, nach Angaben des US-amerikanischen National Eye Institute etwa einer von zwölf Männern (National Eye Institute), und alle, die das Telefon in der Mittagssonne halten.
Tabelle waagerecht wischen
| Element | Mindestkontrast nach WCAG 2.2 | Erfolgskriterium |
|---|---|---|
| Fließtext, Links, Preise, Formularbeschriftungen | 4,5:1 auf Stufe AA, 7:1 auf Stufe AAA | 1.4.3 und 1.4.6 |
| Großer Text ab etwa 24 Pixel oder 18,5 Pixel fett | 3:1 auf Stufe AA, 4,5:1 auf Stufe AAA | 1.4.3 und 1.4.6 |
| Rahmen von Eingabefeldern, Symbole, Zustände wie Fokus oder Auswahl | 3:1 gegenüber den angrenzenden Farben | 1.4.11 |
| Fokusanzeige | sichtbar auf Stufe AA; auf Stufe AAA mindestens so groß wie ein 2 Pixel breiter Rahmen und 3:1 zwischen fokussiert und nicht fokussiert | 2.4.7 und 2.4.13 |
| Logo und Markenname | keine Anforderung | Ausnahme in 1.4.3 |
| Deaktivierte Bedienelemente und reine Dekoration | keine Anforderung | Ausnahmen in 1.4.3 und 1.4.11 |
Aus einer Markenfarbe wird eine Palette mit Rollen
Der Ausweg ist nicht, die Markenfarbe aufzugeben, sondern sie in Stufen zu denken.
Farbton und Sättigung bleiben, die Helligkeit wird je Einsatz angepasst: dunkler für Schrift, sehr hell für Flächen, unverändert dort, wo die Farbe als Fläche, Linie oder große Zahl wirkt. So entsteht eine Familie von Farben, die erkennbar zur Marke gehört und an jeder Stelle lesbar bleibt. Hilfreich ist, die Palette nicht nach Farbnamen, sondern nach Rollen zu benennen. Wer einmal festlegt, welche Farbe Text trägt, welche Knöpfe füllt und welche den Fokus zeigt, entscheidet beim nächsten Baustein nicht mehr nach Gefühl, und neue Seiten passen zu den bestehenden.
- Text und Links: die dunkle Stufe der Markenfarbe, die auf Weiß mindestens 4,5:1 erreicht. Links im Fließtext bekommen zusätzlich eine Unterstreichung.
- Fläche: eine sehr helle Stufe für Bänder, Karten und Hinweiskästen. Darauf steht dunkle Schrift, und auch diese Kombination wird gemessen.
- Knopf: eine dunkle, satte Stufe als Knopffläche mit weißer Schrift oder eine helle Stufe mit dunkler Schrift. Gemessen wird die Beschriftung gegen die Knopffläche.
- Akzent: die Logofarbe selbst oder eine Zweitfarbe für Linien, Symbole, Flächen und große Zahlen, also dort, wo sie nicht als kleiner Text gelesen werden muss.
- Fokus: eine Farbe für den Rahmen um das gerade angesteuerte Element, die sich vom Seitenhintergrund und vom Element selbst abhebt.
- Zustände: Abstufungen für Überfahren mit der Maus, gedrückt, ausgewählt und Fehler, jeweils mit eigener Messung.
Ein durchgerechnetes Beispiel zeigt, wie groß die Unterschiede sind. Angenommen, ein Betrieb führt das Logogrün #17A98D. Alle Verhältnisse in der Tabelle sind mit der Formel der WCAG berechnet und lassen sich mit jedem Kontrastrechner nachvollziehen. Zwei Dinge fallen auf. Erstens reicht das Logogrün als Schrift auf Weiß mit 2,96:1 nicht einmal für große Überschriften; gegen Schwarz erreicht dieselbe Farbe 7,10:1. Eine Farbe ist also nicht gut oder schlecht, sie passt zu bestimmten Hintergründen. Zweitens fällt ein Knopf in Logogrün mit weißer Beschriftung durch, mit dunkler Beschriftung in #00312B besteht er. Wer die Logofarbe für Knöpfe behalten will, ändert die Schriftfarbe, nicht die Marke. Wer weiße Beschriftung möchte, nimmt für die Knopffläche eine dunklere Stufe derselben Farbe.
Tabelle waagerecht wischen
| Rolle | Kombination | Verhältnis | Bewertung |
|---|---|---|---|
| Logofarbe als Schrift | #17A98D auf Weiß | 2,96:1 | reicht weder für Fließtext noch für großen Text |
| Logofarbe als Fläche | Schrift #00312B auf #17A98D | 4,81:1 | besteht AA für Fließtext |
| Text und Links | #006B5A auf Weiß | 6,46:1 | besteht AA |
| Knopf | Weiß auf #004D43 | 9,80:1 | besteht AA und AAA |
| Helle Fläche | #004D43 auf #E6F6F2 | 8,79:1 | besteht AA und AAA |
| Akzent Gold als Schrift | #ACA316 auf Weiß | 2,62:1 | zu schwach für Schrift und Bedienelemente, nur als Schmuckfläche |
| Fokusrahmen | #004D43 gegen Weiß | 9,80:1 | deutlich über 3:1 |
Knöpfe, Links und Zustände
Ein Knopf besteht für die Prüfung aus zwei Kombinationen: der Beschriftung auf der Knopffläche und der Knopffläche auf dem Seitenhintergrund. Die Beschriftung ist Text und braucht 4,5:1.
Ob die Fläche selbst 3:1 gegenüber dem Hintergrund braucht, hängt davon ab, ob man den Knopf ohne seine Umrisse noch als Knopf erkennt. Ein hellgrauer Kasten mit hellgrauer Kante auf weißem Grund wird in der Praxis leicht übersehen; wer beide Werte erreicht, muss darüber nicht diskutieren. Bei Links im Fließtext kommt eine zweite Regel dazu: Farbe darf nicht das einzige visuelle Mittel sein, um ein Element zu unterscheiden (W3C, WCAG 2.2). Ein Link, der sich nur im Farbton vom umgebenden Text unterscheidet, braucht deshalb ein zweites Merkmal; als solches zählt nach dem W3C auch ein Helligkeitsunterschied mit einem Kontrastverhältnis von mindestens 3:1 zum umgebenden Text (W3C, Understanding WCAG 2.2). Am einfachsten zu erkennen bleibt die Unterstreichung. Für jeden Knopf gehören diese Zustände auf die Prüfliste:
- Normal: Beschriftung gegen Knopffläche mindestens 4,5:1
- Überfahren mit der Maus: Die Fläche darf heller oder dunkler werden, die Beschriftung bleibt dabei über 4,5:1
- Fokus: ein sichtbarer Rahmen mit etwas Abstand zum Knopf, der sich vom Hintergrund abhebt
- Gedrückt und ausgewählt: zusätzlich zur Farbe ein Merkmal wie Haken, Unterstrich oder fette Schrift
- Deaktiviert: von der Kontrastanforderung ausgenommen, aber mit einem Hinweis, warum der Knopf gerade nicht reagiert
- Fehler: ein roter Rahmen, ergänzt um einen Text, der den Fehler benennt
Besonders oft geht dabei der Fokus verloren. 67 Prozent der Websites entfernen den voreingestellten Fokusrahmen des Browsers ausdrücklich per CSS (HTTP Archive Web Almanac 2025). Setzt die Seite keinen eigenen Fokusstil an seine Stelle, verschwindet für Menschen, die mit der Tastatur navigieren, die Anzeige, wo sie sich gerade befinden. Die WCAG verlangen auf Stufe AA, dass der Fokus sichtbar ist (W3C, WCAG 2.2); was einen Zustand wie den Fokus erkennbar macht, braucht mindestens 3:1 gegenüber den angrenzenden Farben (W3C, Understanding WCAG 2.2). Im Beispiel scheitert ein goldener Fokusrahmen in #ACA316 mit 2,62:1 auf weißem Grund, ein Rahmen in der dunklen Markenstufe #004D43 erreicht 9,80:1. Einen guten Richtwert liefert die Stufe AAA: eine Fokusanzeige mindestens so groß wie ein 2 Pixel breiter Rahmen um das Element und mit 3:1 zwischen fokussiertem und nicht fokussiertem Zustand (W3C, WCAG 2.2). Wie Zustandswechsel mit Bewegung ruhig bleiben, beschreibt der Beitrag zu Animationen auf der Website. In CSS lässt sich die Palette nach Rollen so festhalten:
/* Palette nach Rollen, nicht nach Farbnamen */
:root {
--color-brand: #17a98d; /* Logofarbe: nur Fläche, Linie, große Zahl */
--color-text: #006b5a; /* 6,46:1 auf Weiß */
--color-button: #004d43; /* weiße Schrift darauf: 9,80:1 */
--color-surface: #e6f6f2; /* #004d43 darauf: 8,79:1 */
--color-accent: #aca316; /* nicht als Schrift auf Weiß (2,62:1) */
--color-focus: #004d43; /* 9,80:1 gegen Weiß */
}
a { color: var(--color-text); text-decoration: underline; text-underline-offset: 0.15em; }
.button { background: var(--color-button); color: #fff; }
.button:hover { background: var(--color-text); } /* weiße Schrift: 6,46:1 */
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }Wo Farbe nicht das einzige Signal sein darf
Die Regel aus dem Abschnitt über Links gilt weit darüber hinaus.
Nach Erfolgskriterium 1.4.1 darf Farbe nicht das einzige visuelle Mittel sein, um eine Information zu vermitteln, eine Aktion anzuzeigen, eine Reaktion anzufordern oder ein Element zu unterscheiden (W3C, WCAG 2.2). Der Grund sind vor allem Farbsehschwächen: Die häufigste Form erschwert es, Rot und Grün zu unterscheiden (National Eye Institute). Ein rot markiertes Pflichtfeld neben einem grünen, ein grüner Punkt für „frei“ und ein roter für „ausgebucht“ sehen für einen Teil der Kundschaft gleich aus. Dazu kommt, dass Farbunterschiede in Graustufen-Ausdrucken, auf matten Displays und in starkem Sonnenlicht verschwimmen. Die Lösung ist in aller Regel dieselbe: Farbe behalten und ein zweites Merkmal ergänzen, also Text, Symbol, Muster oder Form. Wie Fehlermeldungen und Linktexte so formuliert werden, dass sie auch ohne Farbe verständlich sind, zeigt der Beitrag Barrierefreie Texte verständlich schreiben.
Fehlermeldungen
Ein roter Rahmen allein sagt nicht, was falsch ist. Der Satz „Bitte geben Sie eine Telefonnummer an“ unter dem Feld sagt es, auch ohne Farbe.
Pflichtfelder
Ein Sternchen mit einer Erklärung am Anfang des Formulars oder das Wort „Pflichtfeld“ in der Beschriftung, statt nur einer roten Beschriftung.
Links im Fließtext
Die Unterstreichung bleibt. Ein Link, der nur farbig ist, verschwindet für Menschen mit Farbsehschwäche im umgebenden Text.
Status und Verfügbarkeit
„Frei“, „Wenige Plätze“ oder „Ausgebucht“ als Wort neben dem farbigen Punkt, damit die Belegung auch in Graustufen lesbar ist.
Diagramme
Linien mit Beschriftung direkt am Ende, Balken mit Wert, Muster oder Formen statt eines reinen Farbunterschieds zwischen den Reihen.
Aktiver Menüpunkt
Ein Unterstrich, fette Schrift oder eine Markierung an der Seite zeigt, wo man sich befindet, nicht nur eine andere Farbe.
Text auf Bildern, Verläufen und im Dunkelmodus
Auf einfarbigem Grund ist die Messung einfach. Schwieriger wird es, sobald Text auf einem Foto, einem Verlauf oder einem Muster steht.
Dort ändert sich der Hintergrund von Buchstabe zu Buchstabe, und eine Messung an einer einzigen Stelle sagt wenig. Die XICflow-Dokumentation empfiehlt, den Kontrast an der hellsten und an der dunkelsten Stelle eines Verlaufs zu prüfen, nicht nur in der Mitte (XICflow-Dokumentation). Bei Fotos hilft eine halbtransparente dunkle Auflage zwischen Bild und Text, die das Bild dämpft; die Schrift wird dann gegen die hellste Stelle der gedämpften Fläche gemessen. Wer sich diese Arbeit sparen will, setzt den Text neben das Bild statt darauf. Das hat einen zweiten Vorteil: Ein Bildwechsel macht den Text nicht plötzlich unlesbar.
Ein Dunkelmodus verdoppelt die Palette. Dieselbe Farbe verhält sich auf dunklem Grund anders: Im Beispiel erreicht die Textfarbe #006B5A auf Weiß 6,46:1, auf einer dunklen Kartenfläche in #16181C aber nur 2,75:1. Das Logogrün #17A98D, auf Weiß zu schwach, kommt auf derselben dunklen Fläche auf 6,01:1. Im Dunkelmodus wechseln die Rollen also ihre Stufe: Schrift und Links werden heller, Flächen dunkler. Etwa 13 Prozent der Websites nutzen die Abfrage prefers-color-scheme, mit der eine Seite auf die Hell- oder Dunkel-Einstellung des Geräts reagiert (HTTP Archive Web Almanac 2025). Die Abfrage forced-colors, die Hochkontrast-Einstellungen des Systems unterstützt, nutzen 19 Prozent der mobilen Seiten (HTTP Archive Web Almanac 2025). Wer einen Dunkelmodus anbietet, misst ihn wie den hellen: jede Rolle gegen jeden Hintergrund, auf dem sie vorkommt.
Hellgrauer Hilfstext
So prüfen Sie Ihre Farbkombinationen
- Alle Farben der Website mit Hex-Wert notieren: Schrift, Links, Knöpfe, Flächen, Rahmen und Symbole
- Jede Schriftfarbe gegen jeden Hintergrund messen, auf dem sie tatsächlich vorkommt, auch auf getönten Bändern und Karten
- Für jede Kombination unter 4,5:1 entscheiden: dunkler setzen, nur für große Schrift verwenden oder nur als Fläche einsetzen
- Mit der Tabulatortaste durch die Seite gehen und prüfen, ob der Fokus an jeder Stelle sichtbar ist
- Die Seite in Graustufen ansehen: Was dann nicht mehr unterscheidbar ist, hängt nur an der Farbe
- Den Dunkelmodus und Text auf Bildern oder Verläufen gesondert prüfen
- Das Ergebnis als Farbtabelle mit Rollen festhalten, damit neue Seiten dieselben Kombinationen nutzen
Rechtlich ist Kontrast für viele Betriebe mehr als eine Empfehlung. Das Barrierefreiheitsstärkungsgesetz gilt unter anderem für Dienstleistungen im elektronischen Geschäftsverkehr, die für Verbraucher nach dem 28. Juni 2025 erbracht werden (Paragraf 1 Absatz 3 Nummer 5 BFSG). Kleinstunternehmen, die Dienstleistungen anbieten oder erbringen, sind von den Barrierefreiheitsanforderungen ausgenommen (Paragraf 3 Absatz 3 BFSG). Wer darunter fällt, klärt der Beitrag zur BFSG-Ausnahme für Kleinstunternehmen; was das Gesetz für Websites insgesamt bedeutet, steht im Überblick zum BFSG für Unternehmen. Unabhängig von der Rechtslage gilt: Ein Text, den ein Teil der Kundschaft nicht lesen kann, wirkt wie ein Text, der fehlt. Eine Kontrastprüfung muss dabei kein Projekt sein; für die Website eines kleinen Betriebs reicht oft schon die Liste oben.
Markenfarben in XICflow festlegen
In XICflow tragen drei Rollen die Farben einer Website: „Primärfarbe“ für Buttons, Links und Hervorhebungen, „Akzentfarbe“ für Zweitfarbe und Verläufe und „Flächen / Text“ für Hintergründe, Rahmen und Fließtext.
Aus jeder Basisfarbe entstehen elf Stufen von 50 (sehr hell) bis 950 (sehr dunkel); Farbton und Sättigung stammen aus Ihrer Farbe, die Helligkeit folgt einer festen Rampe (XICflow-Dokumentation). Deshalb bleiben Buttons, Rahmen, Hintergründe und Hover-Zustände zueinander stimmig, auch wenn Sie nur eine Farbe ändern. Zur Schriftfarbe wird eine helle Logofarbe dadurch aber nicht von selbst: Zeigt der Farbwähler für eine Farbe zu wenig Kontrast für Fließtext, empfiehlt die Dokumentation, sie als Fläche statt für Schrift zu verwenden oder eine dunklere Basis zu wählen. Für den Dunkelmodus lässt sich je Rolle eine eigene Basisfarbe hinterlegen. Die Einstellungen beschreibt die Dokumentation unter Marke und Design, den Funktionsumfang die Leistungsseite im Abschnitt Flow Design.
Der Farbwähler zeigt zu jeder Farbe die Kontrastverhältnisse „Aa auf Weiß“ und „Aa auf Schwarz“ mit Einstufung: ab 7,0 AAA, ab 4,5 AA, ab 3,0 nur für großen Text, darunter „zu gering“ (XICflow-Dokumentation). Unter „Harmonien“ schlägt er aus der aktuellen Farbe eine Komplementärfarbe, zwei analoge Farben, zwei Triaden- und drei Tetradenfarben vor (XICflow-Dokumentation); in Browsern mit Pipetten-Funktion übernimmt er eine Farbe direkt vom Bildschirm, etwa aus dem Logo. Wer die Farben mit „Farben übernehmen“ aus einer bestehenden Website ableiten lässt, prüft danach den Kontrast im Farbwähler, denn eine aus einem Bildschirmfoto gelesene Farbe erfüllt nicht automatisch die Anforderungen an Fließtext. Beim Veröffentlichen prüft XICflow zusätzlich die Farbkombinationen der Website. Erfüllen einzelne die Lesbarkeits-Anforderungen nicht, wird die Website trotzdem veröffentlicht, und ein Kontrast-Hinweis verweist auf „Marke & Design“, wo Sie nachbessern. Der Hinweis ersetzt den Blick in den Farbwähler nicht, er erinnert daran; Text auf Fotos und Verläufen gehört weiterhin auf die eigene Prüfliste.
Die Marke bleibt, die Stufe wechselt