Die besten Tipps: So wird Deine Website benutzerfreundlicher

2. Schriftgröße & Kontrast

Schriftgrößen | Schriftarten | Kontrast

Schriftgröße

Vergleich verschiedener Google-Fonts in der Größe 16 px im Vergleich

Wichtig:

  • Seitenbesucher*innen „scannen“/überfliegen den Text, die Schriftgröße darf daher nicht zu klein sein
  • Zu kleiner Text führt dazu, dass Seitenbesucher*innen abspringen.
  • Der Text auf dem Bildschirm soll so einfach zu lesen sein wie ein gutes Buch.
  • Empfehlung: mindestens 16 PX Schriftgröße für den Fließtext, das ist jedoch abhängig von der gewählten Schriftart!

Test Schriftgröße 16 px Assistant

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!

Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern? Oder gehörten die Schritte hinter ihm zu einem der unzähligen Gesetzeshüter dieser Stadt, und die stählerne Acht um seine Handgelenke würde gleich zuschnappen? Er konnte die Aufforderung stehen zu bleiben schon hören.

Gehetzt sah er sich um. Plötzlich erblickte er den schmalen Durchgang. Blitzartig drehte er sich nach rechts und verschwand zwischen den beiden Gebäuden. Beinahe wäre er dabei über den umgestürzten Mülleimer gefallen, der mitten im Weg lag. Er versuchte, sich in der Dunkelheit seinen Weg zu ertasten und erstarrte: Anscheinend gab es keinen anderen Ausweg aus diesem kleinen Hof als den Durchgang, durch den er gekommen war.

Test Schriftgröße 20 px Assistant

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!

Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern? Oder gehörten die Schritte hinter ihm zu einem der unzähligen Gesetzeshüter dieser Stadt, und die stählerne Acht um seine Handgelenke würde gleich zuschnappen? Er konnte die Aufforderung stehen zu bleiben schon hören.

Gehetzt sah er sich um. Plötzlich erblickte er den schmalen Durchgang. Blitzartig drehte er sich nach rechts und verschwand zwischen den beiden Gebäuden. Beinahe wäre er dabei über den umgestürzten Mülleimer gefallen, der mitten im Weg lag. Er versuchte, sich in der Dunkelheit seinen Weg zu ertasten und erstarrte: Anscheinend gab es keinen anderen Ausweg aus diesem kleinen Hof als den Durchgang, durch den er gekommen war.

Test Schriftgröße 18 px Assistant

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!

Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern? Oder gehörten die Schritte hinter ihm zu einem der unzähligen Gesetzeshüter dieser Stadt, und die stählerne Acht um seine Handgelenke würde gleich zuschnappen? Er konnte die Aufforderung stehen zu bleiben schon hören.

Gehetzt sah er sich um. Plötzlich erblickte er den schmalen Durchgang. Blitzartig drehte er sich nach rechts und verschwand zwischen den beiden Gebäuden. Beinahe wäre er dabei über den umgestürzten Mülleimer gefallen, der mitten im Weg lag. Er versuchte, sich in der Dunkelheit seinen Weg zu ertasten und erstarrte: Anscheinend gab es keinen anderen Ausweg aus diesem kleinen Hof als den Durchgang, durch den er gekommen war.

Schriftarten

  • Maximal drei verschiedene Schriften auf der Website verwenden, für Überschrift – Fließtext – Zitate.
  • Vorsicht bei Schreibschriften (Handwriting): Lesbarkeit beachten!
Beispiel: Schreibschriften können schlecht lesbar sein.

Weiterführender Lesetipp: Schriftgröße im Web: Sind Ihre Webtexte überhaupt lesbar?

Kontrast

  • Auf ausreichend Kontrast zwischen Schrift und Hintergrund achten (Stichwort: Barrierefreiheit).
  • Inhalt sollte auch in praller Sonne/bei schlechtem Licht gut lesbar sein.
  • Barrierefreiheit wird immer wichtiger, teilweise gesetzliche Anforderung

Modern, aber nicht unbedingt benutzerfreundlich:

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel?

Testüberschrift Testüberschrift

Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte! Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern?

Oder gehörten die Schritte hinter ihm zu einem der unzähligen Gesetzeshüter dieser Stadt, und die stählerne Acht um seine Handgelenke würde gleich zuschnappen? Er konnte die Aufforderung stehen zu bleiben schon hören.

Wichtig für die Lesbarkeit: Ausreichend Kontrast!

Wie finde ich heraus, ob der Kontrast ausreichend ist?

Tooltipp: WebAIM Contrast Checker

Beispiel:

Prüfung des Kontrast auf Barrierefreiheit mit dem WebAIM Contrast Checker

Beispiel online im Contrast Checker ansehen

Wichtig: Für Barrierefreiheit müssen Links zusätzlich zu einer farblichen Kennzeichnung durch eine weitere Formatierung gekennzeichnet werden. Typischerweise ist das die Kennzeichnung durch Unterstreichung, akzeptabel ist auch Fettdruck oder ein vorangestelltes Symbol.

Mit diesem Tool kannst Du das gesamte Farbschema Deiner Website auf Barrierefreiheit testen:
Accessible color palette builder