Farbkontrast und Corporate Design

Eine barrierefreie Farbpalette ist ein Satz von Markenfarben mit klaren Regeln, welche Text-, Button-, Link-, Status- und Fokusfarbe auf welchem Hintergrund stehen darf, und jede dieser Paarungen ist nach WCAG 2.2 gemessen. Ich prüfe Ihre bestehende Markenpalette, messe das Kontrastverhältnis jeder Paarung und erweitere die Palette um Tonwertskalen, die Ihre Farbtöne beibehalten. Sie erhalten eine Liste freigegebener Paarungen, UI-Zustände, einen Dark Mode, Design Tokens und einen Farbleitfaden. Ihre Logofarben bleiben; über jede Änderung entscheiden Sie.

Sie sind hier richtig, wenn einer dieser Punkte auf Sie zutrifft:

• Ein Barrierefreiheits-Check meldet zu geringen Kontrast in Ihrem Onlineshop oder auf Ihrer Website, und die Farben stammen direkt aus dem Corporate-Design-Manual.
• Sie sind eine Markenagentur oder Designagentur, und ein Kunde muss das BFSG umsetzen. Gesucht ist eine Palette, die WCAG 2.2 AA besteht, ohne die Marke zu verlieren.
• Ihr Designsystem braucht Tokens für Light und Dark Mode, und niemand hat gemessen, welche Kombinationen überhaupt erlaubt sind.
• Fehler- und Erfolgsmeldungen unterscheiden sich bei Ihnen nur durch rote und grüne Schrift, und Sie wissen nicht, ob alle den Unterschied sehen.

• Fließtext: Geben Sie Text- und Hintergrundfarbe in den WebAIM Contrast Checker ein. Unter 4,5:1 besteht normal großer Text WCAG AA nicht.
• Buttons: Prüfen Sie die Beschriftung auf Ihrer Hauptbuttonfarbe. Weiß auf kräftigem Orange, Türkis oder Gelb liegt oft bei etwa 2:1.
• Fokus: Drücken Sie auf Ihrer Website die Tabulatortaste. Sehen Sie nicht, wo Sie sind, oder ist der Rahmen ein blasser Farbton, sehen es Tastaturnutzer auch nicht.
• Status: Stellen Sie Ihr Smartphone auf Graustufen und öffnen Sie ein Formular mit Fehler. Sieht die Fehlermeldung aus wie jeder andere Text, hängt die Bedeutung allein an der Farbe.

Lesen Sie weiter für die technischen Details. Unten: welche WCAG-Kriterien eine Palette betreffen, ein gemessenes Vorher-nachher-Beispiel an einer fiktiven Kaffeemarke (alle Dateien zum Download) und die Rechtslage in Deutschland, Österreich und der EU. Wenn Sie abkürzen möchten, senden Sie mir Ihr Markenhandbuch oder Ihre Farbliste, und ich sage Ihnen, welche Paarungen durchfallen.

Eine Palette ist barrierefrei, wenn jede Kombination, die Ihre Marke tatsächlich verwendet, ihren WCAG-Schwellenwert erreicht und keine Information allein über Farbe vermittelt wird. Eine einzelne Farbe ist nie „barrierefrei“; barrierefrei sind nur Paarungen.

WCAG 2.2 misst Kontrast als Verhältnis der relativen Leuchtdichte zweier Farben, von 1:1 bis 21:1. Erfolgskriterium 1.4.3 (Stufe AA) verlangt 4,5:1 für normalen Text und 3:1 für großen Text (etwa 24 px oder etwa 18,7 px fett). 1.4.6 (Stufe AAA) hebt das auf 7:1 und 4,5:1 an. Gesetze und Ausschreibungen nennen in der Regel AA; welche Paarungen auch AAA erreichen, markiere ich zusätzlich.

Nicht-Text-Kontrast, 1.4.11 (AA), verlangt 3:1 für die visuellen Teile, die man braucht, um ein Bedienelement oder seinen Zustand zu erkennen: den Rahmen eines Eingabefelds, eine Checkbox, die Kante eines Buttons ohne Textbeschriftung, den Fokusrahmen, die bedeutungstragenden Teile eines Icons. Ein hellgrauer Rahmen auf Weiß ist der typische Fehler.

