NCA Social Media
Erstellt:
Aktualisiert:
Autor:
Roland Golla
Grüne Palettenkarte mit vier Farbfeldern, Icons und Wordmark Color Accessibility

Was ist Color Accessibility?

Color Accessibility ist die Gestaltung digitaler Inhalte so, dass Informationen für alle Menschen erkennbar bleiben, unabhängig davon, wie sie Farben wahrnehmen. Sie umfasst ausreichenden Kontrast, den Verzicht auf Farbe als einziges Unterscheidungsmerkmal und Farbpaletten, die auch bei Farbsehschwäche funktionieren.
Farbe ist im Web ein Signal. Rot heißt Fehler, Grün heißt Erfolg, ein andersfarbiges Wort ist ein Link. Wer Rot und Grün nicht unterscheiden kann, wer ein Display mit hohem Kontrastmodus nutzt oder wer eine Seite mit dem Screenreader hört, bekommt dieses Signal nicht. Color Accessibility sorgt dafür, dass die Information trotzdem ankommt: durch Text, Symbol, Muster oder Form.
Die WCAG 2.2 behandeln das Thema in vier Erfolgskriterien: 1.4.1 Benutzung von Farbe, 1.4.3 Kontrast Minimum, 1.4.6 Kontrast Erhöht und 1.4.11 Nicht Text Kontrast. In Deutschland sind die Level A und AA Kriterien über das BFSG seit Juni 2025 verbindlich.

Inhalt

Color Accessibility mit NCA: Schnelle Hilfe vom Experten

Farbe entscheidet sich bei uns nicht im Designtool, sondern im Code. Wir arbeiten mit Design Tokens in Astro, React und Vue und prüfen Kontraste automatisiert mit axe-core in Cypress, bevor ein Release rausgeht. So bleibt eine Farbpalette barrierefrei, auch wenn sie sich über Jahre weiterentwickelt. Für Farbentscheidungen jenseits der Messwerte testen wir mit Simulationen für Farbsehschwächen und mit echten Nutzern.
Dazu passen unsere Leistungen rund um Accessibility Webdesign und Frontend, automatisiertes Accessibility Testing mit axe DevTools und Cypress, Lighthouse Accessibility Audits, die Prüfung mit Firefox Accessibility Testing Tools und unsere Frontend Development Beratung für Design Systeme mit sauberen Farb Tokens.
Lass uns sprechen
Finde das passende Angebot für dein Projekt
Anfrage-Konfiguration
Starten Sie Ihre Anfrage
Projektart
Infos
Nachricht

Eliminierung technischer Schulden mit PHPStan, Rector PHP und PHPUnit. Über 20 Jahre Praxiserfahrung in skalierbaren Backends.

CORE EXPERTISE

Gesetzliche Konformität & Inklusion. Optimierung von Performance und Conversion durch radikal nutzerzentriertes, universelles Design.

BFSG COMPLIANT

Skalierbare KI-Systeme mit echtem Code Ownership. CI/CD, Backup-Strategien und Infrastruktur, die mit deinem Team wächst.

ENTERPRISE READY

Wen Color Accessibility betrifft

Farbsehschwäche ist die häufigste Sehbeeinträchtigung überhaupt. Die Organisation Colour Blind Awareness nennt rund 8 Prozent der Männer und 0,5 Prozent der Frauen mit nordeuropäischer Herkunft. Am häufigsten ist die Rot Grün Schwäche (Deuteranomalie und Protanomalie), seltener die Blau Gelb Schwäche (Tritanomalie). Vollständige Farbenblindheit (Achromatopsie) ist sehr selten.
Color Accessibility endet aber nicht bei Farbsehschwäche. Betroffen sind auch:
  • Menschen mit Sehbehinderung, die Kontrast brauchen, weil feine Farbunterschiede verschwimmen.
  • Screenreader Nutzer, die Farbe gar nicht wahrnehmen. Ein rot markiertes Pflichtfeld ist für sie unsichtbar, wenn kein Text dazu steht. Mehr dazu unter Text to Speech.
  • Ältere Menschen, deren Kontrastempfinden mit dem Alter abnimmt.
  • Alle anderen in schlechten Situationen: Sonnenlicht auf dem Handy, ein alter Monitor, ein Beamer im hellen Raum, der Nachtmodus des Betriebssystems.
