Kontraste sind ein komplexeres Thema, als man auf den ersten Blick denken würde. Auf den ersten Blick geht es nur um Helligkeits-Unterschiede. Auf den zweiten Blick ist die Sache kompliziert.
Der höchstmögliche Kontrast ist 21:1 und die Farbkombination schwarz und weiß. Von der WCAG 2.2 AA wird ein Kontrast von mindestens 4,5:1 für normalen Text und 3:1 für großen Text gefordert. Die WCAG 2.2 AAA fordert mindestens 7:1 für normalen Text und 4,5:1 für großen Text.
Der APCa-Mechanismus
Der Advanced Perceptual Contrast Algorithm (APCA) ist ein neuer Ansatz, um die Lesbarkeit von Text durch Farbkontraste realistischer zu bewerten. Anders als die bisherigen WCAG-Richtlinien, die mit einem festen mathematischen Verhältnis von Helligkeiten arbeiten, orientiert sich APCA stärker an der menschlichen Wahrnehmung. Das bedeutet: Es wird berücksichtigt, wie unser Auge Helligkeit, Schriftstärke und Schriftgröße tatsächlich verarbeitet. Aktuell ist nicht klar, ob APCA in der neuen WCAG 3 den alten Kontrastwert ablösen wird oder nicht.
APCA beschreibt Kontraste nicht mehr mit einem abstrakten Verhältnis wie „4,5:1“, sondern mit sogenannten Lc-Werten (Lightness Contrast). Diese Werte geben an, wie stark sich Vordergrund- und Hintergrundfarbe voneinander abheben – und zwar so, dass der Wert besser mit der echten Lesbarkeit zusammenpasst. Beispielsweise reicht für gut lesbaren Fließtext ein Lc-Wert von etwa 60 aus. Wenn die Schrift jedoch sehr klein oder sehr dünn ist, braucht sie einen höheren Kontrast, etwa Lc 75 bis 90, damit sie noch angenehm erkennbar bleibt.
Ein weiterer Vorteil von APCA ist, dass es zwischen dunklem Text auf hellem Grund und hellem Text auf dunklem Grund unterscheidet. Da unsere Augen beide Situationen unterschiedlich wahrnehmen, sind auch die Anforderungen an den Kontrast nicht identisch. APCA liefert dadurch differenziertere und praxisnähere Empfehlungen, die in modernen Designs besser funktionieren als die alten, starren Grenzwerte der WCAG 2.x.
Mehr als hell und dunkel
Die WCAG-Formel hat den Vorteil, dass sie sehr einfach ist, allerdings spiegelt sie die Realitäten nicht wirklich wider. Die Forschung hat seitdem neue Erkenntnisse gewonnen, die in die WCAG bisher nicht eingeflossen sind. Zum Beispiel ist heute klar, dass schwarz auf weiß zwar den höchsten Kontrast hat, aber nicht unbedingt die beste Lesbarkeit. Weiß auf selbst-leuchtenden Bildschirmen hat die Eigenschaft, vor allem in dunklen Umgebunden zu blenden, der Dark Mode ist nicht ohne Grund so beliebt. Für Präsentationen wird oft empfohlen, ein sehr helles Grau für den Hintergrund zu verwenden. Ähnliches gilt für Papier: Es reflektiert
Streulicht im Auge: Weiß strahlt sehr stark, besonders auf Bildschirmen. Dadurch entsteht im Auge eine Art „Lichtschleier“ (in der Optik nennt man das veiling glare), der die Kanten des schwarzen Textes leicht überstrahlt. Das kann das Lesen auf Dauer anstrengend machen.
Extrem hoher Kontrast: 100 % Schwarz (000) auf 100 % Weiß (FFF) ist der maximal mögliche Kontrast. Unser visuelles System empfindet aber nicht immer „maximal“ als „optimal“. Ein zu starker Unterschied kann für längeres Lesen ermüdend wirken. Viele Print- und Screen-Designer nutzen deshalb lieber dunkelgrauen Text auf leicht gebrochenem Weiß (z. B. 111 auf FAFAFA oder 333 auf FDFDFD). Das wirkt ruhiger, blendet weniger und bleibt trotzdem hervorragend lesbar.
Ein Problem entsteht, wenn sehr gesättigte Farben direkt aufeinandertreffen. Ein Beispiel dafür ist reines Blau (#0000FF) auf reinem Rot (#FF0000). Nach den WCAG-Vorgaben können solche Farbkombinationen manchmal den geforderten Schwellenwert erfüllen, da die Helligkeitsdifferenz rechnerisch groß genug ist. In der praktischen Wahrnehmung verschwimmen sie jedoch, weil das Auge Schwierigkeiten hat, stark gesättigte und gleich helle Farben voneinander zu trennen. Dadurch entsteht ein unangenehmer Flimmereffekt.
Hell auf hell oder dunkel auf dunkelwerden nicht berücksichtigt. Ein Beispiel dafür ist die Farbkombination Mittelgrau (#777777) auf Hellgelb (#FFFFAA). Zwar kann die Kontrast-Ratio rechnerisch „ok“ aussehen und beispielsweise knapp über dem Wert von 4,5:1 liegen, dennoch wirkt der Text kontrastarm und schwer erkennbar – insbesondere, wenn er in dünner Schrift dargestellt wird. Ursache dafür ist, dass die Helligkeiten der beiden Farben zwar numerisch unterschiedlich sind, der visuelle Kontrast jedoch subjektiv als schwach wahrgenommen wird.
Die WCAG macht keinen Unterschied zwischen Fließtext und Überschriften (außer in der Kategorie „großer Text“). Ein Kontrast von 4,5:1 kann für kleine, dünne Schrift auf hellem Hintergrund praktisch unlesbar sein – obwohl es formal „besteht“.
Die WCAG-Richtlinien berücksichtigen keine Farbsehschwächen. So kann beispielsweise die Farbkombination Dunkelgrün (#006600) auf Rot (#FF3333) nach den Vorgaben eine ausreichende Kontrast-Ratio aufweisen. Für Menschen mit einer Rot-Grün-Sehschwäche verschwimmt diese Kombination jedoch zu einem nahezu einfarbigen Feld und ist damit kaum unterscheidbar.
Persönlich halte ich diese Fälle allerdings eher für akademisch. Wer grün und rot kombiniert, gehört in die Design-Hölle. Dünne Schrift kommt in der Praxis kaum vor, das wäre noch ein Fall für die Design-Hölle. Was in der Tat vorkommt
Hell auf dunkel, dunkel auf hell
Rein mathematisch betrachtet müsste ein Kontrastverhältnis wie z. B. 5:1 gleichwertig sein – egal ob dunkle Schrift auf hellem Hintergrund oder helle Schrift auf dunklem Hintergrund. In der Praxis gibt es aber mehrere Wahrnehmungs- und Gestaltungsfaktoren, die erklären, warum dunkle Schrift auf hellem Hintergrund fast immer als besser lesbar empfunden wird:
Unsere Augen sind physiologisch darauf ausgelegt, bei Tageslicht – also im sogenannten photopischen Sehen – feine Unterschiede in dunklen Strukturen auf hellem Hintergrund wahrzunehmen. Befindet sich dagegen helle Schrift auf dunklem Grund, schaltet das Auge stärker auf das skotopische Sehen, also das Dämmerungssehen, um. In diesem Modus ist die Wahrnehmung feiner Details eingeschränkt, was die Lesbarkeit erschwert.
Hinzu kommt der Effekt der Überstrahlung, auch „Halation“ genannt: Auf hellen Flächen breiten sich helle Pixel optisch leicht in die angrenzenden dunklen Bereiche aus. Dadurch wirken Buchstaben bei heller Schrift auf dunklem Hintergrund verschwommener oder dünner, was die Klarheit des Textes mindert.
Ein weiterer Faktor ist die Adaptation. Da die meisten Texte – ob Bücher, Webseiten oder Dokumente – traditionell in schwarzer Schrift auf weißem Hintergrund gesetzt sind, ist unser visuelles System an dieses Farbschema gewöhnt. Umgekehrte Konstellationen wie der sogenannte „Dark Mode“ wirken daher ungewohnt und können die Lesegeschwindigkeit leicht reduzieren.
Schließlich spielt auch die psychovisuelle Gewichtung eine Rolle. Selbst wenn der rechnerische Kontrast identisch ist, nimmt unser Gehirn Helligkeitsunterschiede subjektiv unterschiedlich wahr. Dunkle Schrift auf hellem Grund vermittelt Stabilität und erscheint klar abgegrenzt, während helle Schrift auf dunklem Hintergrund eher zum Flimmern oder „Vibrieren“ neigt.
Spannend wird es, wenn man die Situation in einer dunklen Umgebung betrachtet, denn hier verändert sich die visuelle Wahrnehmung deutlich. Bei geringer Helligkeit passt sich das Auge durch die sogenannte Dunkeladaption an, wobei das skotopische Sehen dominiert. In diesem Zustand übernehmen die Stäbchenzellen in der Netzhaut den Großteil der Arbeit: Sie sind sehr lichtempfindlich, können jedoch Farben kaum differenzieren. Unter diesen Bedingungen kann helle Schrift auf dunklem Hintergrund oft als angenehmer empfunden werden, da das Auge weniger überreizt wird.
Ein weiterer wichtiger Aspekt ist die Blendung. Befindet man sich in einem komplett dunklen Raum und blickt auf ein helles Hintergrundfeld – etwa eine weiße Bildschirmfläche – entsteht starke Blendung, da die Pupillen in der Dunkelheit weit geöffnet sind. Ein dunkler Hintergrund mit heller Schrift reduziert diese Belastung und macht das Lesen subjektiv deutlich angenehmer.
Auch in Bezug auf die Lesbarkeit spielt die Wahrnehmung des Kontrasts eine Rolle. Zwar bleibt das rechnerische Kontrastverhältnis gleich, doch in der Praxis entscheidet die visuelle Ermüdung darüber, wie lange und komfortabel Texte gelesen werden können. Bei niedriger Umgebungshelligkeit ist helle Schrift auf dunklem Grund häufig länger gut lesbar, während dunkle Schrift auf hellem Hintergrund die Augen in der Dunkelheit stark beansprucht.
Daraus ergibt sich eine praktische Konsequenz: In hellen Umgebungen ist dunkle Schrift auf hellem Hintergrund besser lesbar, während in dunklen Umgebungen helle Schrift auf dunklem Hintergrund angenehmer wirkt, weil sie Blendung reduziert und die Augen schont.
Ein Stück weit ist das allerdings auch relativ: Viele Devs arbeiten mit dunklen Hintergründen, praktisch alle Programmier-Umgebungen und Shells sind standardmäßig hell auf dunkl oder bieten eine entsprechende Einstellung. Wie oben gesagt wäre es generell für die Augen-Gesundheit von Büro-Workern gesünder, mit mattweiß statt strahlendem Weiß zu arbeiten.
Sehbehinderte sind die Ausreißer
Das ganze Kontrast-Thema in der WCAG richtet sich an Personen mit relativ geringen Einschätzungen. Für Personen mit Seh-Einschränkung sind Kontrast von 3:1 oder 4,5:1 oft zu gering. Sie verwenden oft Werkzeuge, um den Kontrast stark zu erhöhen, dabei werden die Farbwerte der Anwendung überschrieben.
Auch gilt die Aussage bezüglich der Hell-Dunkel-Präferenz bei Sehbehinderten nicht pauschal. Viele Sehbehinderte arbeiten mit dunklen Hintergründen, da sie der helle Hintergrund blendet.
Ästhetik-Bias und anekdotische Evidenz
Kontraste sind ein wunderbares Beispiel für den Ästhetik-Bias. Der Ästhetik-Bias besteht darin, dass ansprechende Oberflächen oft gar nicht so gut benutzbar sind. Die Kern-Ursache besteht darin, dass Personen, die Oberflächen gestalteten oft gar nicht die Nutzenden dieser Oberflächen sind. Schauen wir uns das am Beispiel Kontraste an.
Wenn wie neulich auf LinkedIn jemand behauptet, weiß auf orange sei angenehmer zu lesen, ist das faktisch falsch. Es mag besser aussehen. Es mag vereinzelt auch Leute geben, für die das zutrifft, für die also diese Farbkombi gut zu lesen ist. Wir gestalten aber nicht für einzelne Personen.
Das ist ein klassischer Fall von Fehl-Wahrnehmung, ein Ästhetik-Bias: Weil etwas besser aussieht, wird angenommen, dass es auch besser sei. Wir sehen uns Magazine an, die wunderbar gestaltet sind, das heißt aber nicht automatisch, dass sie auch besser lesbar sind. Klassisch, weil wir dem alle unterliegen. Allerdings sollten sich Menschen, die Dinge gestalten, die andere Menschen nutzen und nicht sie selbst sich dem mehr bewusst sein.
Nebenbei bemerkt ist der Beitrag auch ein Beispiel für anekdotische Evidenz. Wenn ich irgendwen frage, ob er das gut findet, wird er mit großer Wahrscheinlichkeit ja sagen. Er will mich bestätigen, nicht beleidigen, möchte das Gespräch nicht führen, es ist ihm egal oder er ist einfach unkritisch. Auf der Basis sollte man wirklich keine Design-Entscheidung treffen.
Am Ende ist es auch eine frage der Bilanz. Wenn ich einen kurzen Text weiß auf orange setze mag das noch lesbar sein. Aber wenn ich, wie es einige tun, Fließtext in solchen Farb-Kombinationen setze, wird das kaum noch jemand angenehm finden. Menschen aus dem Marketing scheint es oft an praktischem Sachverstand zu fehlen, sie treffen oft solche Design-Entscheidungen.