Farben und Schriften: Was macht eine Website gut lesbar?

Gute Farben und Typografie im Webdesign erkennst du daran, dass Texte mühelos lesbar sind und die Website trotzdem nach deinem Betrieb aussieht. Die Basis sind messbare Werte: ein Kontrast von mindestens 4,5:1 nach WCAG 2.2, Fließtext ab etwa 16 px, eine Zeilenhöhe um 1,5 und 50 bis 75 Zeichen pro Zeile. Danach erst zählt die Wirkung deiner Markenfarben.

KI-Bild

Welche Kontrastwerte verlangt die WCAG 2.2?

Die Web Content Accessibility Guidelines 2.2 des W3C sind seit 12. Dezember 2024 die aktuelle Empfehlung für barrierefreie Websites. Für Farben und Schrift enthalten sie klare Mindestwerte. Stufe AA ist der übliche Maßstab, Stufe AAA die strengere Variante. Das Kontrastverhältnis reicht von 1:1 (gleiche Farbe) bis 21:1 (Schwarz auf Weiß).

Element	Mindestkontrast Stufe AA	Stufe AAA	WCAG-Kriterium
Normaler Text	4,5:1	7:1	1.4.3 und 1.4.6
Große Schrift: ab 18 pt (ca. 24 px) oder ab 14 pt fett (ca. 18,5 px)	3:1	4,5:1	1.4.3 und 1.4.6
Bedienelemente und wichtige Grafiken, etwa Rahmen von Eingabefeldern oder Icons	3:1 zur angrenzenden Farbe	keine eigene Vorgabe	1.4.11
Logos, reine Dekoration, inaktive Schaltflächen	keine Vorgabe	keine Vorgabe	Ausnahmen in 1.4.3

Die Umrechnung von Punkt in Pixel steht in der W3C-Erläuterung zu Kriterium 1.4.3. Dort steht auch, dass die Grenzwerte nicht gerundet werden: Ein Kontrast von 4,499:1 erfüllt die Vorgabe von 4,5:1 nicht. Messen lässt sich der Kontrast kostenlos, zum Beispiel mit den Entwicklerwerkzeugen in Chrome und Firefox, die beim Untersuchen eines Textes das Kontrastverhältnis anzeigen.

Die häufigsten Kontrastfehler auf Websites kleiner Betriebe sind hellgrauer Text auf Weiß, weiße Schrift auf Gelb oder Hellgrün und Text direkt auf unruhigen Fotos. Bei Fotos hilft eine halbtransparente dunkle Fläche hinter dem Text. Bei Markenfarben, die zu hell sind, hilft eine dunklere Variante derselben Farbe für Schrift und Schaltflächen.

Gilt das Barrierefreiheitsgesetz für deine Website?

In Österreich ist seit 28. Juni 2025 das Barrierefreiheitsgesetz (BaFG) anwendbar. Laut Wirtschaftskammer Österreich betrifft es unter anderem Dienstleistungen im elektronischen Geschäftsverkehr mit Verbrauchern, also etwa Onlineshops und Buchungsportale. Kleinstunternehmen mit weniger als 10 Beschäftigten und höchstens 2 Mio. Euro Jahresumsatz oder Bilanzsumme sind bei Dienstleistungen ausgenommen. Ob dein Betrieb betroffen ist, klärst du am besten mit der WKO oder einer rechtlichen Beratung.

Welche Schriftgröße ist auf einer Website richtig?

In gängigen Browsern ist 16 px die voreingestellte Schriftgröße, die Mozilla-Dokumentation zu font-size rechnet ihre Beispiele mit diesem Standardwert. Für Fließtext ist 16 px eine sinnvolle Untergrenze. Text unter 12 px gilt laut Google Lighthouse auf Mobilgeräten als schwer lesbar. Lighthouse markiert eine Seite, wenn 40 Prozent oder mehr des Textes kleiner als 12 px sind.

Die folgenden Richtwerte sind eine Empfehlung aus der Praxis von Ipsom, keine Norm. Wo ein Wert aus einer Quelle stammt, ist sie genannt.

Element	Richtwert Handy	Richtwert Desktop	Herkunft
Fließtext	16 bis 18 px	17 bis 20 px	Empfehlung, Basis 16 px Browserstandard
Kleintext (Fußnoten, Bildunterschriften)	mindestens 14 px	mindestens 14 px	Empfehlung, nie unter 12 px (Lighthouse)
Überschrift H1	28 bis 36 px	40 bis 56 px	Empfehlung
Überschrift H2	22 bis 28 px	28 bis 36 px	Empfehlung
Zeilenhöhe im Fließtext	1,5	1,5	WCAG 1.4.8 (AAA): mindestens 1,5
Zeichen pro Zeile	50 bis 75	50 bis 75	Baymard Institute, 10.05.2022; WCAG 1.4.8: höchstens 80
Klick- und Tippflächen	mindestens 24 × 24 px	mindestens 24 × 24 px	WCAG 2.5.8 (AA); 44 × 44 px nach 2.5.5 (AAA)