Deshalb gehört das Thema zu den vier Grundprinzipien POUR unter Wahrnehmbarkeit. Was nicht wahrgenommen wird, kann nicht bedient werden.

Regel 1: Farbe ist nie das einzige Signal

WCAG 1.4.1 ist die wichtigste Regel und gleichzeitig die meistverletzte. Farbe darf nicht das einzige Mittel sein, um eine Information zu vermitteln, eine Aktion anzuzeigen oder ein Element zu unterscheiden. Farbe darf verstärken, sie darf nie allein tragen.
Typische Fälle und ihre Lösung:
  • Formularfehler: Rote Umrandung allein reicht nicht. Dazu gehört eine Fehlermeldung als Text und ein Icon. Wie das sauber geht, zeigt unser Eintrag zu Accessible Forms.
  • Links im Fließtext: Ein nur farblich abgesetzter Link braucht zusätzlich eine Unterstreichung oder mindestens 3:1 Kontrast zum umgebenden Text plus eine sichtbare Änderung bei Hover und Fokus.
  • Statusanzeigen: Grüner Punkt für online, roter für offline. Dazu gehört ein Text oder ein unterschiedliches Symbol.
  • Diagramme: Linien und Flächen bekommen Muster, Beschriftungen direkt am Element oder unterschiedliche Formen bei Datenpunkten. Eine Legende, die nur über Farbe zuordnet, fällt durch.
  • Pflichtfelder: Ein rotes Sternchen ohne Erklärung ist zu wenig. Dazu gehört das Wort Pflichtfeld als Text oder eine Erklärung am Anfang des Formulars.
Der einfachste Test: Screenshot in Graustufen umwandeln. Ist die Seite dann noch verständlich, ist Regel 1 erfüllt. Verschwinden Informationen, fehlt ein zweites Signal.

Regel 2: Kontrast messen statt schätzen

Kontrast ist in den WCAG ein Verhältnis der Helligkeit zweier Farben, von 1:1 (identisch) bis 21:1 (Schwarz auf Weiß). Der Farbton spielt dabei keine Rolle, nur die wahrgenommene Leuchtdichte. Deshalb kann ein knalliges Rot auf Weiß mit 4:1 durchfallen, während ein unauffälliges Dunkelgrau problemlos besteht.
  • Text: mindestens 4,5:1 für normalen Text, 3:1 für großen Text ab 18 Punkt oder 14 Punkt fett (WCAG 1.4.3, Level AA).
  • Erhöhter Kontrast: 7:1 beziehungsweise 4,5:1 (WCAG 1.4.6, Level AAA), sinnvoll für Anwendungen mit langer Lesezeit.
  • Grafische Elemente und UI: mindestens 3:1 für Icons, Rahmen von Eingabefeldern, Fokus Ringe und Diagrammteile, die Information tragen (WCAG 1.4.11, Level AA).
Die Details zur Messung, zur Formel und zu Grenzfällen wie Platzhaltertext oder deaktivierten Buttons stehen im Eintrag Farbkontrast. Wer Werte direkt prüfen will, nutzt unseren Farbkontrast Rechner. Techniken zur nachträglichen Verbesserung fasst Contrast Enhancement zusammen.
Ein Punkt wird oft übersehen: Kontrast gilt auch für Text auf Bildern und auf Farbverläufen. Dort zählt die schlechteste Stelle, nicht der Durchschnitt. Ein halbtransparenter dunkler Layer hinter dem Text löst das Problem fast immer.

Regel 3: Paletten für Farbsehschwäche bauen

Eine Farbpalette kann jeden Kontrastwert erfüllen und trotzdem scheitern, wenn zwei Farben für Menschen mit Rot Grün Schwäche gleich aussehen. Rot und Grün, Grün und Braun, Blau und Lila, Rosa und Grau sind klassische Paare, die verschwimmen. Bei Blau Gelb Schwäche sind es Blau und Grün sowie Gelb und Rosa.
Bewährte Ansätze:
  • Helligkeit variieren, nicht nur Farbton. Zwei Farben, die sich in der Helligkeit deutlich unterscheiden, bleiben auch in Graustufen unterscheidbar.
  • Weniger Farben. Fünf Kategorien in einem Diagramm sind mit Farbe allein kaum sicher zu trennen. Ab hier helfen Muster, Formen und direkte Beschriftung.
  • Geprüfte Paletten nutzen. Die Palette von Okabe und Ito oder die Viridis Skala aus der Datenvisualisierung sind für Farbsehschwäche optimiert.
  • Simulieren. Firefox und Chrome bringen im Accessibility Panel eine Simulation für Protanopie, Deuteranopie, Tritanopie und Achromatopsie mit. Ein Klick zeigt, ob eine Palette hält.
