Farben und Kontraste: Ihre Website für alle lesbar machen

Dieses helle Grau, so elegant auf weißem Hintergrund, dieser zarte Text auf dem schönen Foto, diese feine Schrift, die Raffinesse ausstrahlt – so viele „Design“-Entscheidungen, die Ihre Website unleserlich machen – für Besucher in der prallen Sonne auf ihrem Handy, für Augen, die die Vierzig überschritten haben, für die Millionen von Menschen mit unvollkommener Sicht… also, irgendwann für jeden. Kontrast ist kein technisches Detail – er ist die Grundvoraussetzung, um gelesen zu werden. Dieser Leitfaden gibt Ihnen die Regeln, Überprüfungswerkzeuge und typische Korrekturen – für eine Website, die schön UND lesbar ist, denn das eine hat das andere nie ausgeschlossen.

Warum Kontrast die Grundlage von allem ist

Die Lesbarkeit eines Textes hängt zunächst vom Helligkeitsunterschied zwischen ihm und seinem Hintergrund ab – dem Kontrast. Wenn er unzureichend ist, muss das Auge sich anstrengen – langsameres Lesen, Ermüdung, Abbruch – oft, ohne dass der Besucher weiß, warum „diese Website anstrengend ist“. Und die realen Bedingungen verschlimmern alles – Telefonbildschirm im Freien, abgedunkelte Helligkeit am Abend, Bildschirme mittlerer Qualität, Alterssichtigkeit, die die meisten über 45-Jährigen betrifft, ganz zu schweigen von dauerhaften Sehbehinderungen. Mit einem soliden Kontrast zu arbeiten, bedeutet nicht, „Barrierefreiheit“ als eine Checkbox abzuarbeiten – es bedeutet, das Lesen für 100 % der Besucher, 100 % der Zeit zu erleichtern. Und der Nutzen ist überall spürbar – Suchmaschinen bewerten die Benutzererfahrung, und ein lesbarer Text konvertiert besser – mechanisch.

Die einfachen, numerischen Regeln, die man kennen muss

