WCAG & BFSG · WCAG in der Praxis

Farbkontrast Website: Grenzwerte, Prüfung, Praxis

Von Jakob Sommer Zuletzt geändert am 18. Juni 2026

Text auf Websites braucht nach WCAG 1.4.3 (Stufe AA) ein Kontrastverhältnis von mindestens 4,5:1 – großer Text ab 24 px bzw. 18,7 px fett mindestens 3:1. Grafische Bedienelemente, ihre Zustände, Fokus-Indikatoren und informationstragende Grafiken brauchen nach 1.4.11 mindestens 3:1 gegen angrenzende Farben. Ausgenommen sind unter anderem Logos, deaktivierte Elemente, rein dekorative Inhalte und Fotos; verbindlich ist das in Deutschland über BFSG und BITV 2.0.

Zu schwacher Kontrast ist der häufigste messbare Barrierefreiheits-Fehler: Die WebAIM Million fand im Februar 2026 auf 83,9 % von einer Million Startseiten Kontrastfehler – im Schnitt 34 Stellen pro Seite, 15 % mehr als im Vorjahr. Wen schwache Kontraste aussperren, zeigt Sehbehinderung & Blindheit.

Das Wichtigste in Kürze

1.4.3 (AA): Text mindestens 4,5:1; großer Text ab 24 px bzw. 18,7 px fett mindestens 3:1.
1.4.11 (AA): Bedienelemente, ihre Zustände, Fokus-Indikatoren und informationstragende Grafiken mindestens 3:1 zu angrenzenden Farben.
Ausnahmen: Logos und Markennamen, deaktivierte Elemente, rein dekorative Inhalte, Fotos, native Browser-Darstellung.
Keine Rundung: 4,499:1 verfehlt die 4,5:1 – die Werte gelten exakt.
1.4.6 (AAA): 7:1 bzw. 4,5:1 – Empfehlung, keine Pflicht nach BITV/EN 301 549.
WebAIM Million, Februar 2026: 83,9 % von 1 Million Startseiten haben Kontrastfehler, im Schnitt 34 Stellen pro Seite.
Rechtsgrundlage: BFSG (seit 28.06.2025) und BITV 2.0 verlangen über EN 301 549 V3.2.1 das WCAG-2.1-Niveau AA.
APCA/WCAG 3: Stand Juli 2026 nur ein Working Draft – verbindlich bleibt das Kontrastverhältnis nach WCAG 2.

Woher die Grenzwerte kommen

Das Kontrastverhältnis vergleicht die Leuchtdichte zweier Farben auf einer Skala von 1:1 (identische Farben) bis 21:1 (Schwarz auf Weiß). 3:1 ist der Basiswert für normale Sehschärfe aus ISO 9241-3 und der ANSI-Norm; eine auf 20/40 reduzierte Sehschärfe kostet grob den Faktor 1,5 an Kontrastempfindlichkeit – daraus wird 3 × 1,5 = 4,5:1, der AAA-Wert 7:1 kompensiert etwa 20/80. Die Herleitung steht im Understanding-Dokument zu 1.4.3 des W3C.

4,5:1 ist damit eine Untergrenze für „gerade noch lesbar“, kein Komfortwert – viele sehbehinderte Menschen brauchen mehr. Reines Schwarz auf Weiß ist trotzdem nicht nötig: #111111 auf #FAFAFA liegt bei rund 18:1 und liest sich angenehmer.

1.4.3: Kontrast von Text (Stufe AA)

1.4.3 „Kontrast (Minimum)“ fordert für normalen Text 4,5:1 und für großen Text 3:1. „Groß“ beginnt bei 18 pt bzw. 14 pt fett – in CSS-Pixeln (Referenz 96 dpi) 24 px bzw. exakt 18,66 px, in der deutschen BITV-Prüfpraxis auf 18,7 px gerundet. Das geringere Verhältnis genügt, weil dickere Strichstärken die kleinere Farbdifferenz ausgleichen.

Drei Regeln aus dem Understanding-Dokument:

Es wird nicht gerundet. 4,499:1 verfehlt die 4,5:1, 2,999:1 verfehlt die 3:1.
Gemessen wird der definierte CSS-Wert, nicht das gerenderte Pixel. Anti-Aliasing rendert dünne Schriften blasser – dünne Schnitte sind kontrastkritischer, als der Messwert verspricht.
Alle Zustände zählen – auch die Linkfarbe bei :hover, der Text im fokussierten Button und die Beschriftung im aufgeklappten Menü.