Das gehört in die Designphase, nicht in den Bugfix. Wer die Palette einmal als Design Tokens definiert und dort prüft, bekommt in jeder Komponente automatisch barrierefreie Farben. Wie das im CSS zusammenspielt, zeigt unser Eintrag zu CSS und Barrierefreiheit.

Color Accessibility automatisiert testen mit axe-core und Cypress

Kontrast lässt sich gut automatisiert prüfen, Farbe als einziges Signal nicht. axe-core bringt die Regel color-contrast für Text mit. Sie berechnet das Verhältnis aus gerenderter Vorder- und Hintergrundfarbe und meldet Verstöße gegen 1.4.3. Für 1.4.11 gibt es link-in-text-block, das Links ohne Unterstreichung auf 3:1 Kontrast zum Fließtext prüft.
In Cypress mit cypress-axe:
Code: 
          
describe('Color Accessibility', () => {
  it('erfüllt Kontrast Anforderungen nach WCAG AA', () => {
    cy.visit('/glossare/nca-glossar-barrierefreiheit/color-accessibility');
    cy.injectAxe();
    cy.checkA11y(null, {
      runOnly: { type: 'tag', values: ['wcag2aa', 'wcag21aa'] },
      rules: { 'color-contrast': { enabled: true } },
    });
  });

  it('kennzeichnet Formularfehler nicht nur farblich', () => {
    cy.get('form').submit();
    cy.get('[aria-invalid="true"]').each(($field) => {
      cy.wrap($field).should('have.attr', 'aria-describedby');
    });
  });
});
Der zweite Test prüft indirekt Regel 1: Jedes fehlerhafte Feld muss eine Beschreibung referenzieren, also einen Text und nicht nur einen roten Rahmen. Solche Tests laufen bei uns in jeder Pipeline mit GitHub Actions oder GitLab CI, die Ergebnisse landen in Cypress Cloud.
Grenzen: axe-core prüft keinen Text auf Bildern, keine Farbverläufe und nicht, ob ein Diagramm ohne Farbe verständlich bleibt. Dafür bleibt der manuelle Test in Graustufen und mit Farbsehschwäche Simulation Pflicht. Den Überblick über die gesamte Toolchain gibt Accessibility Testing Tools 2026, den Ablauf beschreibt Accessibility Testing.

Die vier WCAG 2.2 Kriterien für Color Accessibility im Vergleich

WCAG Kriterium Anforderung Automatisiert prüfbar
1.4.1 Benutzung von Farbe (Level A) Farbe ist nie das einzige Mittel für Information, Aktion oder Unterscheidung Nein, nur Links im Fließtext teilweise über link-in-text-block
1.4.3 Kontrast Minimum (Level AA) Text 4,5:1, großer Text 3:1 Ja, axe-core color-contrast; nicht bei Text auf Bildern und Verläufen
1.4.6 Kontrast Erhöht (Level AAA) Text 7:1, großer Text 4,5:1 Ja, axe-core color-contrast-enhanced
1.4.11 Nicht Text Kontrast (Level AA) UI Komponenten und grafische Objekte 3:1 zur Umgebung Teilweise, Fokus Ringe und Icons meist manuell prüfen

Dark Mode, Kontrastmodus und Nutzereinstellungen

Color Accessibility hört nicht bei der eigenen Palette auf. Nutzer bringen eigene Einstellungen mit, und eine barrierefreie Seite respektiert sie.
  • prefers-color-scheme: Wer den Dark Mode im System aktiviert hat, erwartet ihn auch auf der Webseite. Jede Farbe braucht deshalb zwei geprüfte Werte, hell und dunkel. Ein Kontrast, der im hellen Modus stimmt, kann im dunklen scheitern.
  • prefers-contrast: Signalisiert den Wunsch nach mehr oder weniger Kontrast. Eine Seite kann darauf mit kräftigeren Rahmen und satteren Textfarben reagieren.
  • forced-colors: Der Kontrastmodus von Windows ersetzt alle Farben durch Systemfarben. Hintergrundbilder verschwinden, Rahmen bleiben. Icons als Hintergrundbild sind dann unsichtbar, SVG mit currentColor überlebt.