Die Barrierefreiheitsstandards geben objektive Richtwerte – das Kontrastverhältnis zwischen Text und Hintergrund muss mindestens 4,5:1 für Fließtext (3:1 für sehr große Überschriften) betragen – der Komfortwert zielt auf 7:1 ab. Keine Kopfrechnerei nötig – kostenlose Kontrastprüfer online geben das Verhältnis an, indem man zwei Farbcodes einfügt, und die Entwicklertools der Browser zeigen es direkt an. Konkrete Übersetzungen – mittleres Grau auf Weiß scheitert fast immer (der berühmte #999999 auf Weiß – durchgefallen) – dunkler Text auf hellem Hintergrund oder heller Text auf kräftigem dunklem Hintergrund bestehen problemlos – helle „Markenfarben“ (Gelb, Pastelltöne) tragen nie Text auf weißem Hintergrund. Jedes Text/Hintergrund-Paar Ihrer Website verdient eine Überprüfung – das dauert zehn Minuten für die gesamte Website.

Der richtige Reflex. Machen Sie den Sonnentest und den Abstandstest – Ihre Website auf dem Handy, mittlere Helligkeit, bei Tageslicht – dann den Bildschirm auf Armlänge. Alles, was bei der Lektüre anstrengend wird (graue Texte, feine Hinweise, blasse Buttons), würde ohnehin bei den Prüfern durchfallen. Dieser 30-Sekunden-Test, den Sie bei jeder neuen Seite wiederholen, fängt 90 % der Kontrastfehler ab, bevor Ihre Besucher sie bemerken.

Häufige Fehler und ihre Korrekturen

• Chic-grauer Text auf Weiß – Fehler Nr. 1 – verdunkeln Sie das Grau des Fließtextes (streben Sie ein sehr dunkles Grau, fast schwarz, an) – die Eleganz bleibt erhalten, die Lesbarkeit kehrt zurück.
• Text auf Foto – unleserlich, sobald das Bild beladen ist – fügen Sie einen abdunkelnden Schleier über das Bild oder einen Streifen hinter dem Text hinzu – Text direkt auf nacktem Foto ist fast immer ein Fehler.
• Markenfarben als Text – Ihr identitätsstiftendes Orange oder helles Grün ist für Akzente (volle Buttons, Icons) gemacht, nicht für Absätze – reservieren Sie den Text für kontrastierte Neutrale.
• Zu schmale Schriftarten – „Light“-Fettungen ruinieren den Kontrast, selbst in Schwarz – erhöhen Sie die Fettung für den Fließtext.
• Links, die nur durch Farbe erkennbar sind – fügen Sie eine Unterstreichung oder Fettung hinzu – Farbe allein entgeht Farbblinden (ein erheblicher Teil der Männer) und schlecht kalibrierten Bildschirmen.
• Formularfelder mit unsichtbaren Beschriftungen – blasse graue Beschriftungen in Feldern, die beim Eingeben verschwinden – bevorzugen Sie dauerhafte Beschriftungen über den Feldern.

Über den Kontrast hinaus: die anderen Säulen der Lesbarkeit

Der Kontrast regelt die Sichtbarkeit – drei Begleiter regeln den Komfort – die Größe – mindestens 16 Pixel für den Fließtext, ohne das Zoomen zu behindern (der Besucher muss frei vergrößern können) – der Abstand – großzügiger Zeilenabstand (ca. 1,5), kurze Absätze, atmende Ränder – dichte Blöcke schrecken ab, bevor sie gelesen werden – und die Hierarchie – deutlich differenzierte Überschriften, die das Überfliegen ermöglichen, denn man scannt, bevor man liest. Fügen Sie die Schlichtheit der Hintergründe hinzu (Texturen und Muster hinter Text sind Lesemörder) und respektieren Sie die Wahl des Nutzers – ordnungsgemäß angebotener Dunkelmodus, wenn Ihr Publikum nachts surft. Das Ganze bildet einen positiven Kreislauf – jede Verbesserung der Lesbarkeit erhöht die Verweildauer, das Verständnis… und die Kontakte.

Dringend zu merken, wenn Sie nur eine Sache ändern. Verdunkeln Sie Ihren Fließtext. Fast alle Websites kleiner Strukturen zeigen einen zu hellen Fließtext, der vom Grafikdesign übernommen wurde – und diese einzige Korrektur (mittleres Grau in sehr dunkles Grau umwandeln) verbessert die Lesbarkeit für alle sofort, ohne das Design zu beeinträchtigen. Zwei Minuten in den Theme-Einstellungen – das beste Verhältnis von Aufwand und Wirkung in der gesamten Webästhetik.

Häufige Fragen

Behebt der Dunkelmodus Kontrastprobleme?

Nein – er verschiebt sie – der Dunkelmodus hat seine eigenen Regeln (weißes Licht auf schwarzem Hintergrund vermeiden, helle Grautöne auf abgestuften dunklen Hintergründen anstreben). Jeder Modus wird mit denselben Werkzeugen und denselben Schwellenwerten überprüft.

Kann ich meine helle Markenfarbe behalten?

Absolut – als Akzent – Buttons (mit kontrastiertem Text darauf), Icons, Linien, Hervorhebungen. Die Marke lebt in den Akzenten – das Lesen lebt in den Neutraltönen. Beide koexistieren auf allen großen Websites der Welt.

Wie kann ich meine gesamte Website überprüfen, ohne Tage dafür zu brauchen?

Überprüfen Sie die wiederkehrenden Paare (Haupttext/Hintergrund, Buttons, Links, Fußzeilen) – etwa ein Dutzend Kombinationen decken 95 % einer Website ab. Automatische Audit-Tools listen dann die Ausnahmen Seite für Seite auf.

Das Wichtigste in Kürze

Kontrast ist die Existenzbedingung Ihrer Inhalte – ein Verhältnis von mindestens 4,5:1 für den Text, überprüfbar in Sekunden mit kostenlosen Tools – und der Sonnentest am Handy als letzte Instanz. Korrigieren Sie klassische Fehler (hellgrauer Text auf Weiß, Text auf nacktem Foto, Markenfarben in Absätzen, dünne Schriftarten, Links nur durch Farbe), und ergänzen Sie mit Größe, Abstand und Hierarchie, die den Komfort ausmachen. Schön und lesbar schließen sich nicht aus – kontrastierte Neutrale tragen die Lesbarkeit, Ihre Farben unterstreichen die Akzente. Und wenn Sie heute nur eine Sache tun – verdunkeln Sie Ihren Text. Ihre Leser – alle Ihre Leser – werden es spüren, ohne zu wissen warum.