Barrierefreie Farben prüfen und eine barrierefreie Farbpalette erstellen

Barrierefreie Farben prüfen Sie über das Kontrastverhältnis zwischen Vordergrund und Hintergrund. Nach den Web Content Accessibility Guidelines (WCAG) 2.1, Stufe AA, braucht normaler Text mindestens 4,5:1, großer Text und Bedienelemente mindestens 3:1. Mit der Kontrast-Matrix unten prüfen Sie alle Farbpaare Ihrer Palette auf einmal, danach folgt die Anleitung für eine barrierefreie Farbpalette.

Markenfarben werden meist für Logo und Werbung ausgewählt. Auf einer Website tragen sie Fließtext und Buttons, und dort entscheidet der Kontrast, ob Nutzer:innen Inhalte lesen und bedienen können, Menschen mit Sehbehinderung eingeschlossen.

Sie möchten Ihre Markenfarben auf allen Seiten Ihrer Website prüfen lassen? Vereinbaren Sie eine Demo mit unserem Team.

Barrierefreie Farben prüfen: die Kontrast-Matrix für Ihre Palette

Die Kontrast-Matrix berechnet das Kontrastverhältnis für jede Kombination Ihrer Palette und ordnet ihm eine WCAG-Stufe zu.

So lesen Sie das Ergebnis:

1. Farben eingeben

   Tippen Sie den HEX-Code ein oder wählen Sie die Farbe über das Farbfeld. Benennen Sie jede Farbe nach ihrer Rolle, etwa „Primär“ oder „Hintergrund“.

2. Zeile und Spalte lesen

   Die Zeile ist die Textfarbe, die Spalte der Hintergrund. Jede Zelle zeigt eine Textprobe in dieser Kombination.

3. Stufe ablesen

   Das Etikett zeigt AAA, AA, AA großer Text oder Nicht konform. Ein Klick auf die Zelle öffnet alle Einzelergebnisse, auch für Bedienelemente.

Paare mit „AA großer Text“ eignen sich für Überschriften und große Schrift, für Fließtext reichen sie nicht. Paare mit „Nicht konform“ bearbeiten Sie in Schritt 2 weiter unten.

Wie wird Farbkontrast für die Barrierefreiheit gemessen?

Das Kontrastverhältnis ist der Helligkeitsunterschied zwischen zwei Farben, angegeben von 1:1 (kein Unterschied) bis 21:1 (Schwarz auf Weiß). Grundlage ist die relative Leuchtdichte jeder Farbe, wie sie die WCAG definieren.

Der Wert ist objektiv messbar. Zwei Farben, die auf dem Bildschirm gut unterscheidbar wirken, können trotzdem zu wenig Kontrast haben. Eine Farbe allein ist deshalb nie barrierefrei: Es zählt immer das Paar aus Vordergrund und Hintergrund.

Wo das Design es zulässt, lohnt sich Stufe AAA. Höherer Kontrast erleichtert allen das Lesen.

Wo Sie den Farbkontrast prüfen sollten

Fließtext auf weißem Grund ist selten das Problem. Kritisch sind Stellen, an denen sich der Hintergrund ändert oder die seltener getestet werden:

• Text auf Bildern und Verläufen: Die Helligkeit des Hintergrunds wechselt. Prüfen Sie die hellste und die dunkelste Stelle hinter dem Text.

• Dark Mode: Umgekehrte Farben ergeben nicht automatisch dieselben Werte. Der dunkle Modus braucht eine eigene Prüfung.

• Unterseiten: Produktseiten, Formulare und Checkout übernehmen oft ältere Stile. Testen Sie mehr als die Startseite.

• Verlinkte Dokumente: PDF- und Word-Dateien unterliegen denselben WCAG-Anforderungen. Wie Sie dabei vorgehen, zeigt unser Leitfaden PDF barrierefrei machen.

Für Farben in Fotos oder Grafiken misst der kostenlose Colour Contrast Analyser von TPGi jeden Bildpunkt per Pipette direkt am Bildschirm.

Mit unserem Scanner können Sie die Barrierefreiheit Ihrer Website kostenlos testen und sehen, wie sie beim Kontrast und bei weiteren Kriterien abschneidet.

Barrierefreie Farbpalette erstellen in vier Schritten

Eine barrierefreie Farbpalette ordnet Ihre vorhandenen Markenfarben festen Rollen zu und prüft jede Rolle gegen ihren Hintergrund. Der Charakter Ihrer Marke bleibt dabei erhalten.

Schritt 1: Bestehende Palette prüfen

Geben Sie alle offiziellen Markenfarben in die Kontrast-Matrix oben ein. Notieren Sie, welche Paare für Fließtext funktionieren, welche nur für große Schrift und welche gar nicht. Achten Sie besonders auf die Stellen, an denen Markenfarben zu Text oder Bedienelementen werden.

Schritt 2: Varianten mit festen Rollen bauen

Fällt eine Farbe durch, müssen Sie sie selten ersetzen. Meist reicht eine Farbfamilie mit klaren Aufgaben:

• Text: eine dunklere Variante des Markentons

• Akzent: der Originalton für Logo, Illustrationen und dekorative Elemente

• Fläche: eine hellere Variante als Hintergrund