Benutzung von Farbe, 1.4.1 (Stufe A), verlangt, dass Farbe nicht das einzige Mittel ist, um Information zu vermitteln. Eine rote und eine grüne Meldung, die sich nur im Farbton unterscheiden, bestehen nicht, so gut ihr Kontrast auch ist. Ein Icon und ein Wort wie „Fehler:“ lösen das; die Palette muss beides dann nur tragen.

Fokus-Erscheinungsbild, 2.4.13 (AAA, neu in WCAG 2.2), verlangt einen ausreichend großen Fokusindikator mit 3:1 Kontrast zwischen fokussiertem und nicht fokussiertem Zustand. Die Palette liefert die Farben und die Definition des Rahmens; die Größe kann erst die umgesetzte Seite belegen. 2.4.11, Fokus nicht verdeckt, wird oft damit verwechselt: Es geht um Sticky Header und Overlays, die das fokussierte Element verdecken. Das ist eine Layoutfrage, die keine Palette lösen kann.

Das ist ein gemessenes Beispiel an einer fiktiven Marke, kein Kundenauftrag. „Örnek Kahve Co.“ und die Palette ihres Markenhandbuchs habe ich mit typischen Handbuch-Entscheidungen erfunden, gemessen, neu aufgebaut und das Ergebnis mit unabhängigen Werkzeugen geprüft. Jede Abbildung, jeder Bericht und jede Datei unten ist mit „Fictional example brand“ (fiktive Beispielmarke) gekennzeichnet.

• Palette vorher: Weiß #FFFFFF, Creme #FFF8F0, Primär-Orange #F28C28, Sekundär-Türkis #2EC4B6, Akzent-Gelb #FFD166, Grau für Text #A0A0A0, Espresso #4A3428, Status-Rot #E74C3C und -Grün #2ECC71 (ohne Icons), blasser Fokusrahmen #CDEFEB.
• Farbberechnung: WCAG-2.x-Verhältnis aus der relativen Leuchtdichte in sRGB; Tonwertskalen in OKLCH (coloraide 8.13), Farbton beibehalten, Helligkeit auf ein festes Kontrastziel gegen Weiß gerechnet.
• Simulation von Farbfehlsichtigkeit: die Matrizen von Machado, Oliveira und Fernandes (2009), Schweregrad 1,0, in linearem sRGB.
• APCA: gegen npm apca-w3 0.1.9 abgeglichen und nur informativ ausgewiesen. APCA ist keine Anforderung der WCAG 2.2.
• Schrift in Abbildungen und Leitfaden: Inter (SIL Open Font License 1.1).

Das Markenhandbuch schrieb 14 Verwendungen vor (Fließtext, Buttonbeschriftungen, Links, Meldungen, Fokusrahmen, Rahmen). Eine der 14 erreichte ihren Schwellenwert: Espresso auf Gelb, 8,03:1.

Die übrigen vier (Fließtext auf Creme, Akzent-Überschriften, Buttonkante, Rahmen des Eingabefelds) fielen ebenfalls durch; alle 14 stehen in der Messdatei. Bei typischem Farbsehen unterscheiden sich Rot und Grün der Statusfarben deutlich (CIEDE2000 72,35). In der Simulation einer Deuteranopie sinkt dieser Abstand auf 11,64.

Für jeden Farbton habe ich in OKLCH eine Skala mit 11 Stufen gebaut und je Rolle die Stufen gewählt, die bestehen. Orange, Türkis, Gelb und Creme der Marke bleiben für Logo, Illustration und große Flächen unverändert. Text auf Markenorange oder -gelb erhält ein dunkles Neutral (6,48:1 und 11,03:1).

Der ehrliche Teil: Ein CIEDE2000-Abstand von etwa 2 ist gerade wahrnehmbar. Verschiebungen von 18 bis 29 sind deutlich sichtbar. Der Farbton bleibt, die Helligkeit nicht: Das Buttonorange wird zu einem tieferen Bernsteinbraun. Ob das noch Ihre Marke ist, ist eine Markenentscheidung, und die treffen Sie. In einem Auftrag sehen Sie diese Werte und Farbfelder, bevor irgendetwas endgültig ist.