Alle drei Einstellungen lassen sich in Cypress simulieren, indem die Media Query beim Test gesetzt wird. So läuft die Kontrastprüfung für hell und dunkel in derselben Pipeline. Wie Farbe, Struktur und Bedienbarkeit zusammenhängen, zeigt der Eintrag zu Universal Design.

We often design with only one type of color vision in mind: our own.

Geri Coady, Designerin, Autorin von Color Accessibility Workflows – via A Book Apart, Color Accessibility Workflows

Color Accessibility in NCA Projekten

Farbe ist in unseren Projekten ein Token, kein Hexwert im Stylesheet. Jede Farbkombination, die im Design System freigegeben ist, hat einen geprüften Kontrastwert für hell und dunkel. Komponenten greifen nur auf diese Kombinationen zu. Das klingt streng, spart aber in jedem Accessibility Audit die meiste Zeit, weil Kontrastfehler gar nicht erst entstehen.
Bei bestehenden Projekten prüfen wir Farbe als eines der ersten Themen. Kontrastverstöße sind messbar, gut zu priorisieren und schnell zu beheben. Farbe als einziges Signal ist aufwendiger, weil es Komponenten und Inhalte betrifft. Hier hilft ein Graustufen Durchlauf durch die wichtigsten Seiten, um die Stellen zu finden. Parallel dazu laufen Keyboard Navigation, Semantic HTML und Alternativtexte.
Wir helfen Teams, Farb Tokens mit Kontrastwerten aufzubauen, axe-core in Cypress zu verankern und Designer wie Redaktion für das Thema zu sensibilisieren. Ziel ist eine Seite, die die Anforderungen aus BFSG und European Accessibility Act erfüllt, ohne dass jemand beim nächsten Redesign von vorne anfängt. Alle Begriffe rund um das Thema findet ihr im NCA Glossar für Barrierefreiheit.
CYPRESS.IO Ambassador und IT Consultant für QA Engenieering und Qualität in PHP Projekten.

Erreichen Sie unsere Spezialisten zu barrierefreien Webdesign

Wir sind hier, um Ihnen zu helfen. Gemeinsam meistern wir Ihre digitalen Herausforderungen und fördern die Inklusion im Internet. Lassen Sie uns Ihre Projekte mit barrierefreiem Webdesign erfolgreich machen.

Kostenlose Demo Jetzt anrufen

Häufige Fragen zu Color Accessibility

Die wichtigsten Fragen zu Farbe, Kontrast und Farbsehschwäche im Web kurz beantwortet.

Was ist Color Accessibility 2026?

Color Accessibility bedeutet, digitale Inhalte so zu gestalten, dass sie unabhängig von der Farbwahrnehmung verständlich bleiben. Dazu gehören ausreichender Kontrast, ein zweites Signal neben Farbe und Paletten, die bei Farbsehschwäche funktionieren. 2026 ist das in Deutschland über das BFSG für viele Onlineshops und Dienste verbindlich, geprüft nach WCAG 2.2 Level AA.

Welche WCAG 2.2 Kriterien gelten 2026 für Farbe und Kontrast?

Vier Kriterien: 1.4.1 Benutzung von Farbe (Level A) verbietet Farbe als einziges Signal. 1.4.3 Kontrast Minimum (Level AA) verlangt 4,5:1 für Text und 3:1 für großen Text. 1.4.11 Nicht Text Kontrast (Level AA) fordert 3:1 für UI Elemente und Grafiken. 1.4.6 Kontrast Erhöht (Level AAA) setzt 7:1 als freiwilliges Ziel.

Wie teste ich Color Accessibility 2026 automatisiert?

Kontrast prüft axe-core mit der Regel color-contrast, zum Beispiel über cypress-axe in Cypress oder Pa11y in der CI Pipeline. Links ohne Unterstreichung prüft link-in-text-block. Ob Farbe das einzige Signal ist, erkennt kein Tool zuverlässig. Dafür bleibt der Graustufen Test und die Farbsehschwäche Simulation im Browser Pflicht.

