Das Kontrastverhältnis zweier Farben ist eine einzige Zahl von 1:1 bis 21:1, und WCAG entscheidet damit, ob Text lesbar ist. Schwarz auf Weiß ist mit exakt 21:1 das Maximum. Dieses Tool berechnet das Verhältnis und sagt dir, welche Schwellen du schaffst — doch diese Zahl verdient mehr Skepsis, als ihr üblicherweise entgegengebracht wird.
Was die Schwellen tatsächlich sind
WCAG 2.x definiert vier, die dir praktisch begegnen. AA verlangt 4,5:1 für normalen Text und 3:1 für großen Text. AAA hebt das auf 7:1 und 4,5:1. AA ist die Stufe, auf die sich die meiste Gesetzgebung bezieht, einschließlich des European Accessibility Act; AAA ist ein Ideal, und die Spezifikation selbst empfiehlt nicht, es für eine ganze Website zu fordern.
"Groß" hat eine präzise Definition, die viele erwischt: 18pt, also 24px, oder 14pt fett, also 18,66px. Nicht "eine Überschrift". Eine 20px-Überschrift ist für WCAG normaler Text und braucht die vollen 4,5:1.
Um den Zahlen einen physischen Anker zu geben: Auf weißem Grund landet #767676 bei 4,54:1 und ist das hellste Grau, das AA schafft. #595959 trifft exakt 7:1 für AAA. Alles Hellere als #767676 auf Weiß fällt für Fließtext durch — was die meisten Grautöne ausschließt, zu denen Designer instinktiv greifen.
Die Formel misst Leuchtdichte, nicht Lesbarkeit
Das ist der Teil, den zu verstehen sich lohnt, denn bestehen ist nicht dasselbe wie lesbar sein. Das Verhältnis wird aus der relativen Leuchtdichte berechnet, die die Kanäle danach gewichtet, wie stark jeder zur empfundenen Helligkeit beiträgt: Grün zählt 0,7152, Rot 0,2126 und Blau nur 0,0722.
Diese Gewichtung erzeugt ein spezifisches, nachweisbares Versagen. Reines Blau #0000FF auf Weiß erreicht 8,59:1 — bequem über AAA. Wer je einen Absatz in reinem Blau zu lesen versucht hat, weiß, dass es Arbeit ist: Das Auge kann blaues Licht nur schwer scharf stellen, und in der Netzhautmitte gibt es sehr wenige blauempfindliche Zapfen. Die Formel sieht eine sehr dunkle Farbe. Deine Augen sehen eine unscharfe. Die Prüfung besteht, und der Text bleibt schlecht.
Die Formel ist symmetrisch, das menschliche Sehen nicht
Hier der Mangel, der 2025 am meisten zählt, wo Dark Mode überall ist. WCAG 2 behandelt das Farbpaar als ungeordnet — es weiß nicht und kümmert sich nicht darum, welche Farbe Text und welche Hintergrund ist. Menschliches Sehen ist nicht so neutral.
Man kann dem Problem zusehen. Das Grau #949494 erreicht auf Weiß 3,03:1 und fällt damit für Fließtext durch AA. Dasselbe Grau auf Schwarz erreicht 6,92:1 und segelt durch. Gleiche Farbe, gleiche Formel, völlig anderes Urteil — und nicht, weil Dark Mode wirklich doppelt so lesbar wäre. Heller Text auf dunklem Grund leidet unter Halation: Helle Glyphen bluten ins umgebende Dunkel, dünne Striche werden fett. Die Formel kennt dieses Konzept nicht.
Die Accessibility-Community weiß seit Jahren, dass der WCAG-2-Kontrast ein schlechtes Wahrnehmungsmodell ist. APCA — Accessible Perceptual Contrast Algorithm — ist der Kandidat, der für WCAG 3 entwickelt wird, und er ist gerichtet: Er gibt unterschiedliche Antworten, je nachdem, welche Farbe der Text ist. Er ist noch kein Standard und noch nicht das, woran du gemessen wirst. Bleibt eine pragmatische Haltung: Erfülle die WCAG-2-Zahlen, denn auf sie zielt das Gesetz — und verwechsle das Erfüllen nicht damit, etwas Lesbares gestaltet zu haben.
Die vergessene Anforderung: 3:1 für Nicht-Text
WCAG 2.1 ergänzte das Erfolgskriterium 1.4.11, und es wird ständig übersehen. Nicht-textuelle Elemente, die Bedeutung tragen, brauchen 3:1 gegenüber ihrer Umgebung — der Rahmen eines Eingabefelds, die Kontur einer Schaltfläche, ein Fokusindikator, die Balken eines Diagramms, ein Icon, das die einzige Beschriftung eines Bedienelements ist.
Hier fallen sehr viele ansonsten sorgfältige Designs durch ein Audit. Jener elegante #E5E7EB-Rahmen um ein Formularfeld liegt bei 1,4:1 gegen Weiß. Er fällt durch, und zwar an genau dem Element, das ein Nutzer am dringendsten finden muss. Dieses Tool prüft die vier Textschwellen; die 3:1-Regel für Nicht-Text musst du selbst anwenden, indem du Rahmenfarbe und Hintergrundfarbe in diese beiden Felder setzt und nach 3:1 schaust.
Kontrast ist notwendig, nicht hinreichend
Jedes Verhältnis zu bestehen lässt den häufigsten Accessibility-Fehler unberührt: Information allein über Farbe zu transportieren. Ein roter Feldrahmen, der "ungültig" bedeutet, sagt jemandem, der ihn nicht von den grauen unterscheiden kann, gar nichts — wie gut er auch kontrastiert. Etwa jeder zwölfte Mann hat eine Form von Farbfehlsichtigkeit.
Die Regel: Farbe darf eine Botschaft verstärken, aber nie ihr einziger Träger sein. Ein Fehler braucht ein Icon oder eine Textbeschriftung neben dem Rot. Ein Pflichtfeld braucht ein Sternchen. Ein Liniendiagramm braucht verschiedene Strichmuster, nicht nur verschiedene Farbtöne. Das ist ein eigenes Kriterium — 1.4.1, "Verwendung von Farbe" — und kein Kontrastprüfer wird dir je sagen, dass du daran gescheitert bist.
Häufige Fragen
Wird irgendetwas an einen Server geschickt?
Nein. Dieses Tool ist als "client" gekennzeichnet: Das Verhältnis ist eine in deinem Browser-Tab ausgewertete Formel. Es wird nichts übertragen.
Warum besteht mein Grau auf dunklem Grund und fällt auf hellem durch?
Weil die Beziehung nicht linear ist und die Formel symmetrisch, die Wahrnehmung aber nicht. #949494 ist 3,03:1 auf Weiß und 6,92:1 auf Schwarz — dieselbe Farbe, mehr als doppelter Wert. Ehrlich gelesen sagt dir die Zahl weniger, als sie vorgibt. Baust du ein dunkles Thema, prüfe es mit echten Augen auf einem echten Bildschirm bei echter Helligkeit, denn das Verhältnis wird dir schmeicheln.
Muss Platzhaltertext bestehen?
Ja. Platzhaltertext ist Text, eine Ausnahme gibt es nicht. Das überrascht, weil fast jedes Designsystem ein Platzhalter-Grau ausliefert, das durchfällt. Getrennt erwähnenswert: Platzhalter sollten überhaupt nicht als Beschriftungen dienen — sie verschwinden, sobald jemand tippt, und nehmen die Bedeutung des Felds mit.
Was ist mit deaktivierten Schaltflächen?
Deaktivierte Bedienelemente sind ausdrücklich von den Kontrastanforderungen ausgenommen, eine ausgegraute Schaltfläche darf also durchfallen. Diese Lizenz sollte man vorsichtig nutzen: "darf unlesbar sein" ist nicht "soll unlesbar sein", und ein Nutzer muss trotzdem sehen können, dass das Element existiert, und verstehen, warum es nicht verfügbar ist.
Brauche ich AA oder AAA?
Praktisch AA. Darauf verweist die Accessibility-Gesetzgebung, das prüfen Audits, und das behandelt die Spezifikation selbst als allgemeines Ziel. AAA lohnt sich bei langen Lesetexten, wo es dich nichts kostet, aber die Spezifikation sagt ausdrücklich, dass es für ganze Sites nicht gefordert ist — auch weil bei 7:1 die verbleibende Palette zum Gestalten sehr klein ist.