Welches Kontrastverhältnis verlangt WCAG?

4,5:1 für Text in normaler Größe und 3:1 für großen Text (24px oder 18,66px fett) sowie bedeutungstragende UI-Komponenten wie Eingabefeld-Rahmen und Icons. Die erweiterte Stufe AAA verlangt 7:1 für Fließtext.

Das Kontrastmodell, das für die nächste WCAG-Generation entwickelt wurde. Statt eines einzelnen Verhältnisses berechnet es einen polaritätsbewussten Lc-Wert, der den wahrgenommenen Kontrast genauer abbildet — besonders bei dunklen Hintergründen und dünnen Schriften. Heute ist es eine Empfehlung, noch keine gesetzliche Vorgabe.

Ist maximaler Kontrast immer besser?

Nein. Jenseits der Untergrenzen bringt mehr Kontrast Blendung statt Lesbarkeit — reines Schwarz auf reinem Weiß liest sich über längere Strecken härter als eine abgemilderte Kombination, die trotzdem jede Anforderung erfüllt. Kontrast hat eine Unter- und eine Komfort-Obergrenze.

Brauchen auch Rahmen und Icons Kontrast?

Bedeutungstragende schon — 3:1 gegenüber ihrer Umgebung. Ein dekorativer Trenner ist ausgenommen; ein Eingabefeld-Rahmen, der als Einziges das Feld markiert, nicht.

Wie verbreitet ist Farbenblindheit?

Etwa 8 % der Männer und 0,5 % der Frauen haben eine Farbsehschwäche, meist Rot-Grün. Ein Design, das damit funktioniert, verlässt sich nie allein auf den Farbton — Helligkeitsunterschiede, Icons und Text tragen die Bedeutung parallel.

Kann eine Palette Kontrast durch Konstruktion statt durch Testen bestehen?

Weitgehend ja. Wenn Text- und Hintergrundrollen aus einer Farbskala abgeleitet werden, in deren Ableitung Kontrast-Untergrenzen eingebaut sind, ist jede Kombination schon vorab geprüft — Testen bestätigt dann, statt zu entdecken.

Kontrast & barrierefreie Farbe: Der praktische Leitfaden

Kontrast ist der eine Teil des Farbdesigns, hinter dem rechtliche Kraft steht: Die Verhältnisse der WCAG legen die Untergrenzen fest, auf die sich Vorschriften beziehen, und die Kunst besteht darin, sie zu erfüllen, ohne per Checker zu gestalten — Paletten zu bauen, in denen jede Text- und Flächenkombination ihre Untergrenze schon durch Konstruktion überschreitet. Dieser Hub bündelt unsere Leitfäden zu den Regeln, der Wissenschaft dahinter und dem neueren APCA-Modell; die praktische Übersicht ist das vollständige Rollen-Set einer Palette mit allen sichtbaren Prüfungen.

Die Untergrenzen und warum es sie gibt

Die Zahlen — 4,5:1 für Fließtext, 3:1 für großen Text und UI-Teile, 7:1 für die erweiterte Stufe — gießen ein Jahrhundert Lesbarkeitsforschung in durchsetzbare Arithmetik. Die Intuition hinter den Stufen ist die Strichstärke: Lesen heißt, Buchstabenformen gegen ihren Hintergrund aufzulösen, und je dünner der Strich, desto mehr Leuchtdichte-Unterschied braucht das Auge, um ihm zu folgen. Deshalb erhält großer Text eine gelockerte Untergrenze — bei 24px übersteht eine Buchstabenform 3:1, woran Fließtext scheitern würde — und deshalb gelten dieselben 3:1 auch für Rahmen, Icons und Eingabefeld-Konturen, die als Formen und nicht als Striche gelesen werden. Die Leitfäden hier behandeln, worauf jede Untergrenze zutrifft, die Ausnahmen (deaktivierte Steuerelemente, Dekoration, Logos) und die ehrlichen Grenzfälle: Stellen, an denen das Verhältnis besteht, das Lesen aber trotzdem leidet, und an denen es scheitert, obwohl es gut aussieht — die Lücken, die ein neueres Modell schließen sollte. WCAG-Kontrastverhältnisse erklärt ist der Referenzartikel für die Zahlen selbst; AA vs. AAA wägt ab, wann sich die erweiterte Stufe lohnt, und warum maximaler Kontrast nicht maximale Lesbarkeit ist behandelt die Komfort-Obergrenze über den Untergrenzen.

