Farbe ist die häufigste Barriere im Web – und zugleich die am leichtesten zu behebende. In nahezu jedem Audit, das ich begleite, sind zu schwache Kontraste der mit Abstand häufigste Einzelfehler. Das Tückische daran: Kaum ein anderer Aspekt der Barrierefreiheit kollidiert so direkt mit der Markenidentität, denn die schönste Hausfarbe nützt nichts, wenn niemand den Text darauf lesen kann. Barrierefreie Farben sind deshalb kein Verzicht auf Gestaltung, sondern die Kunst, Ästhetik und Lesbarkeit zu versöhnen. In diesem Leitfaden gebe ich Ihnen die konkreten Werte an die Hand, erkläre die zugrunde liegenden WCAG-Kriterien, zeige, wie Sie Farbfehlsichtigkeit und Dark Mode berücksichtigen – und wie Sie Ihre Markenfarben barrierefrei machen, ohne Ihre Identität aufzugeben. Und ich stelle Ihnen das Werkzeug vor, mit dem Sie Kontraste so schnell und gründlich prüfen wie mit keinem anderen am Markt.

Was sind barrierefreie Farben?

Barrierefreie Farben sind Farbkombinationen, die für alle Menschen wahrnehmbar sind – auch für Menschen mit Sehbehinderung, mit altersbedingt nachlassendem Kontrastsehen oder mit Farbfehlsichtigkeit. Zwei Grundregeln stecken dahinter: Erstens muss zwischen Vorder- und Hintergrund ein ausreichender Kontrast bestehen, damit Text und Bedienelemente sich klar abheben. Zweitens darf keine Information allein über Farbe vermittelt werden, weil Menschen, die bestimmte Farben nicht unterscheiden können, sie sonst verlieren.

Wichtig ist dabei das Verständnis, dass barrierefreie Farben nicht bedeuten, auf kräftige oder markante Farben zu verzichten. Es geht nicht um blasse, langweilige Paletten, sondern um die richtige Kombination und den richtigen Einsatz. Ein leuchtendes Markenrot kann großartig als Flächenfarbe funktionieren und gleichzeitig als Textfarbe auf Weiß ungeeignet sein – die Lösung liegt nicht im Verzicht, sondern in der bewussten Wahl, wo welche Farbe steht. Genau diese Verschiebung im Denken – weg vom pauschalen Farbverbot, hin zur kontextabhängigen Entscheidung – ist der Kern guter barrierefreier Farbgestaltung. Eine Farbe ist nämlich nicht für sich genommen zugänglich oder unzugänglich; entscheidend ist stets die Kombination mit ihrem Hintergrund und ihre Funktion auf der Seite.

Warum Farbe die häufigste Barriere ist

Wenn man auswertet, woran Websites bei der Barrierefreiheit am häufigsten scheitern, steht ein Problem mit großem Abstand an der Spitze: zu geringer Textkontrast. Erhebungen wie die jährliche WebAIM-Analyse der meistbesuchten Startseiten zeigen Jahr für Jahr, dass die überwiegende Mehrheit der untersuchten Seiten Kontrastfehler aufweist. Das liegt nicht an mangelndem Können, sondern an einem Zielkonflikt: Moderne, zurückhaltende Designs setzen gern auf hellgraue Schrift, dezente Töne und subtile Abstufungen – genau das, was den Kontrast untergräbt.

Die gute Nachricht ist, dass Farbprobleme zu den am einfachsten zu behebenden Barrieren gehören. Anders als komplexe Tastatur- oder Screenreader-Probleme, die tief im Code sitzen, lässt sich ein Kontrastfehler oft mit einer einzigen geänderten Farbdefinition lösen. Wer barrierefreie Farben von Anfang an einplant, beseitigt also mit überschaubarem Aufwand die häufigste Fehlerquelle überhaupt – ein hervorragendes Aufwand-Wirkungs-Verhältnis. Dieser Umstand macht Farbe zum idealen Einstiegspunkt: Wer mit den Kontrasten beginnt, sieht schnelle, sichtbare Fortschritte und beseitigt zugleich den statistisch häufigsten Mangel – ein motivierender erster Schritt, bevor man sich an die kniffligeren Themen wie Tastaturbedienung und Screenreader-Tauglichkeit wagt.