Platzhaltertext ist nicht ausgenommen: Das Standard-Hellgrau der Browser unterschreitet 4,5:1 regelmäßig, und die BITV-Prüfpraxis nimmt Platzhalter nur aus, wenn eine redundante sichtbare Beschriftung die Anforderung erfüllt – ein Grund mehr, placeholder nie als Label-Ersatz zu benutzen. Schriftgrafiken auch nicht: Text als Bild unterliegt denselben Werten, obwohl 1.4.5 „Bilder von Text“ solche Grafiken ohnehin weitgehend untersagt.

Die fünf Ausnahmen von 1.4.3

Inaktive UI-Komponenten – ein deaktivierter Button darf blass sein.
Rein dekorativer Text, der keine Information trägt.
Für niemanden sichtbarer Text (etwa versteckte Skip-Links im Ruhezustand).
Text als Teil eines Bildes mit signifikantem anderem Bildinhalt – das Ladenschild im Foto einer Straßenszene.
Logos und Markennamen.

Ausnahme heißt kein Verstoß – nicht, dass Blassgrau eine gute Idee wäre.

Definiere immer beide Farben. Wer nur color setzt, erbt den Hintergrund von irgendwo – und kollidiert mit Nutzer-Stylesheets oder erzwungenen Farbschemata:

/* Riskant: Hintergrund kommt von wer-weiß-woher */
.hinweisbox { color: #555555; }

/* Robust: Das Farbpaar ist definiert und prüfbar */
.hinweisbox {
  color: #444444;
  background-color: #f5f0e8; /* 8,6:1 – geprüft */
}

1.4.11: Nicht-Text-Kontrast (Stufe AA)

1.4.11 „Nicht-Text-Kontrast“ verlangt 3:1 gegen angrenzende Farben für zwei Gruppen: visuelle Informationen, die Bedienelemente und ihre Zustände erkennbar machen, und Grafikteile, die zum Verständnis nötig sind. Das Understanding-Dokument zu 1.4.11 enthält vier Feinheiten:

Die Rahmen-Regel. Ein Rahmen braucht nur dann 3:1, wenn das Element ausschließlich über ihn erkennbar ist: Ein Button mit kontrastreicher Beschriftung braucht keine kontrastierende Umrandung, ein leeres Eingabefeld dagegen schon.
Zustände untereinander brauchen keine 3:1. Aber jedes Merkmal, das einen Zustand anzeigt – das Häkchen in der Checkbox, der Pfeil am geöffneten Menü – braucht 3:1 gegen die angrenzenden Farben.
Eigene Hover-Effekte sind Zugabe: eine selbst hinzugefügte Tönung gilt als ergänzende Information ohne 3:1-Pflicht – der Text darüber muss aber 1.4.3 erfüllen.
Icon neben Text: Erfüllt die Beschriftung die Kontrastanforderung, ist das ergänzende Icon redundant und braucht keine 3:1.

Wichtigster Anwendungsfall ist der Fokus-Indikator: Zusammen mit 2.4.7 „Fokus sichtbar“ muss er 3:1 gegen den angrenzenden Hintergrund erreichen. outline: none ohne Ersatz ist der Klassiker:

/* Fehler: Fokus-Ring entfernt, kein Ersatz */
button:focus { outline: none; }

/* Sichtbarer Ersatz mit ausreichendem Kontrast */
button:focus-visible {
  outline: 3px solid #1a5fb4; /* 6,3:1 auf Weiß */
  outline-offset: 2px;
}

Wie Fokus-Reihenfolge und Sichtbarkeit zusammenspielen, steht unter Tastatur & Fokus.

Die Ausnahmen von 1.4.11: inaktive Bedienelemente, die native, vom Autor unveränderte Browser-Darstellung (die Standard-Checkbox gilt als erfüllt – sobald du sie stylst, bist du verantwortlich), Logos, Flaggen, Fotos und Screenshots, Diagramme mit fachlich festgelegten Farben sowie Heatmaps und Farbskalen, bei denen die Farbe selbst der Messwert ist.

1.4.6: Die AAA-Stufe als Ausblick

1.4.6 „Kontrast (erhöht)“ verlangt auf Stufe AAA 7:1 für normalen und 4,5:1 für großen Text und ersetzt dort 1.4.3. Weder BITV 2.0 noch EN 301 549 fordern das – eine Empfehlung, sinnvoll bei viel Lesetext oder älterer Zielgruppe: Wer den Fließtext bei 10:1 ansiedelt, muss über 1.4.3 nie wieder nachdenken.

1.4.1: Farbe allein trägt keine Information

1.4.1 „Benutzung von Farbe“ verlangt, dass Farbe nie das einzige Unterscheidungsmerkmal ist: Links brauchen ein zweites Signal (klassisch die Unterstreichung), Fehlerfelder Text oder Symbol statt bloß Rot – siehe die barrierefreien Fehlermeldungen –, Diagramme Beschriftungen oder Muster. Schnelltest: die Seite in Graustufen schalten – verschwindet eine Information, fehlt das zweite Signal.

Schwierige Fälle: Fotos, Verläufe, Transparenz

Text auf Bildern

Gemessen wird gegen den Hintergrund, über dem der Text steht – beim Foto gegen die kontrastärmste betroffene Bildstelle. Da Redaktionsbilder wechseln, hilft nur eine Fläche, die den Worst Case kontrolliert: eine einfarbige Unterlegung oder ein abdunkelndes Overlay (Scrim):

.hero { position: relative; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 0.6); /* Scrim */
}
.hero-titel {
  position: relative;
  z-index: 1;
  color: #ffffff;
}

