⇄ Farben tauschen

So funktioniert es

1. Wählen Sie eine Vordergrundfarbe (Text) und eine Hintergrundfarbe.
2. Das Kontrastverhältnis wird sofort aktualisiert.
3. Prüfen Sie die WCAG-Stufen (AA/AAA) für normalen und großen Text.
4. Klicken Sie auf Tauschen, um die Farben zu vertauschen.

Häufige Fragen

Was ist WCAG?

WCAG (Web Content Accessibility Guidelines) sind internationale Standards, um Webinhalte zugänglich zu machen. Stufe AA ist der am häufigsten geforderte Standard. Stufe AAA ist die höchste.

Was zählt als „großer Text"?

Großer Text ist definiert als mindestens 18 pt (24 px) oder 14 pt (18,66 px) fett. Für großen Text gilt eine niedrigere Kontrastanforderung, weil er leichter zu lesen ist.

Welches Kontrastverhältnis soll ich anstreben?

Für Fließtext mindestens 4,5 : 1 (AA). Für die beste Barrierefreiheit zielen Sie auf 7 : 1 (AAA). Überschriften und großer Text benötigen mindestens 3 : 1.

Was WCAG tatsächlich misst

„Kontrast“ in der Web-Barrierefreiheit ist nicht, „wie unterschiedlich die Farben aussehen“, sondern ein präzises Verhältnis der relativen Luminanz zwischen zwei Farben. Luminanz ist eine wahrnehmungsbezogene Näherung dafür, wie hell eine Farbe einem typischen sehenden Betrachter erscheint. Das Verhältnis reicht von 1:1 (zwei Farben mit identischer Luminanz, gegeneinander unsichtbar) bis 21:1 (reines Schwarz #000000 gegen reines Weiß #ffffff). Drei normative WCAG-Erfolgskriterien verwenden dieses Verhältnis:

• 1.4.3 Kontrast (Minimum), Stufe AA: mindestens 4,5:1 für normalen Text, 3:1 für großen Text.
• 1.4.6 Kontrast (erhöht), Stufe AAA: mindestens 7:1 normal, 4,5:1 groß.
• 1.4.11 Nicht-Text-Kontrast, Stufe AA (in WCAG 2.1 hinzugefügt), mindestens 3:1 für UI-Komponenten und bedeutungstragende grafische Objekte gegen angrenzende Farben.

Die Untergrenze von 4,5:1 ist nicht willkürlich. WCAGs eigene Herleitung verwendet eine ANSI-Basis von 3:1 für normales Sehen, multipliziert mit 1,5 für Nutzer mit einer Sehschärfe von 20/40 (die Schwelle, die oft zur Definition von rechtlich „eingeschränktem Sehvermögen“ dient). 4,5 = 3 × 1,5. Die AAA-Schwelle von 7:1 überträgt dieselbe Logik auf etwa 20/80 Sehschärfe. Logos, Markennamen sowie beiläufiger oder dekorativer Text sind ausgenommen, aber alles andere fällt unter die Regel.

Die Formel

Die Kontrastformel in der WCAG-Technik G18 hat drei Schritte. Die Eingaben sind 8-Bit-sRGB-Kanalwerte (0-255), die zunächst jeweils in einen Bereich von 0-1 umgewandelt werden:

1. sRGB linearisieren (die Gammakurve rückgängig machen). Für jeden Kanal V: wenn V ≤ 0,04045, V_linear = V ÷ 12,92; andernfalls V_linear = ((V + 0,055) ÷ 1,055)^2,4. (Ältere WCAG-Dokumente verwendeten 0,03928; das W3C aktualisierte per Errata auf 0,04045, um der formalen sRGB-Spezifikation zu entsprechen, der numerische Unterschied ist vernachlässigbar.)
2. Relative Luminanz berechnen: L = 0,2126·R + 0,7152·G + 0,0722·B (linearisiert). Die Gewichte stammen aus der photopischen Helligkeitsfunktion des CIE-1931-Standardbeobachters; das menschliche Auge ist am empfindlichsten für Grün (~71 %), dann Rot (~21 %), dann Blau (~7 %). Deshalb kann reiner blauer Text auf Weiß den Kontrast verfehlen, obwohl die Farben sehr unterschiedlich aussehen.
3. Das Verhältnis bilden: (L1 + 0,05) ÷ (L2 + 0,05), wobei L1 die hellere und L2 die dunklere Farbe ist. Der Offset von 0,05 modelliert Streulicht auf einem typischen Display und verhindert, dass das Verhältnis explodiert, wenn eine Farbe nahezu schwarz ist.

Durchgerechnetes Beispiel für Schwarz auf Weiß: Weiß hat L = 1,0, Schwarz hat L = 0, also ist das Verhältnis (1 + 0,05) ÷ (0 + 0,05) = 21. Das ist der maximal mögliche Kontrast in sRGB.

Was zählt als „großer Text“?

WCAG definiert großformatigen Text als mindestens 18 Punkt (normale Stärke) oder 14 Punkt fett. Umgerechnet in CSS-Pixel beim vom W3C angegebenen 1pt = 1,333px:

• 18pt = 24px normal
• 14pt fett = 18,66px fett

Die meisten Browser setzen Fließtext standardmäßig auf 16px / 12pt, nicht groß. Ein häufiger Fehler ist, jede Überschrift als groß zu behandeln; ein <h3>, der mit 18px normal gestaltet ist, fällt weiterhin unter die Regel von 4,5:1 für normalen Text.

Der berühmte Grenzfall: #767676 auf Weiß

Designer, die Minimalismus anstreben, wählen oft mittlere Grautöne für Fließtext. Zwei Werte, die für das Auge identisch aussehen, liegen auf entgegengesetzten Seiten der WCAG-Grenze:

Vordergrund	Hintergrund	Verhältnis	AA Normal
#000000	#ffffff	21.00	Bestanden (Max.)
#595959	#ffffff	~7.0	Bestanden + AAA
#767676	#ffffff	4.54	Bestanden (knapp)
#777777	#ffffff	4.48	Durchgefallen
#959595	#ffffff	3.00	Durchgefallen (nur groß)
#ffff00	#ffffff	1.07	Durchgefallen

Eine Verschiebung um ein Hex-Zeichen, der Unterschied zwischen #767676 und #777777, kippt dasselbe aussehende Grau von Bestehen zu Durchfallen, weil WCAG das Aufrunden von Verhältnissen ausdrücklich verbietet. WebAIM nennt #777777 ausdrücklich als einen „häufig verwendeten Grauton“, der AA nicht erfüllt. Dieser einzelne Fallstrick verursacht einen messbaren Anteil der Fehler in automatisierten Audits bei realen Website-Scans.

Wo die Formel zu kurz greift

Die Formel der relativen Luminanz ist schnell und deterministisch, hat aber gut dokumentierte Wahrnehmungsschwächen:

• Symmetrie. WCAG 2 liefert dasselbe Verhältnis, egal ob Sie hellen Text auf dunklen Hintergrund oder dunklen Text auf hellen setzen. Empirische Lesestudien zeigen, dass Hell-auf-Dunkel mehr Kontrast benötigt als Dunkel-auf-Hell, um gleich lesbar zu wirken, teils wegen der Pupillenerweiterung und der „Lichthofbildung“ bei hellen Glyphen auf dunklen Flächen. Dark-Mode-Oberflächen, die WCAG 2 AA bestehen, können sich dennoch ausgewaschen anfühlen.
• Räumliche Blindheit. Die Formel ignoriert Schriftstärke, Strichdicke und Schriftgröße jenseits der Schwelle für großen Text. Eine haarfeine 18px-Schrift und eine 18px-Schrift mit Stärke 900 werden identisch behandelt.
• Übermäßiges Bestehen im Dark Mode. Laut APCA-Dokumentation überschätzt die Formel den Kontrast bei dunklen Farben systematisch. Zwei dunkle Grautöne, die WCAG 2 mathematisch bestehen, können auf einem echten Monitor visuell nicht unterscheidbar sein.

APCA (Accessible Perceptual Contrast Algorithm) ist der Kandidat für den Ersatz, der für WCAG 3 als Prototyp entwickelt wird. Er liefert einen einzelnen vorzeichenbehafteten Lc-Wert von etwa −108 bis +106, berücksichtigt die Polarität und enthält eine Nachschlagetabelle für Schriftstärke und -größe. APCA ist derzeit eine nicht-kommerzielle Beta-Referenz, kein rechtliches Konformitätsziel (Produktivseiten sollten weiterhin WCAG 2.1 / 2.2 AA anstreben), aber eine genauere Lesbarkeitsprüfung, besonders für den Dark Mode. Chrome DevTools hat eine APCA-Vorschau in seinen Farbwähler eingebaut.

Warum das rechtlich wichtig ist

WCAG 2.2 wurde am 5. Oktober 2023 zur W3C-Empfehlung, aber die Kontrastkriterien werden unverändert aus 2.1 übernommen. Farbkontrast ist eines der am häufigsten genannten Probleme in Klagen zur digitalen Barrierefreiheit, und mehrere Rechtsordnungen machen ihn faktisch verpflichtend:

• Vereinigte Staaten, Section 508 (2017 überarbeitet) ist mit WCAG 2.0 AA harmonisiert, sodass 4,5:1 für die Beschaffung des Bundes bindend ist. ADA Title III-Gerichtsurteile haben WCAG AA wiederholt als De-facto-Standard für öffentlich zugängliche kommerzielle Websites zitiert. Das DOJ verabschiedete im April 2024 eine Title II-Regel, die Web-Inhalte von Bundesstaaten und Kommunen verpflichtet, WCAG 2.1 AA zu erfüllen, mit gestaffelten Fristen im weiteren Verlauf dieses Jahrzehnts.
• Europäische Union, EN 301 549 bindet WCAG 2.1 AA ein. Die Compliance-Frist des European Accessibility Act (Richtlinie 2019/882) war der 28. Juni 2025 und umfasst Websites, mobile Apps, E-Commerce, Bankwesen, E-Books und mehr. Kleinstunternehmen sind bei Dienstleistungen ausgenommen. Die Strafen der Mitgliedstaaten variieren.
• Die Pflicht zu „angemessenen Vorkehrungen“ aus dem Vereinigten Königreich, Equality Act 2010 gilt für den privaten und öffentlichen Sektor. Stellen des öffentlichen Sektors sind durch die Barrierefreiheitsverordnung von 2018 gebunden, die EN 301 549 / WCAG 2.1 AA einbezieht.
• Kanada, AODA (Ontario) und der bundesweite Accessible Canada Act verlangen WCAG 2.0 AA, wobei AODAs gestaffelte Fristen längst verstrichen sind.

Farbkontrast vs. Farbenblindheit

Ein häufiger Verwechslungspunkt: Das WCAG-Verhältnis basiert auf Luminanz und bleibt für die meisten farbenblinden Nutzer nützlich; ein aus der Luminanz abgeleitetes Verhältnis von 4,5:1 entspricht einem starken Wahrnehmungssignal, selbst wenn Farbtonhinweise verloren gehen. Deshalb stehen die Kontrastkriterien neben einem separaten Kriterium, 1.4.1 Verwendung von Farbe, das verbietet, sich allein auf Farbe zur Informationsvermittlung zu verlassen. Der Kontrast sagt Ihnen nicht, ob ein Rot-gegen-Grün-Diagramm für einen Deuteranopen lesbar ist, sondern nur, ob jede Farbe einzeln gegen den Diagrammhintergrund kontrastiert. Diagramme und zustandsbehaftete UI brauchen Muster, Beschriftungen oder Formen, die über die Farbe gelegt werden.

Praktische Checkliste

• Fließtext auf Weiß: Bleiben Sie für AAA bei #595959 oder dunkler; #767676 ist der hellste Grauton, der AA Normal noch besteht.
• Marken-Blautöne: Viele fallen in den Bereich 3 bis 4,5. #1976d2 ist ein typisches Material-Blau bei etwa 4,59:1, es besteht AA Normal auf Weiß ganz knapp. #42a5f5 mit etwa 2,6:1 fällt durch.
• Formularränder: Ein Rahmen 1px solid #ccc auf Weiß liegt bei etwa 2,13:1, er erfüllt 1.4.11 nicht. Verwenden Sie #767676 oder dunkler.
• Fokus-Indikatoren müssen 3:1 gegen den Hintergrund erreichen. Die Standard-Browser-Umrandung wird oft durch Reset-CSS überschrieben, ohne einen Ersatz, der die Schwelle erfüllt.
• Platzhaltertext ist technisch gesehen beiläufig, aber Nutzer lesen ihn durchaus; behandeln Sie ihn, als gälte 4,5:1.
• Verlassen Sie sich beim Dark Mode nicht auf das Auge. WCAG-2-Verhältnisse lassen dunkle Hintergründe systematisch zu leicht bestehen. Gegenprüfen mit APCA in Chrome DevTools.

Weitere Fragen

Warum fällt reines Gelb auf Weiß durch, obwohl es hell aussieht?

Gelb (#ffff00) auf Weiß ist 1,07:1, fast gar kein Kontrast. Die Luminanzformel gewichtet Grün mit 71 % und Rot mit 21 %, sodass Gelb (R+G) eine Luminanz sehr nahe an der von Weiß hat. Gelb auf Schwarz ist dagegen 19,56:1, eine der bekanntesten gut lesbaren Kombinationen, weshalb es für Verkehrsschilder und Schutzhelm-Warnungen verwendet wird.

Sollte ich immer AAA anstreben?

Nein. WCAG selbst sagt: „Es wird nicht empfohlen, die Konformität mit Stufe AAA als allgemeine Richtlinie für ganze Websites zu verlangen, weil es nicht möglich ist, alle Erfolgskriterien der Stufe AAA für manche Inhalte zu erfüllen.“ AA ist fast überall das rechtliche Ziel; AAA ist für informationskritisches Lesen mit hohem Einsatz gedacht (Langform-Inhalte, für die breite Öffentlichkeit bestimmte Behördendokumente, barrierefreiheitsorientierte Publikationen).

Können automatisierte Werkzeuge jeden Kontrastfehler erkennen?

Nein. axe-core, Lighthouse und ähnliche Audits melden Fehler bei Text auf einfarbigem Hintergrund zuverlässig, aber sie können keinen Text prüfen, der über Hintergrundbildern, CSS-Verläufen, Pseudoelement-Hintergründen oder CSS-Rahmenfarben liegt; diese werden als „unvollständig“ markiert und brauchen eine manuelle Prüfung. Ein Live-Picker wie dieser ist unabhängig davon nützlich, um die dominante Hintergrundfarbe aus einem Bild zu entnehmen und nur das Text-/Hintergrund-Paar vor der Auslieferung zu prüfen.

Unterstützt dieses Werkzeug Transparenz / Alpha?

Diese Seite prüft undurchsichtige Hex-Paare. Wenn Ihr Text oder Hintergrund Alpha verwendet, hängt der tatsächliche Kontrast davon ab, was dahinter liegt; Sie müssen zuerst den zusammengesetzten Vordergrund berechnen und die resultierende undurchsichtige Farbe prüfen.

Werden Daten an einen Server gesendet?

Nein. Die Luminanzformel und das Verhältnis werden in Ihrem Browser berechnet; die Farben verlassen Ihr Gerät nie. Die Seite funktioniert offline, sobald sie geladen ist.

Verwandte Tools