Gib Schriftgrößen in der Einheit rem statt in px an. Die Mozilla-Dokumentation rät von px für Schriftgrößen ab, weil manche Browser diese Werte nicht mit der eingestellten Grundschrift des Nutzers vergrößern. WCAG 2.2 verlangt in Kriterium 1.4.4, dass sich Text ohne Hilfsmittel auf 200 Prozent vergrößern lässt, ohne dass Inhalte oder Funktionen verloren gehen.

Kriterium 1.4.12 der WCAG 2.2 betrifft die Abstände: Wenn ein Nutzer die Zeilenhöhe auf das 1,5-Fache, den Absatzabstand auf das 2-Fache, den Buchstabenabstand auf das 0,12-Fache und den Wortabstand auf das 0,16-Fache der Schriftgröße stellt, darf kein Inhalt abgeschnitten werden. Starre Textboxen mit fixer Höhe verletzen diese Vorgabe häufig.

Welche Schriften eignen sich für eine Website?

Eine gute Webschrift hat offene Buchstabenformen, eine klare Unterscheidung zwischen I, l und 1 und mindestens die Stärken Normal und Fett. Bewährt haben sich frei verfügbare Schriften wie Open Sans, Roboto, Lato oder Source Sans 3 für Fließtext und Bedienelemente. Georgia ist eine Serifenschrift, die für Bildschirme entworfen wurde und sich für längere Texte eignet.

Serifenschriften werden häufig mit Tradition und Handwerk verbunden, serifenlose Schriften mit Sachlichkeit und Moderne. Diese Zuordnung ist eine Konvention, kein Naturgesetz. Eine Tischlerei kann mit einer kräftigen Serifenschrift in den Überschriften sehr zeitgemäß wirken, wenn der Fließtext ruhig und gut lesbar bleibt.

Für eine klare Hierarchie reichen zwei Schriftfamilien, oft genügt eine einzige in mehreren Stärken. Die Ordnung entsteht über Größe, Stärke und Abstand: Überschriften deutlich größer und fetter, Fließtext ruhig, Hervorhebungen sparsam. Jede zusätzliche Schrift kostet Ladezeit und macht den Auftritt unruhiger.

Lohnen sich Variable Fonts?

Variable Fonts enthalten viele Stärken und Breiten einer Schrift in einer einzigen Datei. Laut Mozilla-Leitfaden zu Variable Fonts ist eine solche Datei zwar größer als ein einzelner Schnitt, aber meist kleiner oder gleich groß wie die vier Dateien für Normal, Kursiv, Fett und Fett-Kursiv. Wer nur zwei Schnitte braucht, fährt mit statischen Dateien oft genauso gut.

Wie bindest du Schriften datenschutzfreundlich ein?

Im Sommer 2022 haben laut Wirtschaftskammer Österreich tausende österreichische Betriebe Abmahnschreiben erhalten, weil ihre Website Google Fonts dynamisch von Google-Servern lud. Die WKO empfiehlt, die Schriften herunterzuladen und vom eigenen Server auszuliefern. Ob deine Website externe Schriften lädt, zeigen die Entwicklerwerkzeuge des Browsers: Adressen mit fonts.googleapis.com oder fonts.gstatic.com deuten darauf hin.

Welche Wirkung haben Farben auf einer Website?

Farben prägen den ersten Eindruck einer Website, ihre Wirkung ist aber weniger eindeutig, als viele Listen zur Farbpsychologie behaupten. Eine Übersichtsarbeit von Elliot und Maier im Annual Review of Psychology (2014) kommt zum Schluss, dass Farbe Gefühle und Verhalten beeinflussen kann, die Forschung dazu aber noch am Anfang steht. Die Tabelle zeigt deshalb verbreitete Assoziationen, keine garantierten Effekte.

Farbe	Wird in Mitteleuropa häufig verbunden mit	Typischer Einsatz	Worauf du achten solltest
Blau	Vertrauen, Ruhe, Sachlichkeit	Praxen, Steuerberatung, Technik	sehr verbreitet, dadurch wenig unterscheidbar
Rot	Energie, Dringlichkeit, Warnung	Akzente, Gastronomie, Aktionen	steht auch für Fehler, große Flächen wirken unruhig
Grün	Natur, Gesundheit, Wachstum	Gärtnerei, Landwirtschaft, Gesundheit	Rot und Grün nie als einziges Unterscheidungsmerkmal
Gelb und Orange	Optimismus, Wärme, Aufmerksamkeit	Akzentflächen, Hinweise	weiße Schrift darauf erreicht fast nie 4,5:1
Schwarz und Dunkelgrau	Eleganz, Klarheit, Wertigkeit	Mode, Architektur, Fotografie	reines Schwarz auf Weiß wirkt in großen Flächen hart
Weiß und Hellgrau	Sauberkeit, Leichtigkeit, Ordnung	Hintergründe, Abstände	hellgraue Schrift auf Weiß ist der häufigste Kontrastfehler