Jenseits des Verhältnisses

Das Verhältnis der WCAG behandelt Hell-auf-Dunkel und Dunkel-auf-Hell gleich; die Wahrnehmung tut das nicht. APCA — das polaritätsbewusste Modell, das für die nächste WCAG-Generation entwickelt wurde — bewertet, was das Verhältnis übersieht, und das zählt am meisten bei dunklen Themes und dünner Schrift. Unsere Leitfäden lesen beide Zahlen nebeneinander, so wie es ernsthafte Kontrastarbeit zunehmend tut: das Verhältnis für die Konformität, APCA für das Urteil. Was ist APCA führt bei null ins Modell ein; WCAG 2 vs. APCA kartiert, welche Urteile sich tatsächlich ändern und in welche Richtung — dünne Hell-auf-Dunkel-Schrift ist der klassische Fall, in dem das Verhältnis „bestanden“ sagt und deine Augen widersprechen.

Was ein Verhältnis nicht messen kann

Eine Kontrastprüfung vergleicht zwei Farben; einige der häufigsten Barrierefreiheits-Fehler liegen außerhalb dieses Vergleichs. Etwa 8 % der Männer sehen Rot und Grün als nahe Nachbarn, sodass ein Statussystem, das Bedeutung allein über den Farbton verschlüsselt, jedes Verhältnis bestehen und trotzdem unlesbar sein kann — Design für Farbenblindheit behandelt die drei Arten der Sehschwäche, und verlass dich nie allein auf Farbe ist das Prinzip, das sie alle übersteht. Fokus-Indikatoren scheitern aus einem anderen Grund: Der Kontrast ist da, aber gegen den falschen Nachbarn. Der stillste häufige Fehler ist das Grau, das als Fließtext bestanden hat und dann für Platzhalter und Bildunterschriften wiederverwendet wird — eine Nuance heller, als es die Untergrenze erlaubt. Für Teams, die in der EU ausliefern, macht der European Accessibility Act daraus aus Best Practices Pflichten — was eine wiederholbare Testmethode mehr wert macht als jeder einzelne Checker.

Durch Konstruktion bestehen

Das tiefere Thema dieses Hubs: Kontrast zu testen ist das, was du tust, wenn Kontrast nicht gestaltet wurde. Eine Palette, deren Textrollen gegen ihre Flächen abgeleitet werden — Untergrenzen in die Ableitung eingebaut, jede Kombination schon zur Generierungszeit geprüft — ist von Haus aus barrierefrei, und eine Markenänderung leitet neu ab, statt neu zu auditieren. Auf diesem Modell baut Scale Composer auf: Eine Skala leitet Farbe, Typografie und Raster gemeinsam ab, und Textrollen verlassen den Generator mit bereits angewendeten Kontrast-Untergrenzen. Die Mechanik steckt in unserem Leitfaden zu Farbskalen; die Dark-Mode-Hälfte der Geschichte steht unter Dark Mode.

Leitfäden in diesem Hub

