Schrift, Farben & Lesbarkeit auf der Webseite

Schlecht lesbare Texte schrecken ab – am Computer und erst recht auf dem Handy. Schriftgröße, Zeilenlänge, Kontrast und Farben entscheiden mit darüber, ob Besucher Ihre Inhalte erfassen und Ihnen vertrauen. Dieser Ratgeber zeigt Inhabern kleiner Betriebe die wichtigsten Richtwerte, worauf Sie bei älteren Kunden achten sollten und wie Webseite, Briefbogen und Social Media ein einheitliches Bild ergeben.

Das Wichtigste in Kürze

• Fließtext sollte mindestens 16 Pixel groß sein, Zeilen etwa 45 bis 75 Zeichen lang, der Zeilenabstand großzügig.
• Für den Kontrast gelten nach WCAG mindestens 4,5:1 bei normalem Text und 3:1 bei großer Schrift – Hellgrau auf Weiß fällt meist durch.
• Wenige, bewusst gewählte Farben, die zu Branche und Zielgruppe passen, wirken ruhiger und professioneller als ein bunter Mix.
• Ältere Kunden profitieren besonders von großer Schrift, starkem Kontrast, klarer Navigation und einer gut sichtbaren Telefonnummer.
• Logo, Farben, Schriften und Tonalität sollten auf Webseite, Briefbogen, Schild und Social Media übereinstimmen.

Welche Schriftgröße ist auf Webseiten richtig?

Zu kleine Schrift zwingt Besucher zum Heranzoomen – oder zum Verlassen der Seite. Als Richtwert gilt: Fließtext mindestens 16 Pixel (oder der entsprechende Wert in den relativen Einheiten rem oder em), Überschriften deutlich größer. Auf dem Handy sollte kein Text kleiner als 14 Pixel sein – auch keine Bildunterschriften oder Hinweise im Footer.

Wichtig für die Barrierefreiheit: Besucher müssen die Schrift im Browser vergrößern können. Die Seite darf das nicht durch starre Vorgaben oder eine gesperrte Zoom-Funktion verhindern, und beim Vergrößern sollten keine Inhalte abgeschnitten werden.

Welche Schriftart eignet sich?

Setzen Sie auf klare, gut erkennbare Schriften und verzichten Sie im Fließtext auf verspielte Schreib- oder Zierschriften. Ein bis zwei Schriften genügen – etwa eine für Überschriften und eine für den Fließtext. Das wirkt ruhig, ist leichter zu lesen und lässt sich auch in Briefen und PDFs einheitlich verwenden.

Zeilenlänge und Zeilenabstand

Zu lange Zeilen ermüden, weil das Auge am Zeilenende mühsam den Anfang der nächsten Zeile suchen muss. Als angenehm gelten etwa 45 bis 75 Zeichen pro Zeile, also ungefähr 8 bis 12 Wörter. Auf breiten Bildschirmen erreichen Sie das, indem der Textblock eine maximale Breite bekommt, statt die gesamte Bildschirmbreite zu füllen.

Ebenso wichtig ist ein ausreichender Zeilenabstand. Für Fließtext hat sich etwa das 1,5-Fache der Schriftgröße bewährt. Kurze Absätze und Zwischenüberschriften erleichtern zusätzlich das Überfliegen.

Kontrast: Wann ist Text gut lesbar?

Text muss sich deutlich vom Hintergrund abheben. Hellgrau auf Weiß, helles Blau auf Weiß oder Pastelltöne auf hellem Grund sehen zwar dezent aus, sind für viele Menschen aber schwer lesbar – besonders bei einer Sehschwäche oder bei hellem Umgebungslicht, etwa draußen am Handy.

Die Web Content Accessibility Guidelines (WCAG) nennen für die Stufe AA klare Richtwerte:

• Normaler Text: Kontrastverhältnis von mindestens 4,5:1.
• Große Schrift: mindestens 3:1. Als groß gilt Text ab etwa 24 Pixeln, in Fettschrift ab etwa 19 Pixeln.
• Faustregel: Schwarzer oder dunkelgrauer Text auf hellem Grund ist in der Regel unkritisch. Prüfen sollten Sie farbige Hintergründe, Text auf Bildern und helle Schrift.

Den Kontrast einzelner Farbpaare können Sie mit Werkzeugen wie dem Contrast Checker von WebAIM prüfen. Wie Sie die ganze Seite auf Barrieren testen, zeigt der Ratgeber Barrierefreie Webseite: BFSG, Checkliste und Tools.

Farben: Was wirkt vertrauenswürdig?

Farben prägen den ersten Eindruck und die Wiedererkennung Ihres Betriebs. Bestimmte Farben werden mit Eigenschaften verbunden: Blau oft mit Seriosität und Ruhe, Grün mit Natur oder Gesundheit, Rot mit Energie oder Dringlichkeit. Das ist kein starres Gesetz, aber eine brauchbare Orientierung.

Entscheidend ist, dass die Farben zu Ihrer Branche und Zielgruppe passen: Eine Steuerkanzlei wählt eher zurückhaltende Töne, ein junges Café darf mutiger sein. Setzen Sie die gewählten Farben dann konsequent ein – auf der Webseite, in Drucksachen und auf Social Media.

Weniger ist mehr

Zu viele kräftige Farben wirken unruhig. Beschränken Sie sich auf wenige Haupt- und Akzentfarben; der Rest bleibt neutral in Weiß und Grautönen. So wirkt die Seite aufgeräumt und professionell. Eine Akzentfarbe eignet sich gut für Buttons und wichtige Hinweise – so fallen sie sofort auf.

Farbe allein reicht nicht

