Text auf Websites und in Apps sollte leicht zu lesen sein – doch bei schlechtem Kontrast wird genau das zum Problem. Wer lesefreundlich gestalten will, braucht Text, der sich farblich deutlich vom Hintergrund hervorhebt.
Zum Text-Design gehören:
- die Farbwahl für den Text UND den Hintergrund,
- der Font und
- die Schriftgröße.
In diesem Blogartikel geht es um Punkt 1, also die Farbwahl.
Genügend Farbkontrast, ein Must-have für jede Website
„Kannst du mich jetzt lesen?“, so lautet der Text im Headerbild. Dabei wird der Text von links nach rechts immer heller und hebt sich auf diese Weise immer deutlicher vom dunklen Hintergrund ab.
Hör auf, Texte so zu schreiben, wie in den Screens 1 bis 4. Das ist nicht nur doof für User, sondern ist ein echtes Hindernis im Hinblick auf Lesbarkeit.
Kontrast ermöglicht uns, Dinge voneinander zu unterscheiden. Doch im Webdesign wird gerne mal Ton in Ton gearbeitet. Das mag zwar ästhetisch wirken, ist aber in der Regel schlecht lesbar. Das Gleiche gilt für Text auf Bildern.
Kontrast ist ein grundlegender Aspekt von gutem Text-Design. Er trägt zur Lesbarkeit bei und macht (wichtige) Informationen leichter erkennbar.
Es gibt un-glaub-lich viele Websites mit extrem kontrastarmen Text-Design. Im WebAIM-Million 2024 steht das Thema zum 6. Mal in Folge auf Platz 1 der Website-Probleme – es betrifft mehr als 80 % der Websites.
Von 10 Websites haben mehr als 8 einen zu schwachen Kontrast zwischen Text und Hintergrund.
Kontrastverhältnis objektiv messen
Die Farbwahl ist oft etwas sehr Persönliches und damit subjektiv. Um objektiv sagen zu können, wie es auf unserer Website im Hinblick auf Kontrast und Lesbarkeit steht, brauchen wir konkrete Zahlen.
Mit einem Online-Tool lässt sich das Kontrastverhältnis zwischen Text und Hintergrund messen und als Zahl angeben.
Zur Bedeutung der Werte komme ich nach der Messung.
Was sind deine Hex-Werte?
Um mit einem kostenlosen Online-Tool den Kontrast zwischen Text und Hintergrund zu ermitteln, benötigst du den sechsstelligen Hex-Wert, und zwar sowohl von der Schrift als auch vom Hintergrund. Ein solcher Farbcode sieht z. B. so aus: #0000FF.
Du nutzt WordPress? Dann solltest du die Farbcodes im Customizer finden. Je nach Theme etwa unter „Global“ oder „Farben“. Wenn du sie nicht findest, schreibe mir gerne eine kurze Nachricht. Ich schaue gerne für dich im Inspektor – also ohne Zugangsdaten zu benötigen – die Farbcodes nach und schicke sie dir per E-Mail.
Den Kontrastwert der Farben ermitteln
Du hast beide Farbcodes? Dann nutze jetzt eins der folgenden Tools, um den Kontrastwert zu ermitteln.
- Figmas Color Contrast Checker (auf Englisch): Ein übersichtliches Tool, mit dem du die Farben deines Textes und Hintergrundes analysieren kannst. Das Besondere? Neben dem Kontrastwert werden hier weitere hilfreiche Informationen angezeigt, z. B. ein ob die jeweilige Farbkombination barrierefrei ist.
- Leserlich (auf Deutsch): Zur Ermittlung von Kontrasten für Print- und Onlinemedien.
Gib deine beiden Farbcodes an der richtigen Stelle ein. Das Tool errechnet einen Kontrastwert, den du dir notierst.
Richtwerte für das Kontrastverhältnis
Generell gilt:
- Das Kontrastverhältnis kann zwischen 1 und 21 liegen und wird in der Regel in Bezug zu 1 gesetzt (z. B., 15:1)
- Bei schwarzer Schrift auf weißem Hintergrund ist das Kontrastverhältnis 21:1. Dies gilt als optimaler Wert.
- Um als gut lesbar zu gelten, sollte der Kontrastwert zwischen Text und Hintergrund mindestens 7:1 betragen.
- Ausnahme? Bei großem Text kann ein Wert von 4,5:1 reichen.
Im folgenden Abschnitt geht es um die Praxis, ich zeige dir ein paar Beispiele.
Kontrastverhältnis zwischen Text und Hintergrund
Die Hintergrundfarbe dieser Seite ist weiß, der Farbcode ist #000000. Nachfolgend siehst du Text in verschiedenen Farben auf diesem weißen Hintergrund.
In der Klammer steht jeweils der Farbcode des Textes und danach das vom Tool errechnete Kontrastverhältnis.
Kontrastverhältnis über 7:1 ✅
- Schwarz (#FFFFFF): Kontrastverhältnis 21,0:1
- Dunkelblau (#272343) Kontrastverhältnis 14,8:1 > das ist die Farbe, die ich auf dieser Website verwende
- Blau (#004999): Kontrastverhältnis 8,7:1
Kontrastverhältnis unter 7:1 ❌
- Rot (#F94449): Kontrastverhältnis 3,5:1
- Grün (#69BF64): Kontrastverhältnis 2,3:1
- Hellgrau (#CCCCCC): Kontrastverhältnis 1,6:1
User Experience
Das kennst du sicher: Du besuchst eine Website und merkst, dass du die Augen zusammenkneifst. Statt leicht lesbaren Text begrüßt dich ein weißer Hintergrund mit einem zarten Grau als Schriftfarbe. Ästhetisch ist das Design, hübsch ist die Seite. Aber die Inhalte lassen sich nur mit Mühe lesen.
Was machst du? Wahrscheinlich klickst du weg und suchst nach einer Alternative, die dir weniger Mühe macht. Und genau das ist das Problem: Mit zu wenig Kontrast werden User ratzfatz zu Ex-User. Du verlierst damit nicht nur Leser, sondern auch potenzielle Kunden.
Ein guter Farbkontrast beim Webdesign erhöht die Lesbarkeit. Die wiederum trägt dazu bei, dass User es leicht haben und ein Produkt gerne nutzen.
Ein digitales Produkt mit gutem Textkontrast verbessert die gesamte User Experience (UX), zu Deutsch: Nutzererfahrung. Wenn Nutzer den Text leicht lesen können, bleiben sie länger auf deiner Seite, interagieren häufiger mit deinen Inhalten und haben ein angenehmeres Erlebnis. Das wirkt sich nicht nur positiv auf die UX aus, sondern kann auch für niedrigere Absprungraten und mehr Conversions sorgen.
Guter Kontrast ist also nicht nur eine Frage der Ästhetik, sondern trägt zum Business-Erfolg bei. Nutzer, die sich mühelos durch deine Inhalte bewegen können, haben ein deutlich besseres Erlebnis und werden dein Produkt eher nutzen und weiterempfehlen.
Barrierefreiheit
Barrierefrei zu gestalten, ist kein Trend, sondern ein Muss. Es geht darum, digitale Inhalte für alle zugänglich zu machen, auch für Menschen mit Farbfehlsichtigkeit, einer Sehstörung oder einer Sehbehinderung.
Die kontrastreiche Gestaltung für digitale Produkte bezieht sich sowohl auf den Text als auch auf visuelle Elemente. Das Thema ist so wichtig, dass es im Styleguide der Bundesregierung dokumentiert ist.
Gesundheit
Schlechter Kontrast kann zu Augenbelastung und Kopfschmerzen führen – besonders bei längeren Bildschirmzeiten.
Die Sehkraft von uns Menschen ist sehr unterschiedlich. Zwischen solchen mit perfektem Sehvermögen und solchen mit Sehbeeinträchtigungen gibt es etliche Zwischenstufen. Viele von uns tragen eine Brille und die Sehkraft (aller?) verschlechtert sich mit zunehmendem Alter.
Auch wer lange am Bildschirm arbeitet, empfindlich auf Licht reagiert, mit einem älteren Bildschirm arbeiten oder viele Stunden am Rechner verbringen, wird es schätzen, wenn du auf einen vernünftigen Kontrast achtest und so für eine bessere Lesbarkeit sorgst.
Suchmaschinenoptimierung (SEO)
Wusstest du, dass Google mittlerweile eine explizite Kennzahl für Barrierefreiheit hat, zu der auch die Lesbarkeit gehört? Analysiere deine Seite mit Googles PageSpeed Insights und dann siehst du oben an 2. Stelle, wie deine Seite im Hinblick auf Barrierefreiheit aufgestellt ist.
Ein guter Kontrast fließt unmittelbar in den Algorithmus von Google ein und trägt so zum besseren Ranking deiner Website bei. UX ist inzwischen ein zentraler Bestandteil der Bewertung. Suchmaschinen bevorzugen heute Websites, die Inhalte anbieten, die klar und leicht zu lesen sind. Dazu wird unter anderem das Kontrastverhältnis ausgelesen. Je höher der Wert, desto besser das Ergebnis.
Fazit: mit der richtigen Farbwahl zur besseren User Experience
Ein gelungenes Design sieht nicht nur gut aus, sondern funktioniert auch, und zwar für alle Nutzer. Dazu gehört ein deutlicher Kontrast zwischen Text und Hintergrund mit einem Kontrastverhältnis von mindestens 7:1.
Überprüfe deine Farbwahl mit einem der genannten Tools und passe sie ggf. an. Deine User werden es dir danken. Die Conversion Rate auch.
Hast du Fragen zum Inhalt? Möchtest du etwas ergänzen? Teile deine Gedanken gerne unten in den Kommentaren.
Der UX-Blick von außen. Für mehr Klarheit auf deiner Website.
Antworten auf Fragen. Lösungen für Probleme.
Website Check-up*
Du willst wissen, wie du deine Website benutzerfreundlicher machen kannst?
Ich zeige dir die größten Stolpersteine – und wie du sie loswirst.
* WordPress, zum Beispiel
2 Kommentare zu „Farbwahl: Wie du mit gutem Kontrast die User Experience verbesserst“
Danke für diesen wirklich hilfreichen Artikel.
Obwohl ich dunkle Schrift auf weißem Hintergrund habe, werde ich Deine vorgeschlagenen Tools gerne ausprobieren.
Worüber ich sehr erstaunt bin, ist, dass die rote Schrift einen schlechteren Kontrast hat als die blaue Schrift. Das hätte ich nicht erwartet.
Diesen Artikel werde ich mir abspeichern und gerne immer mal wieder reinschauen.
Liebe Grüße
Hallo liebe Anja,
es freut mich, dass was Hilfreiches dabei ist. Und ja, mich überrascht es auch immer wieder, wie das subjektive Empfinden bei der Farbwahl sich von der objektiven Lesbarkeit unterscheiden kann. Deswegen finde ich diese Tools auch so wichtig und wertvoll. Vielleicht ergänze ich den Beitrag bei Gelegenheit noch mit einer größeren Grafik – ein Vergleich mit Text in Farbe X, 1x auf schwarzen und 1x auf weißen Hintergrund.
Herzliche Grüße
Inge