• Hover und gedrückt: orange-700 (6,22:1 mit Weiß) und orange-800 (8,84:1).
• Fokus: 3 px Außenrahmen in teal-800 plus 2 px weißer Innenrahmen. Außenrahmen gegen die Seite 8,83:1, gegen Creme 8,38:1; der weiße Innenrahmen gegen den orangen Button 4,86:1.
• Deaktiviert: Beschriftung mit 2,17:1 (hell) und 1,80:1 (dunkel), informativ ausgewiesen. Inaktive Bedienelemente sind von 1.4.3 ausgenommen.
• Statusmeldungen: tragen jetzt ein Icon und die Wörter „Hata:“ bzw. „Tamam:“ (die Oberfläche der Beispielmarke ist türkisch), damit Farbe nicht mehr das einzige Signal ist.
• Dark Mode: mit eigenen freigegebenen Paarungen, alle neu gemessen; im Dark Mode wird die Aktionsfarbe zu #ed8c33.

Für die Statusfarben hat die Suche nur Fehler- und Erfolgskandidaten behalten, die auf Weiß und Creme 4,5:1 erreichen, und dann das Paar mit dem größten minimalen Abstand über die drei Simulationen gewählt.

Der Gewinn kommt daher, dass Erfolg zu einem bläulichen Grün wandert. Das Helligkeitsverhältnis der beiden ist etwa so wie vorher (1,81:1 gegenüber 1,82:1), Farbe bleibt also ein zusätzliches Signal. Die Bedeutung tragen Icon und Wort.

Und eine Zahl ist keine Markenentscheidung. ΔE2000 sagt, wie weit sich eine Farbe verschoben hat; ob sie sich noch nach Ihrer Marke anfühlt, beurteilen Sie.

Beispieldateien und Berichte sind auf Englisch; die Formularmeldungen in den Abbildungen auf Türkisch.

Sie erhalten eine gemessene Palette, die Regeln für ihren Einsatz und dieselbe Palette als Dateien, die Design und Entwicklung direkt laden können.

• Eine Kontrastmatrix Ihrer aktuellen Palette (vorher) und der erweiterten (nachher), als HTML und CSV.
• Tonwertskalen aus Ihren Farbtönen, mit dem gemessenen Verhältnis jeder Stufe.
• Eine Liste freigegebener Paarungen für Light und bei Bedarf Dark Mode, mit UI-Zuständen und Fokusrahmen.
• Design Tokens: CSS Custom Properties, W3C-DTCG-JSON, Tailwind-Konfiguration, Adobe-ASE-Farbfelder, Figma-Variablen-JSON.
• Einen Farbleitfaden als HTML und PDF sowie einen Befundbericht mit jeder Farbverschiebung (ΔE2000) und dem, was die Prüfungen nicht sehen.

Sie senden zuerst Ihre Hausfarben; der Preis steht fest, bevor die Arbeit beginnt.

1. Senden Sie Ihr Markenhandbuch oder Ihre Farbliste. Ein PDF des Corporate-Design-Manuals, Ihr CSS oder ein Screenshot der wichtigsten Seiten genügt. Ich sage Ihnen, welche Paarungen durchfallen und wie deutlich.
2. Sie erhalten Umfang und Festpreis, einschließlich der Modi und Token-Formate, die Sie brauchen.
3. Ich erledige die Arbeit. Sie erhalten eine als Vorschau gekennzeichnete Fassung von Palette und Leitfaden mit Kontrastbericht und jeder vorgeschlagenen Farbverschiebung zur Freigabe.
4. Ihre Freigabe gibt die endgültigen Dateien frei: Tokens, Leitfaden, Matrizen und Befundbericht.

Ich kalkuliere jeden Auftrag, nachdem ich das Material gesehen habe. Der Aufwand hängt von der Zahl der Farben und Rollen ab, davon, ob Sie einen Dark Mode brauchen, und von den Token-Formaten Ihrer Werkzeuge; ein bestehendes Designsystem mit benannten Tokens geht schneller als ein Handbuch mit losen Hex-Codes. Sie erhalten vor Beginn einen Festpreis, ohne Stundenzähler.

Zu geringer Textkontrast ist der Fehler, den WebAIM bei seinem jährlichen Scan von einer Million Startseiten am häufigsten findet, und seit dem 28. Juni 2025 gilt das BFSG bzw. BaFG für viele Onlineshops und digitale Angebote an Verbraucher. Was das für Ihr Unternehmen bedeutet, ist eine Rechtsfrage; diese Seite behandelt die technische Seite.

Rechtlicher Hinweis: Diese Seite behandelt die technische Seite. Ob BFSG, BaFG oder BITV 2.0 für Sie gelten, klären Sie bitte mit Ihrer Rechtsberatung.