Die WCAG-Kontrastwerte: 1.4.3 und was dazugehört

Die Anforderungen an den Kontrast sind in den WCAG präzise beziffert, und das macht sie angenehm überprüfbar. Der Kontrast wird als Verhältnis zwischen der Helligkeit zweier Farben ausgedrückt, auf einer Skala von 1:1 (kein Unterschied, etwa Weiß auf Weiß) bis 21:1 (maximaler Unterschied, Schwarz auf Weiß). Die folgende Tabelle fasst die maßgeblichen Erfolgskriterien und ihre Schwellenwerte zusammen.

Zwei Begriffe sind dabei erklärungsbedürftig. „Großer Text“ ist im Sinne der WCAG ab etwa 18 Punkt beziehungsweise 24 Pixel definiert, bei fetter Schrift bereits ab rund 14 Punkt – für solchen Text genügt der geringere Wert von 3:1. Und das oft übersehene Kriterium 1.4.11 erweitert die Kontrastpflicht über Text hinaus auf Bedienelemente: Auch die Umrandung eines Eingabefelds, das Symbol eines Buttons oder die Linien eines Diagramms müssen sich mit mindestens 3:1 abheben. Für die meisten Anwendungsfälle ist die Stufe AA mit ihren Werten von 4,5:1 und 3:1 der maßgebliche und auch rechtlich relevante Maßstab.

Ein wenig bekanntes Detail rundet das Bild ab: Nicht alles muss diese Werte erfüllen. Die WCAG nehmen inaktive, ausgegraute Bedienelemente sowie rein dekorative Elemente ausdrücklich von der Kontrastpflicht aus – ein deaktivierter Button darf also blass sein, ohne gegen 1.4.3 oder 1.4.11 zu verstoßen. In Audits sehe ich regelmäßig den umgekehrten Fehler: Teams „reparieren“ mühsam den Kontrast deaktivierter Schaltflächen und wundern sich, dass die Bedienführung leidet – obwohl die Norm das gar nicht verlangt. Wichtig ist allein, dass der inaktive Zustand klar als inaktiv erkennbar bleibt.

Ein praktischer Hinweis zur Berechnung: Sie müssen das Kontrastverhältnis nie selbst ermitteln – jeder Kontrast-Checker übernimmt das für Sie. Wichtig ist aber zu verstehen, dass der Wert auf der relativen Helligkeit beruht, nicht auf der gefühlten Farbintensität. Zwei kräftige, satte Farben können einen miserablen Kontrast haben, wenn sie ähnlich hell sind – ein verbreitetes Missverständnis, das vor allem bei Kombinationen wie Rot auf Grün zu bösen Überraschungen führt.

Diese Formel hat allerdings eine bekannte Schwäche, und es lohnt sich, sie zu kennen. Weil sie rein die Helligkeit zweier Farben ins Verhältnis setzt, behandelt sie Kombinationen als gleichwertig, sobald die Zahl stimmt – unabhängig davon, wie das Auge sie tatsächlich wahrnimmt. Schriftgröße, Schriftstärke und bestimmte Farbtöne fließen nicht ein. So kann oranger Text auf Weiß die geforderten 4,5:1 erreichen und trotzdem anstrengend zu lesen sein. Genau hier setzt eine neuere, perzeptuell genauere Methode an: der Advanced Perceptual Contrast Algorithm (APCA), der im Rahmen der künftigen WCAG 3.0 erforscht wird und Schriftgröße, -stärke und Wahrnehmung mitberücksichtigt. Wichtig zur Einordnung: APCA ist bislang nur ein Kandidat. Das W3C hat den Kontrast-Teil 2023 aus dem WCAG-3.0-Arbeitsentwurf herausgenommen, und welcher Algorithmus es am Ende wird, ist offen. Verbindlich ist und bleibt vorerst die WCAG-2.x-Formel mit ihren 4,5:1 und 3:1 – an ihr messen sich BFSG und EN 301 549. Mein Rat: Nutzen Sie die WCAG-2.x-Werte als Pflichtmaßstab und eine perzeptuelle Prüfung wie APCA höchstens als zusätzliche Lesbarkeitskontrolle obendrauf, nie als Ersatz.