Die effektive Farbe einer halbtransparenten Fläche ist pro Kanal Alpha × Overlay + (1 − Alpha) × Untergrund. Ein schwarzes Scrim mit 60 % Deckkraft macht aus der hellsten Bildstelle (Weiß) effektiv #666666 – weißer Text darauf erreicht 5,7:1, egal welches Foto darunter liegt.

Halbtransparente Flächen

Dieselbe Rechnung entlarvt beliebte Gestaltungen: Ein weißes Panel mit 60 % Deckkraft über einer schwarzen Bildstelle ergibt effektiv #999999; dunkelgrauer Text #333333 darauf kommt auf 4,43:1 – und fällt wegen der Nicht-Rundungs-Regel durch, obwohl es „fast passt“. Entweder Deckkraft erhöhen oder Textfarbe abdunkeln.

Verläufe

Über einem Verlauf gilt wieder: die kontrastärmste Textstelle messen. Für Grafiken nach 1.4.11 ignoriert die BITV-Prüfpraxis alle Verlaufsanteile unter 3:1 und beurteilt, ob der kontrastreichere Rest die Information noch vermittelt; das W3C-Understanding nimmt bei leichtem Verlauf die zentrale Farbe der Fläche als Messwert.

Dark Mode: gleiche Werte, andere Wahrnehmung

Die Grenzwerte gelten im dunklen Farbschema unverändert – die Wahrnehmung kippt aber. Menschen mit Astigmatismus berichten, dass reines Weiß auf reinem Schwarz ausstrahlt (Halation); dünne Schriftschnitte wirken auf dunklem Grund schneller brüchig. Bewährt haben sich abgetönte Paare: #E6E6E6 auf #121212 liegt bei rund 15:1 – komfortabel über der Anforderung, ohne zu blenden. Dazu kommt das Umgebungslicht: helle Schrift auf dunklem Grund blendet abends weniger. Beide Modi sind eigene Farbwelten und werden getrennt geprüft.

Eine Markenpalette kontrastfest machen

Der häufigste Einwand in Projekten: „Das CI gibt die Farben vor.“ Mein Vorgehen in drei Schritten:

Ist-Analyse aller Paare. Der Kontrast-Check misst live die ganze Palette einer URL.
Pro Farbe entscheiden: Fläche oder Text? Ein Marken-Orange wie #FF8C00 erreicht auf Weiß nur rund 2,3:1 – als Textfarbe unbrauchbar. Als Button-Fläche mit dunkler Beschriftung (#1A1A1A darauf: rund 7,5:1) bleibt es voll nutzbar.
Text-Varianten abdunkeln oder aufhellen. Aus #FF8C00 wird als Textfarbe ein abgedunkeltes ~#B35E00 mit 4,6:1 auf Weiß. Solche Tint- und Shade-Rampen dokumentierst du samt erlaubter Kombinationen an den Design-Tokens – die geprüften Werte gehören als Kommentar in den Code, etwa der Fließtext mit rund 15:1 und das Primärblau mit 6,3:1 auf Weiß.

Die Original-Farbe lebt so in Flächen, Illustrationen und großen Headlines weiter, nur kleiner Text bekommt die geprüfte Variante. Stark gesättigte Komplementärfarben nebeneinander (Rot auf Grün, Blau auf Orange) vermeide ich unabhängig vom Messwert – sie flimmern auch bei ausreichendem Kontrast.

So testest du es

Vollautomatisch geht es nicht: Hintergrundbilder, Verläufe und die Ausnahmen brauchen ein menschliches Auge. Mein Ablauf:

