Diese Seite wurde mit AI-Unterstützung übersetzt. Das englische Original ist maßgeblich.
Kontrast ist das Fundament der Leserlichkeit. Eine Buchstabenform kann wunderschön gezeichnet, großzügig zugerichtet und in angenehmer Größe gesetzt sein — und dennoch versagen, wenn sie sich nicht sauber vom Hintergrund löst. 2005 konnten wir kaum mehr sagen als „dunkle Schrift auf hellem Grund, und reichlich Unterschied dazwischen“. Heute ist Kontrast messbar, prüfbar und in vielen Rechtsordnungen gesetzlich verankert — und die Messung selbst ist zum Gegenstand ernsthafter Forschung geworden.
Das Kontrastmodell der WCAG 2.x
Die Web Content Accessibility Guidelines 2.x definieren Kontrast als Verhältnis der relativen Leuchtdichte zweier Farben, von 1:1 (identisch) bis 21:1 (reines Schwarz auf reinem Weiß). Drei Erfolgskriterien wenden es an:
- 1.4.3 Contrast (Minimum), Level AA — Fließtext muss 4,5:1 erreichen; großer Text (etwa 24 Pixel oder 19 Pixel fett) darf auf 3:1 sinken.
- 1.4.6 Contrast (Enhanced), Level AAA — 7:1 für Fließtext, 4,5:1 für großen Text, gedacht für Lesende mit mäßig eingeschränktem Sehvermögen.
- 1.4.11 Non-text Contrast, Level AA — 3:1 für Interface-Komponenten und bedeutungstragende Grafiken: Eingabefeldränder, Fokusindikatoren, Icons, Diagrammelemente.
Wo die Mathematik zu kurz greift
Die Formel der WCAG 2.x ist ein physikalisches Maß, kein perzeptuelles, und ihre Grenzen sind inzwischen von der Arbeitsgruppe selbst gut dokumentiert. Das Verhältnis behandelt Polarität als symmetrisch: Es bewertet Weiß-auf-Schwarz identisch mit Schwarz-auf-Weiß, obwohl das Auge beides nicht identisch erlebt. Es erfasst Strichstärke und Schriftgröße nur über eine einzige grobe Schwelle für „großen Text“, obwohl sich eine dünne, leichte Schriftart bei 16 Pixeln und eine fette beim selben Verhältnis sehr unterschiedlich lesen. Und nahe dem dunklen Ende des Spektrums kann die Formel Farbpaare bestehen lassen, die menschliche Beobachter als schwach beurteilen, während sie Paare durchfallen lässt, die sich akzeptabel lesen.
Die APCA-Forschungsrichtung
Die Entwurfsarbeit an WCAG 3.0 enthält einen Ersatzkandidaten, den Accessible Perceptual Contrast Algorithm (APCA), entwickelt im Rahmen der Forschung des W3C zum visuellen Kontrast. Er unterscheidet sich vom 2.x-Modell in drei wichtigen Punkten: Er ist perzeptuell fundiert statt rein leuchtdichtebasiert; er ist polaritätsbewusst und bewertet Hell-auf-Dunkel anders als Dunkel-auf-Hell; und seine Schwellen skalieren mit Schriftgröße und Strichstärke, sodass eine filigrane Haarlinienschrift an einem strengeren Maßstab gemessen wird als eine robuste Textschrift.
APCA bleibt eine Entwurfsrichtung, kein Konformitätsstandard. Vorerst lautet die praktische Position: Konformität mit WCAG 2.x wahren und die APCA-Denkweise — Strichstärke und Größe zählen, Polarität zählt — als darübergelegtes gestalterisches Urteilsvermögen nutzen.
Mehr Kontrast ist nicht immer besser
Es ist verlockend, Kontrast als Regler zu behandeln, den man ganz aufdreht. Vielen sehbehinderten Lesenden hilft maximaler Kontrast wirklich. Aber einer bedeutsamen Minderheit schadet er. Sehr hoher Kontrast — besonders reines Weiß auf reinem Schwarz — erzeugt Halation, ein Glühen oder Verschwimmen um die Buchstabenformen, insbesondere für Lesende mit Astigmatismus oder Lichtempfindlichkeit. Manche Lesende mit Dyslexie oder visuellem Stress berichten, dass hartes Schwarz-auf-Weiß grell wirkt, und bevorzugen einen leicht gemilderten Grund, etwa fast-schwarze Schrift auf einer gebrochen weißen Fläche.
Die Lehre ist nicht, den Kontrast unter die Minima zu senken. Sie ist, dass Kontrastanforderungen einen Boden definieren und gute Typografie im Bereich über diesem Boden arbeitet, ohne zur Decke zu rasen. Ein Fast-Schwarz wie ein sehr dunkles Grau auf einem warmen gebrochenen Weiß besteht AAA komfortabel und liest sich ruhiger als #000 auf #FFF. Besser noch: Systeme können Lesende wählen lassen. Die Media Query prefers-contrast meldet, wenn eine Nutzerin ihr Betriebssystem um mehr (oder weniger) Kontrast gebeten hat, und ein Stylesheet kann antworten, indem es Textfarben verstärkt, Ränder verdickt und dekorative Transluzenz entfernt. Unter Windows geht der Forced-Colors-Modus weiter und ersetzt die Palette durch die der Nutzerin; Designs sollten ihn tolerieren, statt ihn zu bekämpfen.
Bedeutung nie allein im Farbton kodieren
Rund einer von zwölf Männern und ein deutlich kleinerer Anteil der Frauen haben eine Form von Farbfehlsichtigkeit, am häufigsten beim Unterscheiden von Rot- und Grüntönen. WCAG 1.4.1 (Use of Color) existiert für sie: Farbe darf Bedeutung verstärken, aber nie allein tragen. Ein Link, der sich vom Fließtext nur durch den Farbton unterscheidet, ist für viele Lesende unsichtbar — kombinieren Sie ihn mit einer Unterstreichung. Ein Fehlerzustand, der nur durch einen roten Rand angezeigt wird, braucht zusätzlich ein Icon oder eine Meldung. Ein Diagramm, dessen Reihen sich nur im Farbton unterscheiden, braucht Beschriftungen, Muster oder direkte Annotation.
Das ist ein altes Druckprinzip in neuen Kleidern. Die Informationsdesigner des zwanzigsten Jahrhunderts wussten, dass eine Karte, die in der Fotokopie lesbar bleibt, eine stärkere Karte ist. Gestalten Sie so, als könnte Ihre Seite in Graustufen gesehen werden — denn für manche Lesende wird sie das effektiv.
Warum dieses Kapitel neu ist
Als die erste Auflage dieser Richtlinien geschrieben wurde, waren die WCAG 2.0 noch nicht veröffentlicht; es gab keine numerische Kontrastanforderung zu zitieren, kein Browser-Werkzeug, um eine zu prüfen, und keine Media Query, über die eine Leserin eine Kontrastpräferenz hätte ausdrücken können. Die dazwischenliegenden zwei Jahrzehnte brachten den 4,5:1-Standard, seine rechtliche Übernahme, einen Korpus an Kritik an seiner Formel und einen perzeptuellen Nachfolger hervor, der jetzt im WCAG-3.0-Entwurf Gestalt annimmt. Kontrast wanderte vom Geschmack zur Messung — und dann, nützlicherweise, zu einer Debatte darüber, was die Messung sein sollte.
In CSS
:root {
--ink: #1f1a13;
--paper: #f6f1e7; /* ≥ 4.5:1 against ink (WCAG 1.4.3) */
--accent: #b03a10; /* check at the size and weight it's used */
}
@media (prefers-contrast: more) {
:root { --ink: #000; --paper: #fff; }
}Empfehlungen
- Erfüllen Sie WCAG 1.4.3 (4,5:1 für Fließtext) als absolute Untergrenze; streben Sie 1.4.6 (7:1) an, wo das Publikum älter oder sehbehindert ist.
- Wenden Sie 1.4.11 an: Fokusindikatoren, Eingabefeldränder und bedeutungstragende Icons brauchen 3:1 gegenüber ihrer Umgebung.
- Beurteilen Sie dünne und leichte Schriftarten strenger, als das Verhältnis allein nahelegt; Strichstärke und Größe verändern den effektiven Kontrast.
- Vermeiden Sie reines Schwarz auf reinem Weiß für längeres Lesen; ein sehr dunkles Grau auf einem weichen gebrochenen Weiß reduziert Halation, ohne die Konformität zu opfern.
- Lassen Sie den Farbton nie allein Bedeutung tragen — unterstreichen Sie Links, beschriften Sie Zustände, annotieren Sie Diagramme.
- Unterstützen Sie
prefers-contrastund tolerieren Sie den Forced-Colors-Modus, statt ihn zu überschreiben. - Verfolgen Sie die APCA-Arbeit im WCAG-3.0-Entwurf, aber konformieren Sie heute mit 2.x.