Ein helles Markengrün fällt als Textfarbe auf Weiß oft durch. Als Hintergrund mit dunklem Text darüber funktioniert es dagegen gut. Geprüfte Beispielpaare finden Sie in den barrierefreien Farbkombinationen der Bundesregierung.

Schritt 3: Interaktive Zustände abdecken

Eine Palette, die nur den Normalzustand abdeckt, lässt die Momente offen, in denen Nutzer:innen am meisten Klarheit brauchen. Prüfen Sie jeden Zustand einzeln:

• Hover und Fokus: Der Fokusrahmen für die Tastaturnavigation zählt als Bedienelement und braucht den Kontrast aus der Tabelle oben.

• Deaktiviert: Inaktive Elemente sind von der Kontrastanforderung ausgenommen. Machen Sie den Zustand trotzdem erkennbar, etwa mit gestricheltem Rahmen oder Schloss-Icon. Geringere Deckkraft allein reicht nicht.

• Fehler und Erfolg: Farbe darf nie das einzige Signal sein (WCAG-Kriterium 1.4.1). Ein Fehlerfeld braucht zusätzlich ein Icon oder einen Text.

Schritt 4: Auf Farbsehschwächen testen

Ein korrekter Kontrastwert garantiert nicht, dass zwei Farben für Menschen mit Farbsehschwäche unterscheidbar bleiben. Der Kontrast misst die Helligkeit. Den Farbton erfasst er nicht. Rot und Grün, die typischen Fehler- und Erfolgsfarben, sind bei einer Rot-Grün-Sehschwäche besonders schwer zu trennen.

Simulieren Sie Ihre Palette für Protanopie, Deuteranopie und Tritanopie, zum Beispiel im Bereich „Rendering“ der Chrome-Entwicklertools. Verschwimmen Paare, hilft dieselbe Lösung wie in Schritt 3: ein Icon, ein Textlabel oder ein Muster neben der Farbe.

Baut Ihr Team die Palette bereits in Figma, Sketch oder Adobe XD auf, prüfen unsere Design-Pakete die Entwürfe vor der Entwicklung.

Warum barrierefreie Farben allen Nutzer:innen helfen

Weltweit haben mindestens 2,2 Milliarden Menschen eine Seheinschränkung in der Nähe oder Ferne, so der Faktenbericht der Weltgesundheitsorganisation (WHO).

Ausreichender Kontrast hilft darüber hinaus älteren Menschen und allen, die bei direktem Sonnenlicht oder auf einem schwachen Display lesen. Gut lesbare Formulare und Buttons senken das Risiko von Eingabefehlern. Barrierefreie Farben sind ein Baustein auf dem Weg zu einer digitalen Welt ohne Barrieren, für alle.

Häufige Fragen zur Barrierefreiheit von Farben

Welche Kontraststufe verlangt das BFSG?

In der Praxis gilt WCAG 2.1 auf Stufe AA als technischer Maßstab für das Barrierefreiheitsstärkungsgesetz (BFSG) in Deutschland. Dasselbe gilt für das Barrierefreiheitsgesetz (BaFG) in Österreich. Beide setzen den European Accessibility Act um und gelten seit 28. Juni 2025. Für Farben heißt das: Die AA-Werte aus der Tabelle oben sind die Untergrenze.

Reicht ein Kontrast-Checker für die WCAG-Konformität?

Nein. Ein Kontrast-Checker deckt nur die Kontrastkriterien ab. Für die WCAG-Konformität zählen auch Alternativtexte, Tastaturbedienung, Formularbeschriftungen und eine saubere Struktur. Viele dieser Punkte lassen sich nur mit manuellen Tests bewerten.

Was ist APCA und ersetzt es die WCAG-Kontrastformel?

APCA ist ein neueres Berechnungsverfahren für Kontrast, das im Umfeld von WCAG 3 diskutiert wird. WCAG 3 ist bisher ein Entwurf. Für BFSG und BaFG zählt weiterhin die Kontrastformel aus WCAG 2, die auch die Kontrast-Matrix verwendet.

Wie oft sollten Sie Ihre Farben prüfen?

Bei jeder Änderung am Design-System: neue Komponenten, ein Rebranding, ein Dark Mode oder neue Statusfarben. Kontrast ist eine laufende Aufgabe. Mit der Plattform für digitale Barrierefreiheit überwachen Sie Kontrast und weitere WCAG-Kriterien fortlaufend auf Ihrer gesamten Website.

Wo fange ich an?

Barrierefreie Farben prüfen Sie über das Kontrastverhältnis jedes Farbpaars nach WCAG 2.1 AA. Eine barrierefreie Palette entsteht, wenn Ihre Markenfarben Varianten mit festen Rollen bekommen und Statusfarben ein zweites Signal tragen.

1. Geben Sie Ihre Markenfarben in die Kontrast-Matrix ein (wenige Minuten).

2. Ersetzen Sie Paare mit „Nicht konform“ durch dunklere oder hellere Varianten.

3. Prüfen Sie Hover, Fokus, Fehler und Erfolg einzeln.

4. Testen Sie die Palette mit einer Simulation für Farbsehschwächen.

5. Prüfen Sie danach Ihre gesamte Website mit dem Scanner.

Weiterlesen

• Was ein Barrierefreiheits-Audit prüft und wie es abläuft

• Welche Barrieren nur manuelle Tests finden

• Woran Sie eine barrierefreie Website erkennen