Die ganze Seite scannen: Der Kontrast-Check bewertet alle Text-Hintergrund-Paare einer URL auf einmal, inklusive Farbvorschlägen; WebAIM Contrast Checker und kontrastrechner.de liefern Einzelwerte.
Grenzfälle mit der Pipette messen: Der Colour Contrast Analyser (TPGi) misst jede Bildschirmstelle – auch über Fotos und Verläufen. Die BITV-Prüfpraxis sieht die reine Sichtprüfung nur als Vorfilter; eine Toleranzschwelle fürs Augenmaß nennt der Prüfschritt nicht.
DevTools nutzen: Der Farbwähler in Chrome und Edge zeigt Kontrastverhältnis und AA-Bewertung an; mit den Zustands-Schaltern (:hov) prüfst du Hover, Fokus und Aktiv-Zustand.
Beide Farbschemata prüfen: in den DevTools prefers-color-scheme emulieren und den Durchgang für den Dark Mode wiederholen.
Fehlende Farbdefinitionen aufspüren: Ein simuliertes Nutzer-Stylesheet mit html { background-color: black; color: white; } zeigt sofort, wo nur eine der beiden Farben definiert ist.
Ausnahmen bewusst abhaken: Logo, deaktivierte Elemente, Fotos – kurz notieren, was warum ausgenommen ist.

Wie sich der Check in einen Selbsttest einfügt, steht unter Barrierefreiheit selbst testen; die offizielle Prüfvariante beschreibt BITV-Test & Audit.

APCA und WCAG 3: der Stand im Juli 2026