Farbbedeutungen hängen von der Kultur ab. Rot wird in China häufig mit Glück und Festen verbunden, Weiß gilt in Teilen Ostasiens als Farbe der Trauer. Für einen Betrieb, der vor allem Kundschaft in Österreich anspricht, ist das selten entscheidend. Wer Gäste aus vielen Ländern empfängt, etwa ein Hotel, sollte die Palette trotzdem mit diesem Blick prüfen.

Farbe darf nach WCAG-Kriterium 1.4.1 nie das einzige Mittel sein, um eine Information zu vermitteln. Ein Teil der Menschen kann bestimmte Farben, vor allem Rot und Grün, schlecht unterscheiden. Ein rot markiertes Pflichtfeld braucht deshalb zusätzlich einen Text oder ein Symbol, und Links im Fließtext brauchen neben der Farbe eine Unterstreichung.

KI-Bild

Wie stellst du eine Farbpalette für deinen Betrieb zusammen?

Eine praxistaugliche Farbpalette für eine Website besteht aus wenigen Rollen: einer neutralen Grundfarbe für Hintergründe, einer dunklen Textfarbe, einer Markenfarbe aus dem Logo und einer Akzentfarbe für Schaltflächen. Die Akzentfarbe kommt sonst kaum vor, damit Handlungsaufforderungen wie „Termin buchen“ sofort auffallen. Dazu kommen je eine Farbe für Erfolgs- und Fehlermeldungen.

Ein Beispiel aus dem Handwerk: Ein Installationsbetrieb mit blauem Logo nutzt Weiß als Grundfarbe, Dunkelgrau für Text, das Logoblau für Überschriften und Flächen und ein kräftiges Orange nur für die Schaltfläche „Notdienst anrufen“. Ist das Logoblau zu hell für Schrift, bekommt der Text eine dunklere Abstufung desselben Blaus, die 4,5:1 erreicht.

Welche Wirkung die Farben insgesamt erzeugen sollen, legst du am besten vorher fest. Wie das geht, erklärt der Leitfaden zur Designsprache für deinen Betrieb. Farben und Schriften sind dann die Übersetzung dieser Wirkung in konkrete Werte.

Checkliste: Farb- und Schrift-Check für deine Website

Für diese Prüfung brauchst du dein Handy, einen Computer und einen Kontrastprüfer, etwa die Entwicklerwerkzeuge im Browser. Geh die Startseite und die zwei wichtigsten Unterseiten durch.

1. Kontrast messen: Prüfe Fließtext, Schaltflächen, Menü und Fußzeile auf mindestens 4,5:1, große Überschriften auf mindestens 3:1.
2. Text auf Bildern prüfen: Ist jede Zeile auf Fotos ohne Anstrengung lesbar, auch auf dem Handy in der Sonne?
3. Schriftgröße prüfen: Fließtext mindestens 16 px, kein Text unter 12 px, Größen in rem.
4. Vergrößern testen: Browser-Zoom auf 200 Prozent stellen. Bleibt alles lesbar und bedienbar?
5. Zeilenlänge zählen: Auf dem Desktop höchstens rund 75 Zeichen pro Zeile im Fließtext.
6. Zeilenhöhe prüfen: Fließtext mit etwa 1,5-facher Zeilenhöhe, keine abgeschnittenen Texte in Boxen.
7. Schriften zählen: Höchstens zwei Schriftfamilien, vom eigenen Server geladen.
8. Farbe als einziges Signal suchen: Haben Links, Pflichtfelder und Fehlermeldungen ein zweites Merkmal neben der Farbe?
9. Tippflächen messen: Schaltflächen und Links in Menüs mindestens 24 × 24 px, wichtige Schaltflächen größer.
10. Akzentfarbe prüfen: Kommt die Farbe deiner wichtigsten Schaltfläche sonst kaum vor?

Wenn du vor einem Relaunch stehst, gehören diese Punkte ins Briefing. Welche Fragen du einer Agentur außerdem stellen solltest, steht im Ratgeber Den richtigen Webdesigner finden.

Fazit

Gute Farben und Typografie beginnen mit messbaren Werten: 4,5:1 Kontrast für Text, 16 px als Grundschrift, eine Zeilenhöhe um 1,5 und kurze Zeilen. Darauf baut die Gestaltung auf, mit wenigen Schriften und einer kleinen Palette, in der eine Akzentfarbe die wichtigste Handlung zeigt. Farbwirkung ist kulturabhängig und kein Rezept, die Lesbarkeit dagegen lässt sich prüfen. Wenn du Palette, Schriftstaffel und Kontrastregeln lieber von Profis umsetzen lässt, findest du den Ablauf bei der Webdesign-Agentur Ipsom.