Eine barrierefreie Website ist eine Website, die alle Menschen unabhängig von Seh-, Hör- oder motorischen Einschränkungen bedienen können. Bei Farben bedeutet das vor allem: ausreichender Kontrast zwischen Text und Hintergrund und keine Information, die allein über Farbe transportiert wird. Der Mindestkontrast für normalen Text liegt laut WCAG bei 4,5:1.
Was macht eine barrierefreie Website in Bezug auf Farbe aus?
Barrierefreiheit bei Farbe heißt: Inhalte bleiben lesbar und verständlich, auch für Menschen mit Sehschwäche oder Farbfehlsichtigkeit. Rund 8 % der Männer und 0,5 % der Frauen sind laut Wikipedia zur Farbenfehlsichtigkeit von einer Rot-Grün-Schwäche betroffen.
Das Web Content Accessibility Guidelines (WCAG) ist ein internationaler Standard des W3C, der prüfbare Kriterien für zugängliche Webinhalte festlegt. Er ist in Deutschland über das Barrierefreiheitsstärkungsgesetz (BFSG) für viele Unternehmen ab dem 28. Juni 2025 verbindlich.
Farbe darf demnach nie das einzige Unterscheidungsmerkmal sein. Ein rotes Pflichtfeld braucht zusätzlich ein Symbol oder Text, sonst erkennt es ein farbenblinder Nutzer nicht.
Wie hoch muss der Kontrast für eine barrierefreie Website sein?
Der Kontrast muss bei normalem Text mindestens 4,5:1 betragen, bei großem Text ab 18 Punkt oder 14 Punkt fett mindestens 3:1. Diese Werte legt die WCAG-Konformitätsstufe AA fest.
Kontrastverhältnis ist das Helligkeitsverhältnis zwischen Vordergrund- und Hintergrundfarbe, angegeben von 1:1 (kein Unterschied) bis 21:1 (Schwarz auf Weiß). Für die höhere Stufe AAA steigt die Anforderung auf 7:1 für normalen Text.
Die genaue Formel zur Berechnung findest du in den offiziellen WCAG-2.1-Richtlinien des W3C. Wie du diese Werte praktisch überprüfst, zeigt der Beitrag Kontrastverhältnis Text Hintergrund prüfen.
| Textart | WCAG AA | WCAG AAA |
|---|---|---|
| Normaler Text (unter 18 pt) | 4,5:1 | 7:1 |
| Großer Text (ab 18 pt / 14 pt fett) | 3:1 | 4,5:1 |
| Grafische Elemente & Bedienelemente | 3:1 | 3:1 |
Welche Farben eignen sich für eine barrierefreie Website?
Geeignet sind Farbkombinationen mit hohem Helligkeitsunterschied, etwa dunkles Anthrazit auf Hellgrau statt Grau auf Weiß. Reines Schwarz auf reinem Weiß (21:1) ist maximal kontrastreich, wirkt aber für manche Nutzer zu hart.
Vermeide Rot-Grün-Paare als einzige Unterscheidung, weil sie bei Rot-Grün-Schwäche verschmelzen. Sichere Alternativen sind Blau-Orange oder Blau-Gelb, die auch bei den häufigsten Farbfehlsichtigkeiten unterscheidbar bleiben.
Ein durchdachtes Farbsystem beginnt beim Grundgerüst. Wie du ein passendes Farbschema für deine Website erstellen kannst, das von Anfang an zugänglich ist, erklärt der verlinkte Leitfaden Schritt für Schritt.
Farbcodierung immer doppelt absichern
Kombiniere Farbe stets mit einem zweiten Signal: Text, Icon, Muster oder Unterstreichung. Ein Diagramm mit farbigen Linien wird zugänglich, wenn jede Linie zusätzlich eine eigene Strichart oder Beschriftung erhält.
Links im Fließtext sollten nicht nur farbig, sondern auch unterstrichen sein. So erkennt jeder Nutzer den Link, unabhängig von der Farbwahrnehmung.
Wie teste ich meine Website auf Barrierefreiheit bei Farben?
Prüfe jede Text-Hintergrund-Kombination mit einem Kontrast-Checker und simuliere Farbfehlsichtigkeiten mit einem Simulator. Beide Schritte decken zusammen die häufigsten Farbprobleme ab.
Ein Farbenblindheit-Simulator zeigt, wie deine Seite bei Deuteranopie oder Protanopie aussieht. Praktische Werkzeuge dafür stellt der Beitrag Farbenblindheit Simulator im Webdesign vor.
Ergänzend hilft ein Blick auf harmonische Farbbeziehungen: Der Artikel Komplementärfarben im Farbkreis finden zeigt, wie du kontrastreiche und zugleich stimmige Paare bildest.
Praktische Schritte für den Alltag
Beginne mit den Hauptelementen: Fließtext, Überschriften, Buttons und Formularfelder. Diese vier Bereiche entscheiden über die grundlegende Lesbarkeit.
Teste anschließend die Fokus-Zustände. Ein sichtbarer Fokusrahmen mit mindestens 3:1 Kontrast ist Pflicht, damit Tastaturnutzer die aktive Stelle erkennen.
Häufig gestellte Fragen (FAQ)
Ist eine barrierefreie Website in Deutschland Pflicht?
Für öffentliche Stellen gilt Barrierefreiheit bereits seit Jahren. Mit dem Barrierefreiheitsstärkungsgesetz sind ab dem 28. Juni 2025 auch viele private Unternehmen im E-Commerce und bei digitalen Dienstleistungen verpflichtet, ihre Angebote zugänglich zu gestalten. Kleinstunternehmen mit weniger als zehn Beschäftigten und unter zwei Millionen Euro Jahresumsatz sind bei Dienstleistungen teilweise ausgenommen.
Reicht schwarzer Text auf weißem Grund für Barrierefreiheit?
Schwarz auf Weiß erreicht mit 21:1 den höchsten möglichen Kontrast und erfüllt alle WCAG-Stufen. Barrierefreiheit umfasst aber mehr als Kontrast: Auch Schriftgröße, Zeilenabstand, verständliche Sprache und die Bedienbarkeit per Tastatur gehören dazu. Farbe ist nur ein Baustein von mehreren.
Wie erkenne ich, ob mein Kontrast zu niedrig ist?
Nutze einen Kontrast-Checker, der Vorder- und Hintergrundfarbe als Verhältnis ausgibt. Liegt der Wert für normalen Text unter 4,5:1, ist der Kontrast zu niedrig. Ein einfacher Praxistest: Wenn du den Text bei reduzierter Bildschirmhelligkeit oder im Sonnenlicht schlecht liest, ist der Kontrast meist unzureichend.
Welche Farbkombinationen sollte ich bei Farbenblindheit vermeiden?
Vermeide Rot-Grün als einziges Unterscheidungsmerkmal, da diese Kombination bei der häufigsten Rot-Grün-Schwäche verschmilzt. Auch Grün-Braun und Blau-Violett sind kritisch. Sicherer sind Blau-Orange und Blau-Gelb. Ergänze farbliche Signale grundsätzlich mit Symbolen, Text oder Mustern, damit die Information nicht verloren geht.
Fazit
Eine barrierefreie Website beginnt bei Farbe mit zwei Regeln: genug Kontrast (mindestens 4,5:1 für Text) und keine Information allein über Farbe. Beides ist mit Kontrast-Checker und Farbenblindheit-Simulator in wenigen Minuten prüfbar.
Setze deine Farben von Grund auf zugänglich auf und teste sie systematisch. Starte am besten damit, ein durchdachtes farbschema für website erstellen zu lassen und die Kontrastwerte direkt zu kontrollieren.