Farbe allein genügt nie

Das Erfolgskriterium 1.4.1 verlangt, dass Farbe niemals das einzige Mittel ist, um Information zu transportieren. Dieser Grundsatz wird in der Praxis ständig verletzt, oft ohne böse Absicht. Ein Link, der sich nur durch seine Farbe vom Fließtext abhebt, ist für jemanden, der diese Farbe nicht erkennt, unsichtbar – er braucht zusätzlich eine Unterstreichung. Ein Pflichtfeld, das nur durch einen roten Rahmen markiert ist, bleibt unsichtbar – es braucht ein Symbol oder einen Text.

Besonders heikel sind Diagramme und Statusanzeigen. Ein Tortendiagramm, dessen Segmente sich allein farblich unterscheiden, wird für farbfehlsichtige Menschen zur Rätselaufgabe; die Lösung sind Muster, Beschriftungen direkt am Segment oder unterscheidbare Helligkeiten. Eine Ampelanzeige, die Zustände nur über Rot, Gelb und Grün codiert, braucht zusätzliche Symbole oder Worte. Die Regel ist einfach und gilt ausnahmslos: Neben die Farbe gehört immer ein zweites, farbunabhängiges Signal.

Aus der Praxis: Ein Dashboard zeigte den Status von Projekten ausschließlich über farbige Punkte – grün für „im Plan“, rot für „kritisch“. Für die rund acht Prozent der Männer mit einer Rot-Grün-Sehschwäche sahen beide Punkte praktisch gleich aus. Ein Projektleiter mit Deuteranopie steuerte monatelang nach einem Statusbild, das er gar nicht zuverlässig lesen konnte. Wir ergänzten kleine Symbole – einen Haken und ein Ausrufezeichen – neben den Farben. Die Information war damit für alle eindeutig, ohne dass das Design an Klarheit verlor.

Text über Bildern: der unterschätzte Sonderfall

Eine der hartnäckigsten Kontrastfallen entsteht dort, wo Text über einem Foto oder einem Farbverlauf liegt – ein beliebtes Gestaltungsmittel für Titelbilder und Banner. Das Problem: Der Kontrast ist hier nicht konstant, sondern ändert sich mit dem Bildinhalt. Weißer Text mag über dem dunklen Teil eines Fotos gut lesbar sein, über einer hellen Stelle desselben Bildes aber völlig verschwinden. Ein klassischer Kontrast-Checker, der nur zwei feste Farben vergleicht, erfasst diesen Fall überhaupt nicht.

Die bewährten Lösungen sind eine halbtransparente Farbschicht zwischen Bild und Text, die den Hintergrund gezielt abdunkelt oder aufhellt, ein dezenter Textschatten, der die Lesbarkeit über wechselndem Untergrund sichert, oder ein durchgehender Farbkasten direkt hinter dem Text. Entscheidend ist, dass der nötige Kontrast an jeder Stelle des Bildes gewährleistet bleibt – nicht nur dort, wo das Foto zufällig dunkel genug ist. Prüfen Sie solche Banner deshalb immer an ihrer hellsten und ihrer dunkelsten Stelle.

Farbfehlsichtigkeit verstehen