Wie viele Menschen sind 2026 von Farbsehschwäche betroffen?

Colour Blind Awareness nennt rund 8 Prozent der Männer und 0,5 Prozent der Frauen mit nordeuropäischer Herkunft. Die Rot Grün Schwäche ist mit Abstand am häufigsten. Dazu kommen Menschen mit Sehbehinderung, ältere Nutzer mit nachlassendem Kontrastempfinden und alle, die bei Sonnenlicht oder auf schlechten Displays lesen.

Warum ist Color Accessibility 2026 auch für Dark Mode wichtig?

Weil jede Farbe zwei Werte braucht, einen für hell und einen für dunkel, und beide den Kontrast erfüllen müssen. Ein Grün, das auf Weiß 4,5:1 erreicht, kann auf dunklem Grau durchfallen. Dazu kommen prefers-contrast und der Windows Kontrastmodus, die eigene Farben überschreiben. Wer Farbe als Design Tokens verwaltet, prüft alle Varianten in einer Pipeline.

Darf ich Farbe überhaupt noch für Bedeutung nutzen?

Ja, Farbe darf verstärken, sie darf nur nicht allein tragen. Ein roter Fehlertext mit Icon und klarer Meldung ist barrierefrei. Ein rot umrandetes Feld ohne Text ist es nicht. Der schnelle Test: Screenshot in Graustufen. Bleibt alles verständlich, ist die Regel erfüllt.

Welche Farbkombinationen sind für Farbsehschwäche problematisch?

Bei Rot Grün Schwäche verschwimmen Rot und Grün, Grün und Braun, Blau und Lila sowie Rosa und Grau. Bei Blau Gelb Schwäche sind es Blau und Grün sowie Gelb und Rosa. Sicherer sind Kombinationen mit deutlichem Helligkeitsunterschied und geprüfte Paletten wie Okabe Ito oder Viridis für Diagramme.

Was ist der Unterschied zwischen Color Accessibility und Farbkontrast?

Farbkontrast ist ein messbarer Teil von Color Accessibility: das Helligkeitsverhältnis zweier Farben. Color Accessibility ist der Oberbegriff und umfasst zusätzlich den Verzicht auf Farbe als einziges Signal, Paletten für Farbsehschwäche und den Umgang mit Nutzereinstellungen wie Dark Mode. Kontrast kann perfekt sein und die Seite trotzdem an Farbe scheitern.

Wie mache ich Links barrierefrei, wenn ich sie nur farblich abheben will?

WCAG erlaubt das nur unter Bedingungen: Der Link braucht mindestens 3:1 Kontrast zum umgebenden Text und eine zusätzliche sichtbare Änderung bei Hover und Fokus, etwa eine Unterstreichung. Einfacher und robuster ist die Unterstreichung von Anfang an. Sie funktioniert für alle Nutzer ohne Ausnahme.

Wie mache ich Diagramme barrierefrei in Bezug auf Farbe?

Beschriftet Datenreihen direkt am Element statt nur in einer Legende. Nutzt Muster, Schraffuren oder unterschiedliche Formen für Datenpunkte. Begrenzt die Zahl der Kategorien pro Diagramm. Wählt eine für Farbsehschwäche geprüfte Palette. Und liefert die Daten zusätzlich als Tabelle, das hilft Screenreader Nutzern und jedem, der Zahlen kopieren will.

Wie simuliere ich Farbsehschwäche im Browser?

Firefox bietet im Accessibility Panel unter Simulate die Optionen Protanopie, Deuteranopie, Tritanopie, Achromatopsie und Kontrastverlust. Chrome hat dieselbe Funktion im Rendering Panel der DevTools unter Emulate vision deficiencies. Beide zeigen die Seite live umgerechnet und eignen sich gut für einen schnellen Check vor dem Review.

Reicht ein automatisierter Test für Color Accessibility aus?

Nein. Automatisierung findet Kontrastverstöße bei Text zuverlässig, scheitert aber bei Text auf Bildern, Verläufen und bei der Frage, ob Farbe das einzige Signal ist. Dafür braucht es den manuellen Test in Graustufen und mit Simulation. Beides zusammen, automatisiert in der Pipeline und manuell im Review, ergibt ein belastbares Ergebnis.