Vermitteln Sie Informationen nie ausschließlich über Farbe. Ein rot umrandetes Formularfeld zeigt nicht jedem, dass etwas fehlt – ergänzen Sie einen kurzen Hinweis wie „Bitte E-Mail-Adresse angeben“. Das hilft unter anderem Menschen mit einer Farbsehschwäche.

Ältere Kunden: Worauf Sie besonders achten sollten

Auch ältere Menschen informieren sich online über Termine, Angebote und Öffnungszeiten – viele davon auf dem Smartphone. Für Praxen, Dienstleister und lokale Anbieter lohnt es sich daher besonders, die Webseite auf ihre Bedürfnisse auszurichten. Davon profitieren am Ende alle Besucher.

• Gut lesbare Schrift: mindestens 16 Pixel im Fließtext, ausreichend Zeilenabstand, keine verspielten Schriften – und auf dem Handy nichts zu Kleines.
• Starker Kontrast: mindestens 4,5:1 für normalen Text, kein Hellgrau auf Weiß und kein Pastell auf hellem Grund.
• Klare Struktur: eine übersichtliche Navigation, gut erkennbare Buttons und wenige Klicks bis zum Ziel.
• Telefon und Formular: Viele ältere Kunden rufen lieber an. Bieten Sie beides an und machen Sie die Nummer auf dem Handy klickbar – wie das geht, erklärt der Ratgeber Telefonnummer klickbar machen.
• Vertrauenssignale: Impressum, vollständige Adresse und eine erreichbare Telefonnummer geben Sicherheit.
• Keine unnötigen Hürden: Pop-ups, komplizierte Formulare und lange Klickwege schrecken ab. Wichtige Informationen und der Kontakt sollten schnell erreichbar sein.

Wie Sie Besucher generell zur Kontaktaufnahme führen, lesen Sie im Ratgeber Keine Anfragen über die Webseite?

Corporate Design: Webseite, Briefbogen und Social Media aus einem Guss

Wenn Webseite, Briefbogen, Visitenkarte, Firmenschild und Social-Media-Profile zusammenpassen, wirken Sie professionell und werden leichter wiedererkannt. Uneinheitliche Farben, verschiedene Logo-Versionen oder wechselnde Schriften wirken dagegen schnell zusammengewürfelt. Ein stimmiger Auftritt signalisiert Kunden und Partnern: Hier hat sich jemand Gedanken gemacht.

Diese Elemente sollten Sie abstimmen:

1. Logo: überall dieselbe Version mit gleichen Farben und Proportionen – im Web, im Druck und auf Social Media.
2. Farben: Haupt- und Akzentfarben einmal festlegen und auf der Webseite, in E-Mails und in Drucksachen beibehalten.
3. Schriften: eine oder zwei Schriften für Überschriften und Fließtext, auf der Webseite und in PDFs oder Briefen möglichst dieselben oder sehr ähnliche.
4. Tonalität: auch sprachlich einheitlich auftreten – in Webseitentexten, Social-Media-Beiträgen und E-Mails. Mehr dazu im Ratgeber Texte, Bilder und Videos für Ihre Webseite.

Halten Sie diese Festlegungen in einem kurzen Gestaltungsleitfaden fest – mit den genauen Farbwerten, den Namen der Schriften und den Logo-Varianten. Dann arbeiten auch Druckerei, Webdesigner oder Mitarbeitende einheitlich, ohne jedes Mal nachfragen zu müssen.

Die Webseite ist oft der zentrale Anlaufpunkt und eignet sich deshalb gut als Referenz für Briefbogen, Visitenkarten und Social-Media-Profile. Gibt es bereits Drucksachen, kann es auch umgekehrt laufen. Wichtig ist nur: einmal festlegen und dann konsequent nutzen. Wie Sie Webseite und Social-Media-Kanäle sinnvoll verbinden, zeigt der Ratgeber Webseite, Social Media, Newsletter und QR-Code verknüpfen.

Checkliste: Ist Ihre Webseite gut lesbar?

1. Der Fließtext ist mindestens 16 Pixel groß, auf dem Handy ist kein Text kleiner als 14 Pixel.
2. Die Schrift lässt sich im Browser vergrößern, ohne dass Inhalte verloren gehen.
3. Zeilen haben etwa 45 bis 75 Zeichen, der Zeilenabstand ist großzügig.
4. Der Kontrast erreicht mindestens 4,5:1 bei normalem und 3:1 bei großem Text.
5. Es gibt keinen hellgrauen oder pastellfarbenen Fließtext auf hellem Grund.
6. Informationen werden nicht allein über Farbe vermittelt.
7. Die Farbpalette beschränkt sich auf wenige Haupt- und Akzentfarben.
8. Telefonnummer, Adresse und Kontaktweg sind schnell zu finden.
9. Logo, Farben, Schriften und Tonalität stimmen mit Briefbogen, Schild und Social Media überein.

Ob Ihre Seite diese Punkte erfüllt, lässt sich teilweise automatisch prüfen, etwa mit Lighthouse. Mehr dazu im Ratgeber Qualitätssicherung: Webseite mit Lighthouse und Co. prüfen.

Fazit

Gute Lesbarkeit ist kein Designdetail, sondern die Voraussetzung dafür, dass Besucher Ihre Inhalte überhaupt aufnehmen. Mit ausreichender Schriftgröße, begrenzter Zeilenlänge, starkem Kontrast und wenigen, bewusst gewählten Farben erreichen Sie alle Altersgruppen. Ein einheitliches Erscheinungsbild von der Webseite bis zum Briefbogen sorgt zusätzlich für Wiedererkennung und Vertrauen.