Um barrierefreie Farben sinnvoll einzusetzen, lohnt ein Blick darauf, wie verbreitet Farbfehlsichtigkeit tatsächlich ist. Rund acht Prozent der Männer und etwa ein halbes Prozent der Frauen haben eine angeborene Farbfehlsichtigkeit – das ist keine seltene Ausnahme, sondern in jeder größeren Nutzergruppe verlässlich vertreten. Die mit Abstand häufigste Form betrifft die Unterscheidung von Rot und Grün.

Fachlich unterscheidet man mehrere Ausprägungen: Bei Deuteranopie und Protanopie ist die Rot-Grün-Wahrnehmung gestört, was die genannten acht Prozent ausmacht. Die Tritanopie betrifft die Blau-Gelb-Wahrnehmung und ist deutlich seltener. Die vollständige Farbenblindheit, die Achromatopsie, bei der nur Graustufen wahrgenommen werden, ist sehr selten. Für die Praxis heißt das vor allem: Verlassen Sie sich nie auf die Unterscheidung von Rot und Grün, und prüfen Sie Ihre Entwürfe mit einem Farbfehlsichtigkeits-Simulator, der Ihnen zeigt, wie Ihre Seite für betroffene Menschen aussieht. Was im Simulator noch klar unterscheidbar bleibt, funktioniert in aller Regel für alle. Ein einfacher Trick aus dem Alltag ergänzt das: Schalten Sie Ihren Entwurf einmal probeweise in Graustufen. Bleiben die Elemente auch ganz ohne Farbe unterscheidbar, ist das ein verlässliches Zeichen, dass Sie sich nicht allein auf Farbe verlassen.

Dark Mode und die zweite Falle

Ein Thema, das mit der Verbreitung des Dark Mode an Bedeutung gewonnen hat und in vielen Projekten übersehen wird: Barrierefreie Farben müssen in jedem Erscheinungsbild funktionieren. Eine Farbkombination, die im hellen Modus mühelos die geforderten 4,5:1 erreicht, kann im dunklen Modus daran scheitern – und umgekehrt. Wer einen Dark Mode anbietet, verdoppelt damit seine Prüfpflicht.

Häufig unterschätzt wird auch, dass reines Weiß auf reinem Schwarz im Dark Mode für viele Menschen unangenehm grell wirkt und ein Nachleuchten erzeugen kann. Hier hilft ein leicht abgedunkeltes Weiß auf einem nicht ganz schwarzen Hintergrund, das den Kontrast erhält, ohne zu blenden. Die Lehre ist klar: Definieren Sie für jeden Modus eine eigene, jeweils geprüfte Farbpalette und testen Sie beide Varianten konsequent, statt anzunehmen, dass eine Umkehrung der Farben schon passen wird.

Aus der Praxis: Ein Unternehmen führte einen Dark Mode ein und kehrte dafür kurzerhand alle Farben um. Im hellen Modus erfüllte der Fließtext sauber 7:1; im dunklen Modus rutschte derselbe Text auf 2,8:1, weil das verwendete Grau auf dunklem Grund kaum noch heraustrat. Niemand hatte den dunklen Modus separat geprüft, das Tool meldete für den hellen Modus ja grün. Erst eine eigene, für den Dark Mode definierte Palette brachte beide Varianten auf konforme Werte.

Markenfarben barrierefrei machen, ohne die Identität zu verlieren

Hier liegt der eigentliche Konflikt, der barrierefreie Farben zu einer heiklen Aufgabe macht. Marken sind über Jahre an bestimmte Farben gebunden, und niemand will seine Identität aufgeben. Die gute Nachricht: Das muss auch niemand. Der Schlüssel liegt darin, eine Markenfarbe nicht als einen einzigen Wert zu behandeln, sondern als Familie von Abstufungen.

