Schlechte Kontraste und kleine Schrift: Wenn Websites schwer lesbar sind
Eine moderne Website soll ansprechend aussehen und einen guten ersten Eindruck hinterlassen. Doch was nützt ein gelungenes Design, wenn Besucher die Texte kaum lesen können? Zu kleine Schrift, schwache Farbkontraste oder unruhige Hintergründe können dazu führen, dass wichtige Informationen übersehen werden.
Besonders Menschen mit eingeschränktem Sehvermögen sind davon betroffen. Aber auch ältere Besucher oder Nutzer, die ihre Website bei ungünstigen Lichtverhältnissen aufrufen, können Schwierigkeiten haben.
Gute Lesbarkeit ist deshalb ein wichtiger Bestandteil der Barrierefreiheit. Sie entscheidet mit darüber, ob Besucher Inhalte verstehen, Angebote wahrnehmen und problemlos mit einem Unternehmen Kontakt aufnehmen können.
Gut lesbare Websites durch passende Schriftgrößen und Farbkontraste
Schrift und Farben prägen das Erscheinungsbild einer Website. Sie vermitteln Persönlichkeit, schaffen Wiedererkennungswert und unterstützen die Orientierung. Werden gestalterische Entscheidungen jedoch ausschließlich nach optischen Gesichtspunkten getroffen, kann die Lesbarkeit darunter leiden.
Dabei müssen Unternehmen keineswegs auf ihre Markenfarben oder eine individuelle Gestaltung verzichten. Entscheidend ist, Schriftgrößen, Kontraste und Textdarstellung so aufeinander abzustimmen, dass die Inhalte für möglichst viele Menschen zugänglich bleiben.
Wir erklären, welche Anforderungen dabei eine Rolle spielen, wo häufig Probleme entstehen und wie sich ein ansprechendes Webdesign mit guter Lesbarkeit verbinden lässt.
1. Warum ausreichende Farbkontraste so wichtig sind
Der Kontrast beschreibt den Helligkeitsunterschied zwischen zwei Farben. Bei Websites ist besonders das Verhältnis zwischen Schrift und Hintergrund entscheidend.
Dunkle Schrift auf einem hellen Hintergrund lässt sich in der Regel leichter erkennen als ein sehr heller Grauton auf Weiß. Werden die Unterschiede zu gering, verschwimmen Buchstaben optisch mit dem Hintergrund.
Die internationalen Web Content Accessibility Guidelines (WCAG) definieren deshalb konkrete Mindestanforderungen an Farbkontraste.
Für die Konformitätsstufe AA gelten grundsätzlich folgende Werte:
- Normaler Text:Mindestens 4,5:1 Kontrast zwischen Schrift und Hintergrund.
- Großer Text:Mindestens 3:1 Kontrast. Als groß gelten Texte ab 24 px oder fett formatierte Texte ab etwa 18,7 px.
- Wichtige grafische Elemente und Bedienelemente:Mindestens 3:1 Kontrast, sofern die betreffenden visuellen Informationen für die Erkennbarkeit oder Bedienung erforderlich sind.
Für die höhere Konformitätsstufe AAA gelten strengere Anforderungen. Normaler Text benötigt mindestens ein Kontrastverhältnis von 7:1, während für großen Text mindestens 4,5:1 vorgesehen sind.
Bestimmte Inhalte, beispielsweise Logos oder rein dekorative Elemente, sind von einzelnen Kontrastanforderungen ausgenommen.
2. Kleine Schrift erschwert das Lesen von Website-Inhalten
Neben dem Farbkontrast spielt die Schriftgröße eine wichtige Rolle.
Besonders auf umfangreichen Unternehmenswebsites werden kleinere Schriftgrößen manchmal eingesetzt, um möglichst viele Informationen auf begrenztem Raum unterzubringen. Das kann jedoch dazu führen, dass Texte anstrengend zu lesen sind.
Wie gut eine Schrift erkennbar ist, hängt nicht allein von ihrer Größe ab. Auch Schriftart, Strichstärke und Bildschirmdarstellung beeinflussen die Lesbarkeit.
Eine sehr dünne Schrift kann beispielsweise trotz ausreichender Größe schwer erkennbar sein. Umgekehrt kann eine gut gestaltete Schrift mit klaren Buchstabenformen bereits bei moderater Größe angenehm lesbar wirken.
Für die Gestaltung empfiehlt es sich deshalb, auf folgende Eigenschaften zu achten:
- Ausreichend große Fließtexte, häufig etwa 16 bis 18 px als sinnvoller Ausgangspunkt
- Gut unterscheidbare Buchstaben und Zeichen
- Angemessene Schriftstärken
- Deutliche Unterschiede zwischen Überschriften und Fließtext
- Einheitliche Schriftgrößen für vergleichbare Inhalte
Die WCAG schreiben keine pauschale Mindestschriftgröße von 16 oder 18 px vor. Entscheidend sind die jeweils relevanten Anforderungen an die Wahrnehmbarkeit und Anpassbarkeit der Texte.
Besonders wichtig ist, dass Besucher die Darstellung bei Bedarf selbst vergrößern können.
3. Texte müssen auch bei starker Vergrößerung lesbar bleiben
Viele Menschen vergrößern Website-Inhalte über die Zoomfunktion ihres Browsers. Das kann notwendig sein, wenn die normale Darstellung nicht ausreichend gut erkennbar ist.
Problematisch wird es, wenn eine Website für feste Bildschirmgrößen entwickelt wurde und sich die Inhalte nicht flexibel anpassen.
Dann können beispielsweise Texte abgeschnitten werden, Schaltflächen übereinanderliegen oder wichtige Bereiche außerhalb des sichtbaren Ausschnitts verschwinden.
Nach den WCAG der Stufe AA müssen sich Texte grundsätzlich auf bis zu 200 Prozent vergrößern lassen, ohne dass Inhalte oder Funktionen verloren gehen. Für die Darstellung bei schmalen Ansichtsbereichen gelten zusätzliche Anforderungen an den Umbruch der Inhalte.
Eine flexible Website-Gestaltung sollte deshalb berücksichtigen, dass Besucher unterschiedliche Schriftgrößen und Zoomstufen verwenden.
Die Inhalte müssen dabei nicht auf jedem Bildschirm exakt gleich aussehen. Viel wichtiger ist, dass sie weiterhin vollständig zugänglich und verständlich bleiben.
4. Zeilenabstände und Textbreiten beeinflussen die Lesbarkeit
Auch ausreichend große Schrift mit guten Kontrasten kann anstrengend zu lesen sein, wenn Texte ungünstig angeordnet werden.
Besonders lange Textzeilen erschweren es, nach einem Zeilenwechsel den Anfang der nächsten Zeile wiederzufinden. Zu geringe Abstände zwischen den Zeilen können diesen Effekt verstärken.
Umgekehrt können übermäßig große Abstände dazu führen, dass zusammengehörige Inhalte optisch auseinanderfallen.
Für gut lesbare Website-Texte sollten deshalb mehrere Aspekte berücksichtigt werden:
- Zeilenlänge:Fließtexte sollten nicht über die gesamte Breite großer Bildschirme laufen.
- Zeilenhöhe:Ausreichender Abstand erleichtert die Orientierung innerhalb längerer Absätze.
- Absätze:Sinnvolle Unterteilungen machen umfangreiche Inhalte übersichtlicher.
- Textausrichtung:Linksbündiger Flattersatz ist für viele Website-Texte besser geeignet als Blocksatz.
- Individuelle Einstellungen:Zusätzliche Textabstände dürfen nicht dazu führen, dass Inhalte abgeschnitten werden oder sich überlagern.
Gerade bei umfangreichen Informationsseiten können solche Anpassungen die Lesbarkeit deutlich verbessern, ohne das grundsätzliche Erscheinungsbild zu verändern.
5. Texte auf Bildern und farbigen Hintergründen richtig gestalten
Großflächige Bilder mit darüberliegenden Überschriften gehören zu den beliebten Gestaltungselementen moderner Websites.
Allerdings ist die Lesbarkeit solcher Texte häufig problematisch. Ein Bild kann sowohl helle als auch dunkle Bereiche enthalten, wodurch sich der Kontrast je nach Position der Schrift verändert.
Auch wenn eine Überschrift auf einem bestimmten Bildausschnitt gut lesbar erscheint, kann sie auf einem kleineren Bildschirm über einem anderen Bereich des Bildes liegen.
Ähnliche Probleme entstehen bei Farbverläufen, transparenten Hintergründen oder wechselnden Hintergrundbildern.
Eine geeignete Lösung kann beispielsweise darin bestehen, den Hintergrund hinter dem Text gezielt abzudunkeln oder eine ausreichend deckende Farbfläche einzusetzen.
Wichtig ist, die tatsächliche Darstellung auch bei unterschiedlichen Bildschirmgrößen zu prüfen.
6. Farben dürfen nicht die einzige Informationsquelle sein
Farben helfen dabei, Inhalte zu strukturieren, Zusammenhänge zu verdeutlichen und wichtige Informationen hervorzuheben.
Sie dürfen jedoch nicht die einzige Möglichkeit sein, eine Information zu erkennen.
Ein Beispiel sind Formulare, bei denen fehlerhafte Eingaben ausschließlich durch eine rote Umrandung gekennzeichnet werden. Menschen mit eingeschränktem Farbsehen können diese Unterscheidung möglicherweise nicht zuverlässig erkennen.
Ähnliches gilt für Diagramme, Statusanzeigen oder Links, die sich ausschließlich durch ihren Farbton von anderen Inhalten unterscheiden.
Hier können zusätzliche Kennzeichnungen helfen, beispielsweise:
- Verständliche Beschriftungen
- Eindeutige Symbole mit passender Textalternative
- Unterstreichungen bei Links
- Unterschiedliche Muster bei Diagrammen
- Klar erkennbare Zustandsanzeigen
Die Gestaltung bleibt dadurch individuell, während wichtige Informationen auch unabhängig von der Farbwahrnehmung zugänglich sind.
Gute Lesbarkeit und individuelles Webdesign schließen sich nicht aus
Manche Unternehmen befürchten, dass ihre Website durch barrierefreie Gestaltung an Persönlichkeit verliert. Schließlich sollen Farben, Schriften und grafische Elemente zum eigenen Erscheinungsbild passen.
Tatsächlich lassen sich viele Anforderungen bereits durch eine durchdachte Auswahl und Kombination vorhandener Gestaltungsmittel berücksichtigen.
Eine Markenfarbe muss beispielsweise nicht vollständig ersetzt werden, nur weil sie als Schriftfarbe auf weißem Hintergrund zu wenig Kontrast bietet. Stattdessen kann sie weiterhin für größere Flächen, dekorative Elemente oder andere geeignete Anwendungen verwendet werden.
Für Fließtexte oder kleinere Bedienelemente lässt sich ergänzend ein dunklerer Farbton einsetzen.
Auch individuelle Schriftarten können weiterhin verwendet werden, sofern ihre Darstellung und Lesbarkeit den jeweiligen Anforderungen entsprechen.
Entscheidend ist deshalb nicht der Verzicht auf Gestaltung, sondern deren fachgerechte Umsetzung.
Lesbarkeit Deiner Website professionell verbessern lassen
Schlecht lesbare Texte und unzureichende Farbkontraste lassen sich bei vielen bestehenden Websites gezielt verbessern. Dabei sollten allerdings nicht nur einzelne Farben oder Schriftgrößen verändert werden.
Wichtig ist, das gesamte Gestaltungskonzept zu betrachten, damit Überschriften, Fließtexte, Schaltflächen und andere Elemente weiterhin ein einheitliches Erscheinungsbild ergeben.
Wir übernehmen die Prüfung, Planung sowie die gestalterische und technische Optimierung Deiner Website. Dabei analysieren wir vorhandene Probleme bei Lesbarkeit und Farbkontrasten, entwickeln passende Lösungen und setzen die notwendigen Anpassungen um.
Auch bei neuen Internetauftritten berücksichtigen wir eine gute Lesbarkeit direkt bei der Gestaltung und Entwicklung. So verbinden wir ein individuelles Webdesign mit den Anforderungen an eine möglichst barrierefreie Nutzung.
FAQ - Häufige Fragen zu Schriftgrößen, Kontrasten und Lesbarkeit
Eine allgemein verbindliche Mindestgröße für normalen Fließtext ist in den WCAG nicht festgelegt. Die passende Schriftgröße hängt unter anderem von der verwendeten Schriftart, ihrer Strichstärke und der Bildschirmdarstellung ab.
Für viele Websites sind etwa 16 bis 18 px ein sinnvoller Ausgangspunkt für Fließtexte. Entscheidend ist jedoch, dass die Texte tatsächlich gut lesbar bleiben und sich bei Bedarf vergrößern lassen.
Neben der Größe sollten deshalb auch Farbkontrast, Zeilenabstände und die Darstellung auf unterschiedlichen Geräten berücksichtigt werden.
Eine Website soll nicht nur gut bedienbar sein, sondern auch zum Erscheinungsbild und den individuellen Gestaltungswünschen eines Unternehmens passen. Farben, Schriftarten und grafische Elemente spielen dabei eine wichtige Rolle. Allerdings empfindet nicht jeder Besucher dieselbe Gestaltung als angenehm oder gut lesbar.
Deshalb setzen wir bei barrierefreien Websites zusätzlich auf eine umschaltbare Schwarz-Weiß-Darstellung mit hohen Kontrasten. Besucher können so selbst entscheiden, ob sie die Website im ursprünglichen Farbdesign oder in einer reduzierten, kontraststarken Variante nutzen möchten.
Diese zusätzliche Einstellung kann insbesondere Menschen mit eingeschränktem Sehvermögen oder Schwierigkeiten bei der Farbwahrnehmung helfen. Sie bietet aber auch Besuchern, die eine ruhigere und übersichtlichere Darstellung bevorzugen, eine Alternative.
Wichtig ist, dass die reguläre Website bereits die relevanten Anforderungen an die Barrierefreiheit erfüllt. Der zusätzliche Schwarz-Weiß-Modus erweitert die individuellen Darstellungsmöglichkeiten und ermöglicht es, ein ansprechendes Webdesign mit unterschiedlichen Bedürfnissen der Besucher zu verbinden.
Ja, in vielen Fällen lassen sich vorhandene Unternehmensfarben weiterhin einsetzen. Nicht jede Farbe muss für sämtliche Elemente der Website geeignet sein.
Ein heller Farbton, der sich für kleine Texte auf weißem Hintergrund nicht ausreichend abhebt, kann beispielsweise als Hintergrundfarbe oder dekoratives Gestaltungselement verwendet werden.
Für Fließtexte, Links und Bedienelemente können ergänzende Farbtöne entwickelt werden, die besser lesbar sind und trotzdem zum Erscheinungsbild Deines Unternehmens passen.
Eine gezielte Überarbeitung des Farbkonzepts ist deshalb häufig sinnvoller als ein vollständiger Austausch der Markenfarben.
Nein, eine serifenlose Schriftart ist nicht automatisch barrierefreier als eine Schrift mit Serifen.
Entscheidend sind vor allem gut erkennbare Buchstabenformen, ausreichende Abstände und eine geeignete Darstellung. Auch die Strichstärke spielt eine Rolle, da besonders dünne Schriftarten bei ungünstigen Kontrasten schwer lesbar sein können.
Viele moderne Schriftarten eignen sich grundsätzlich für gut lesbare Websites. Wichtig ist, die gewählte Schrift nicht nur anhand ihrer Optik zu beurteilen, sondern auch in längeren Texten, unterschiedlichen Größen und auf verschiedenen Geräten zu prüfen.
Nicht grundsätzlich. Moderne Browser ermöglichen es bereits, Website-Inhalte zu vergrößern. Eine barrierefrei entwickelte Website sollte diese Funktionen unterstützen, ohne dass wichtige Inhalte oder Bedienelemente verloren gehen.
Zusätzliche Schaltflächen zur Anpassung der Schriftgröße können eine hilfreiche Ergänzung sein, sind jedoch kein Ersatz für eine flexible und zugängliche Gestaltung.
Wichtig ist deshalb vor allem, dass die Website auch mit individuellen Browser- und Systemeinstellungen zuverlässig funktioniert.
Ja. Wir übernehmen die Prüfung, Planung, Gestaltung und technische Umsetzung von Verbesserungen an Deiner Website. Dabei untersuchen wir unter anderem Farbkontraste, Schriftgrößen, Textdarstellung und die Erkennbarkeit wichtiger Bedienelemente.
Auf Grundlage Deiner bestehenden Gestaltung entwickeln wir passende Lösungen, die Barrierefreiheit und ein ansprechendes Erscheinungsbild miteinander verbinden. Anschließend übernehmen wir die erforderlichen Anpassungen direkt an Deinem Internetauftritt.
Auch wenn Du eine neue Website planst, gestalten und entwickeln wir diese unter Berücksichtigung einer guten Lesbarkeit und der relevanten Barrierefreiheitsanforderungen.
Du möchtest Deine Website besser lesbar gestalten lassen, ohne auf Dein individuelles Design zu verzichten? Nimm jetzt Kontakt mit uns auf. Wir beraten Dich gerne und übernehmen die Planung und Umsetzung für Dich.