Ein Tag inhouse mit Roland Golla, offizieller Cypress Ambassador und seit über 20 Jahren in Testing und Refactoring zu Hause. Auf unserem YouTube Kanal zeigt er in über 70 Live Coding Tutorials, wie Cypress in echten Projekten läuft. Dazu kommt unser Open Source Plugin NCA TESTIFY: Basistests für jede Website, mit einer Zeile im CI/CD Setup. Im Workshop lernt euer Team Setup, stabile Selektoren, Custom Commands und Tests in der Pipeline.
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');
});
});
});
We often design with only one type of color vision in mind: our own.
Farbkontrast Rechner 2026: Wie die WCAG Formel rechnet, welche Werte gelten, welche Rechner es gibt und wie ihr Farbpaare automatisch prüft. Im NCA Glossar.
Mehr erfahren
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