In der Praxis bedeutet das: Behalten Sie Ihre Markenfarbe für großflächige Dekoration, Hintergründe und nicht-textliche Elemente, wo der Kontrast weniger kritisch ist. Für Text und kleine Bedienelemente definieren Sie eine abgedunkelte oder aufgehellte Variante derselben Farbe, die die geforderten Kontrastwerte erreicht. So bleibt die Marke erkennbar, während die Lesbarkeit gewahrt ist. Erweitern Sie Ihre Farbpalette gezielt um diese barrierefreien Varianten, statt sich auf den einen offiziellen Markenwert zu beschränken – fast jede Marke lässt sich auf diese Weise zugänglich machen, ohne ihren Charakter zu verlieren.

Praktisch gehen Sie dabei in drei Schritten vor. Prüfen Sie zunächst jede Markenfarbe gegen die Kontrastanforderung in ihren typischen Einsatzkontexten – als Text, als Fläche, als Bedienelement. Erzeugen Sie dann, wo nötig, eine dunklere oder hellere Variante, die die geforderten Werte erreicht und der Originalfarbe optisch nahe bleibt. Und legen Sie schließlich verbindlich fest, welche Variante wofür gilt: die kräftige Originalfarbe für Flächen und Akzente, die kontraststarke Variante für Text und kleine Elemente. So wird aus einer starren Markenfarbe ein flexibles, barrierefreies System, mit dem alle im Team arbeiten können.

Aus der Praxis: Eine bekannte Marke baute ihr gesamtes Erscheinungsbild um ein helles, freundliches Grün – auch für Links und Schaltflächen auf weißem Grund, wo der Kontrast bei mageren 1,9:1 lag. Die Vorgabe lautete zunächst: „Die Farbe ist nicht verhandelbar.“ Unsere Lösung war kein Bruch mit der Marke, sondern ihre Erweiterung: Das helle Grün blieb für Flächen und Akzente, für Text und Bedienelemente führten wir einen dunkleren Grünton derselben Familie ein. Das Markenbild blieb unverkennbar, der Kontrast sprang auf konforme Werte, und die Diskussion war beendet.

Barrierefreie Farben im Design-System verankern

Wie bei allen Aspekten der Barrierefreiheit gilt: Einzelne richtige Entscheidungen sind gut, aber tragfähig wird es erst, wenn barrierefreie Farben fest im Design-System verankert sind. Statt bei jedem neuen Bildschirm aufs Neue über Kontraste nachzudenken, definieren Sie einmal eine Palette aus geprüften Farbwerten – mit klaren Festlegungen, welche Farbe für Text auf welchem Hintergrund zulässig ist und welche nur für Flächen.

Hinterlegen Sie diese Werte als feste Design-Tokens, sodass jeder im Team automatisch aus einem barrierefreien Vorrat schöpft. Dokumentieren Sie die zulässigen Kombinationen ebenso wie die unzulässigen. Auf diese Weise wird Barrierefreiheit zur Voreinstellung statt zur ständigen Sonderaufgabe – und Fehler, die sonst immer wieder neu entstehen, werden von vornherein ausgeschlossen. Wenn die Farbentscheidungen einmal sauber dokumentiert sind, entfallen zudem die endlosen Diskussionen über einzelne Farbwerte in jedem neuen Projekt – barrierefreie Farben werden so vom wiederkehrenden Streitthema zur selbstverständlichen Grundlage, auf der sich das Team auf die eigentliche Gestaltung konzentrieren kann.

Werkzeuge zur Prüfung barrierefreier Farben

Glücklicherweise müssen Sie Kontraste nicht im Kopf ausrechnen – dafür gibt es zuverlässige Werkzeuge. Kontrast-Checker nehmen zwei Farbwerte entgegen und zeigen Ihnen das exakte Verhältnis sowie, ob es die WCAG-Stufen AA und AAA erfüllt. Solche Prüfer gibt es als Webseiten, als Browser-Erweiterungen und eingebaut in die meisten professionellen Design-Programme. Ergänzend zeigen Farbfehlsichtigkeits-Simulatoren, wie Ihre Gestaltung für Menschen mit verschiedenen Sehweisen wirkt. Gewöhnen Sie sich an, diese Prüfung schon während des Entwerfens zu nutzen, nicht erst am fertigen Produkt – so korrigieren Sie einen Fehlgriff in Sekunden, statt ihn später aufwändig nachbessern zu müssen.