Die WCAG-2-Formel hat bekannte Schwächen: Sie modelliert keine Farbfehlsichtigkeit, unterscheidet nicht zwischen heller und dunkler Polarität und ignoriert die Schriftstärke jenseits der Groß-Text-Schwelle. Der Nachfolge-Kandidat APCA (Accessible Perceptual Contrast Algorithm) liefert statt Verhältniszahlen Lc-Werte, die Schriftgröße, Schriftstärke und Polarität einbeziehen; Richtwerte sind Lc 45 für große Headlines (36 px normal, 24 px fett), Lc 60 für Nicht-Fließtext, Lc 75 als Fließtext-Minimum (18 px normal, 14 px fett) und Lc 90 als APCA-Wunschwert für Fließtext. Wie unterschiedlich beide urteilen, zeigt das Orange-Button-Dilemma: Auf gebranntem Orange (#C05621) liegen Weiß und Schwarz nach WCAG 2 mit rund 4,6:1 fast gleichauf, während APCA Weiß mit Lc 76 klar vor Schwarz (Lc 33) sieht; bei kräftigem #FF8C00 raten beide zu Schwarz.

Stand Juli 2026 gilt aber: Der WCAG-3.0-Working-Draft vom 3. März 2026 nennt APCA nicht einmal namentlich, der Kontrast-Abschnitt trägt den Reifegrad „Developing“, Konformitätsstufen sind offen. Das W3C schreibt selbst, WCAG 3 brauche „still … several years of work“, und stellt klar, dass WCAG 3 die WCAG 2 nicht ablöst. Wer heute allein nach APCA gestaltet, riskiert rechtlich nicht konforme Farbpaare. Mein Rat: APCA als zusätzlichen Qualitätscheck nutzen, besonders für Schriftstärken und Dark Mode – den Nachweis führst du nach WCAG 2 AA.

Der rechtliche Rahmen

Das BFSG verlangt seit dem 28. Juni 2025 für die erfassten Produkte und Dienstleistungen Barrierefreiheit; über die Norm EN 301 549 V3.2.1 läuft das auf WCAG 2.1 Stufe AA hinaus – also auf 1.4.3 und 1.4.11, nicht auf die AAA-Werte aus 1.4.6. Eine fürs BFSG harmonisierte Fassung fehlt im EU-Amtsblatt noch; V4.1.1 soll WCAG 2.2 AA bringen. Für öffentliche Stellen ist V3.2.1 über die BITV 2.0 verbindlich. Was das BFSG insgesamt fordert, erklärt BFSG einfach erklärt; Neuigkeiten zu Auslegung und Marktüberwachung sammelt Aktuelles zum BFSG. Diese Seite erklärt die Rechtslage, ersetzt aber keine Rechtsberatung.

Häufiger Fehler in der Praxis

Vier Fehlerbilder aus fast jeder Prüfung:

Der hellgraue Formular-Look. Feldrahmen in #CCCCCC auf Weiß (1,6:1 statt 3:1) und Platzhalter in #999999 (2,8:1 statt 4,5:1) als einzige Beschriftung – ein Formular reißt 1.4.11 und 1.4.3 gleichzeitig, meist geerbt aus dem Standard-Theme eines UI-Kits.
outline: none aus dem alten CSS-Reset. Der Fokus-Ring wurde „wegen der Optik“ entfernt, ein Ersatz kam nie – auffallen tut es erst beim Tastaturtest, deshalb gehört der Tab-Durchgang an den Anfang jeder Prüfung.
Markenfarbe als Textfarbe. Orange oder Hellblau aus dem CI trägt Links und Button-Beschriftungen und liegt auf Weiß unter 3:1. Die Fläche darf die Farbe tragen, der kleine Text nicht – diese Unterscheidung fehlt in fast jedem Styleguide.
Dark Mode als Nachschuss. Pauschal invertiert oder aus halbtransparenten Weißtönen gebaut, die Paare nie einzeln geprüft. Typisches Symptom: Sekundärtext mit 3,8:1 auf Dunkelgrau, der im hellen Modus problemlos bestand.

Häufige Fragen

Welcher Farbkontrast ist für Websites vorgeschrieben?

Text braucht mindestens 4,5:1, großer Text ab 24 px bzw. 18,7 px fett mindestens 3:1 (WCAG 1.4.3); Bedienelemente, ihre Zustände und informationstragende Grafiken mindestens 3:1 (WCAG 1.4.11). Beide Kriterien liegen auf Stufe AA und sind über BFSG, BITV 2.0 und EN 301 549 der verbindliche Maßstab. Die AAA-Werte von 7:1 aus 1.4.6 sind eine Empfehlung, keine Pflicht.

Was bedeutet ein Kontrastverhältnis von 4,5:1?

Es beschreibt den Leuchtdichte-Unterschied zweier Farben auf einer Skala von 1:1 (kein Unterschied) bis 21:1 (Schwarz auf Weiß). 4,5:1 ist so gewählt, dass Text auch bei einer auf 20/40 reduzierten Sehschärfe lesbar bleibt: der ISO-Basiswert 3:1 multipliziert mit dem Faktor 1,5 für den typischen Verlust an Kontrastempfindlichkeit. Der Wert gilt exakt – 4,499:1 besteht nicht.

Gelten die Kontrastanforderungen auch für Logos?

Nein. Logos und Markennamen sind sowohl von 1.4.3 als auch von 1.4.11 ausdrücklich ausgenommen, ebenso deaktivierte Bedienelemente, rein dekorative Inhalte und Fotos. Die Ausnahme endet aber, sobald die Markenfarbe für normalen Text oder Bedienelemente verwendet wird – dann gelten die vollen Grenzwerte, und genau dort scheitern die meisten Corporate Designs.

Muss Platzhaltertext in Formularen die Kontrastanforderungen erfüllen?

Ja, Platzhaltertext unterliegt 1.4.3 und braucht 4,5:1. Die BITV-Prüfpraxis macht nur eine Ausnahme: wenn eine redundante, sichtbare Beschriftung mit ausreichendem Kontrast dieselbe Information trägt. Da Platzhalter beim Tippen ohnehin verschwinden, ist ein echtes, dauerhaft sichtbares Label die bessere Lösung – der Kontrast des Platzhalters wird dann zweitrangig.

Was ist APCA und gilt der neue Kontrast-Algorithmus schon?

APCA ist ein wahrnehmungsbasierter Kontrast-Algorithmus, der Lc-Werte statt Verhältniszahlen liefert und Schriftgröße, Schriftstärke und Polarität einbezieht. Verbindlich ist er nicht: Der WCAG-3-Working-Draft vom 3. März 2026 nennt APCA nicht namentlich und legt keinen Kontrast-Algorithmus fest. Stand Juli 2026 bleibt das Kontrastverhältnis nach WCAG 2 AA der rechtliche Maßstab; APCA taugt als zusätzlicher Qualitätscheck.

Quellen

Understanding SC 1.4.3 Contrast (Minimum) (W3C WAI – Grenzwerte, Herleitung, Ausnahmen, Nicht-Rundung, Anti-Aliasing)
Understanding SC 1.4.11 Non-text Contrast (W3C WAI – Rahmen-Regel, Zustände, Fokus-Indikator, Ausnahmen)
BIK BITV-Test, Prüfschritt 1.4.3 (deutsche Prüfpraxis: Werkzeuge, Platzhalter, 18,7-px-Schwelle)
WebAIM Million 2026 (Kontrastfehler auf 83,9 % von 1 Million Startseiten)
WCAG 3.0 Working Draft vom 3. März 2026 (W3C – Status von Kontrast-Guideline und Konformitätsmodell)
Barrierefreiheitsstärkungsgesetz (BFSG) (Gesetzestext im Wortlaut)