AA oder AAA: Welches Level solltest du anstreben?
WCAG AA und AAA im Kontrast-Vergleich: was das 7:1-Minimum eine Palette kostet, berechnet; wann sich AAA für Fließtext lohnt; warum das W3C von pauschalem AAA abrät.
Der European Accessibility Act und deine Farbpalette
Die Design-Anforderungen des European Accessibility Act erklärt: EN 301 549 verweist auf WCAG 2.1 AA, sodass 4,5:1-Kontrastuntergrenzen in der EU jetzt rechtliches Gewicht haben.
Fokus-Indikatoren, die wirklich sichtbar sind
Barrierefreiheit von Fokus-Indikatoren in der Praxis: warum outline: none Tastaturnutzer im Stich lässt, die 3:1-Regel und der zweifarbige Ring, der auf jeder Oberfläche sichtbar ist.
Kontrast für Rahmen, Icons und UI-Komponenten
Nicht-Text-Kontrast nach WCAG 1.4.11 setzt eine Untergrenze von 3:1 für Rahmen, Icons, Fokusringe und Steuerelement-Zustände — was zählt, was ausgenommen ist und warum.
Kontrast testen: Werkzeuge und Methode
Ein Farbkontrast-Checker auditiert Paarungen eine nach der anderen. Die Methode, die skaliert: Paletten bauen, die schon bei der Ableitung bestehen, dann den Rest scannen und stichprobenartig prüfen.
Kontrastregeln für großen Text
Bei großem Text senkt WCAG die Grenze von 4,5:1 auf 3:1 — aber nur ab 24px normal oder 18,66px fett, bei gerenderter Größe. Die genauen Regeln und Fallstricke.
Platzhalter, Bildunterschrift und Sekundärtext: Die Grau-Falle
Der Kontrast von Platzhaltertext ist die Grau-Falle: warum #999 bei 2,8:1 durchfällt, warum #767676 das barrierefreie Grau bei 4,5:1 ist und wie du zurücknimmst, ohne auszuschließen.
Protanopie, Deuteranopie, Tritanopie: Design für Farbenblindheit
Farbenblindheit im Design, erklärt nach Zapfentyp: Was Protanopie, Deuteranopie und Tritanopie tatsächlich sehen, welche Palettenpaare zusammenfallen und wie du sie behebst.
Verlass dich nie allein auf Farbe
Verlass dich nie allein auf Farbe: die WCAG-1.4.1-Regel für Barrierefreiheit. Warum Farbe nicht das einzige Signal sein darf, klassische Fehler und die redundanten Lösungen, die nichts kosten.
Warum maximaler Kontrast nicht maximale Lesbarkeit ist
Zu viel Kontrast gibt es wirklich: warum schwarzer Text auf Weiß bei 21:1 blenden kann, wo das angenehme Leseband liegt und warum WCAG-Verhältnisse Untergrenzen sind, keine Zielwerte.
Was ist APCA?
APCA bewertet Kombinationen als Lc — polaritätsbewusst, schriftbewusst — statt als Verhältnis. Was die Zahlen bedeuten und warum WCAG 2.x weiterhin über die Konformität entscheidet.
WCAG 2 vs. APCA: Was sich ändert
APCA vs. WCAG-Kontrast an berechneten Paarungen verglichen: wo die beiden Modelle uneinig sind — dunkle Paare, Polarität, Schriftstärke — und wie du beide Zahlen liest.
WCAG-Kontrastverhältnisse erklärt (4,5:1, 3:1, 7:1)
Die WCAG-Kontrast-Schwellenwerte erklärt: 4,5:1 für Fließtext, 3:1 für großen Text und UI-Komponenten, 7:1 für AAA — mit sechs berechneten echten Paarungen.

Finde die Grenzen deiner Palette

Regeln bleiben hängen, wenn du sie hast greifen sehen: öffne eine Palette und bewege eine Textfarbe auf ihren Hintergrund zu — sieh zu, wie das Verhältnis unter 4,5:1 fällt, sieh, wo APCA dem Verhältnis widerspricht, und finde den genauen Schritt, an dem die Kombination aufhört zu funktionieren. Diese Grenze, einmal in deiner eigenen Palette gefunden, lehrt mehr als jede Tabelle von Anforderungen.