So nützlich diese Werkzeuge sind, haben sie eine entscheidende Grenze: Sie prüfen immer nur einzelne Farbpaare, die Sie ihnen manuell vorlegen. Für eine kleine Palette ist das machbar, für eine gewachsene Website mit hunderten Elementen, Zuständen und Komponenten wird es schnell unübersichtlich – und genau die übersehenen Stellen sind oft die problematischen. Hier reicht das manuelle Prüfen einzelner Paare nicht mehr aus.

Access Contrast: der innovativste Kontrast-Checker am Markt

Genau an den Grenzen herkömmlicher Werkzeuge setzt unser eigenes Tool an: Access Contrast, erreichbar unter contrast.ifdb.io, ist der innovativste Kontrast-Checker, den es derzeit am Markt gibt – in dieser Form schlicht einzigartig. Wo gewöhnliche Prüfer Sie zwingen, jede Farbkombination mühsam einzeln einzugeben, haben wir ein Werkzeug gebaut, das die Kontrastprüfung spürbar schneller, präziser und komfortabler macht. Was bei anderen Tools nach Fleißarbeit aussieht, wird mit Access Contrast zur Sache weniger Augenblicke.

Und wir gehen noch einen entscheidenden Schritt weiter. Die kommende Pro-Version von Access Contrast liest ganze URLs aus: Statt Farbpaar für Farbpaar von Hand zu prüfen, geben Sie künftig einfach die Adresse einer Seite ein, und das Tool ermittelt die Kontrastverstöße automatisch über die gesamte Seite hinweg – genau die Lücke, an der herkömmliche Checker scheitern. Damit wird Access Contrast vom praktischen Helfer zum systematischen Prüfinstrument für komplette Websites. Andere geben Ihnen einen simplen Rechner für ein einzelnes Farbpaar und lassen Sie damit allein; Access Contrast bringt Sie spürbar weiter.

Eines sage ich Ihnen dennoch ehrlich: Farbkontrast ist nur ein Teil der Barrierefreiheit. Ein einwandfreier Kontrast bedeutet nicht, dass Ihre Seite insgesamt zugänglich ist – Tastaturbedienung, Screenreader-Tauglichkeit und vieles mehr gehören dazu. Access Contrast ist der ideale, spezialisierte Einstieg ins Thema Farbe; die vollständige Gewissheit über alle Kriterien liefert erst ein Tiefen-Audit mit echten Nutzern, wie es unser Access Ready leistet.

Vom Farbcheck zum belastbaren Status

Barrierefreie Farben sind der wirkungsvollste erste Schritt zu einer zugänglichen Website: häufigste Barriere, leichteste Behebung, sofort sichtbarer Effekt. Sie kennen nun die Werte, die Kriterien und die Strategie, um Ihre Marke zu wahren. Was bleibt, ist der systematische Blick auf das Ganze.

Wenn Sie Ihre Farbkontraste prüfen wollen, nutzen Sie Access Contrast unter contrast.ifdb.io – den innovativsten Kontrast-Checker am Markt, mit dem die Prüfung in Sekunden gelingt. Zeigt sich Handlungsbedarf über die Farben hinaus, führt der Weg zur rechtssicheren Konformität nach BFSG über ein zertifiziertes Tiefen-Audit mit echten Nutzern. Wie Farbe in das größere Bild der Gestaltung passt, lesen Sie in unserem Ratgeber zum barrierefreien Webdesign. Ich verspreche Ihnen keine perfekte Seite per Knopfdruck – aber einen klaren Weg von der richtigen Farbwahl bis zum belastbaren Nachweis.