• Deutschland: Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt den European Accessibility Act, Richtlinie (EU) 2019/882, um und gilt seit dem 28. Juni 2025 für die dort genannten Produkte und Dienstleistungen, darunter Dienstleistungen im elektronischen Geschäftsverkehr. Kleinstunternehmen, die Dienstleistungen erbringen, sind ausgenommen.
• Österreich: Das Barrierefreiheitsgesetz (BaFG) setzt dieselbe Richtlinie um und gilt ebenfalls seit dem 28. Juni 2025.
• Schweiz: Für Schweizer Unternehmen wird der European Accessibility Act relevant, wenn sie Verbrauchern in der EU Produkte oder Dienstleistungen anbieten.
• Die Norm: EN 301 549 V3.2.1, zitiert im Durchführungsbeschluss (EU) 2021/1339, wendet die Erfolgskriterien der WCAG 2.1 an, darunter 1.4.1, 1.4.3 und 1.4.11. Ich arbeite nach WCAG 2.2, die alle enthält.
• Öffentliche Stellen: Die Richtlinie (EU) 2016/2102 gilt für Websites und Apps öffentlicher Stellen; für Stellen des Bundes setzt die BITV 2.0 sie um.

Eine auf Token-Ebene korrigierte Palette korrigiert jede Seite, die sie nutzt. Das ist meist günstiger, als den Kontrast Seite für Seite nachzubessern.

Logo und Markenfarben bleiben für Logo, Illustration und große Flächen. Text-, Link-, Button- und Statusrollen erhalten dunklere Stufen desselben Farbtons, und diese Verschiebungen sind deutlich sichtbar (CIEDE2000 18 bis 29 im Beispiel). Sie sehen jede Verschiebung vor der Freigabe; die Markenentscheidung liegt bei Ihnen.

Weil sie das nicht muss. Im Beispiel bestehen nach der Überarbeitung 17 von 45 Paaren AA für Text; der Rest sind Kombinationen, die niemand für Text verwenden sollte. Ihr Team arbeitet mit der Liste der freigegebenen Paarungen, von denen im Light und Dark Mode 27 von 27 bestehen.

Ich berechne APCA-Werte und gebe sie informativ mit, weil sie mehr über dünne und kleine Schrift aussagen. WCAG 2.2 verwendet das Kontrastverhältnis, und darauf beziehen sich Gesetze und Ausschreibungen heute. Die Palette ist so gebaut, dass sie WCAG 2.x besteht.

Die Dateien folgen den veröffentlichten Formaten, und im Beispiel wurde ihre Struktur mit unabhängigen Werkzeugen geprüft: Style Dictionary erzeugt das CSS, ein unabhängiger Parser liest die ASE-Datei, die Figma-Datei ist eine Nutzlast für die Variablen-REST-API. In Figma oder eine Adobe-Anwendung importiert wurden sie nicht, und die Variablen-API von Figma setzt einen Enterprise-Tarif voraus. Was Sie in Ihrem Werkzeug erwarten können, sage ich Ihnen vor der Freigabe.

Nein. Sie ist ein veröffentlichtes Modell vollständiger Dichromasie, kein Test mit Menschen. Deshalb erhalten Statusmeldungen ein Icon und ein Wort: Dann hängt die Bedeutung nicht mehr davon ab, zwei Farben zu unterscheiden.

Sie beseitigt eine häufige Fehlerklasse, wenn die Tokens wie beschrieben umgesetzt werden. Fokusreihenfolge, ein vom Sticky Header verdeckter Fokusrahmen, Formulare, Alternativtexte und Tastaturbedienung sind eigene Themen. Ein Barrierefreiheitstest der umgesetzten Website ist ein eigener Auftrag.

• Barrierefreie PDF (PDF/UA)
• Barrierefreie Diagramme und Infografiken
• Barrierefreie Word- und PowerPoint-Dokumente
• Barrierefreie E-Mail-Newsletter
• Barrierefreies Excel
• Alternativtexte und Bildbeschreibung
• VPAT-Konformitätsbericht Barrierefreiheit
• Barrierefreies EPUB

Ein Markenhandbuch, eine Liste mit Hex-Codes oder ein Screenshot Ihrer Startseite. Sie erhalten eine klare Auskunft, welche Paarungen durchfallen, wie deutlich, und wie weit sich jede Farbe verschieben müsste.

Ali Karabüyük · Tekirdağ, Türkei · Zusammenarbeit aus der Ferne, weltweit · Dokumenten- und Bildproduktion seit 2004, hauptberuflich seit 2008.