Schriftfarbe und Hintergrundfarbe: Webdesigntipps

Hier zeige ich einige Beispiele wie sich Hintergrundfarbe und Schriftfarbe im Webdesign zueinander verhalten. Die Lesbarkeit der Homepage sollte immer gegeben sein. Daher wird auch meist auf einen passenden Kontrast gesetzt. Es gibt allerdings Farbkombinationen, bei denen sich die Schriftfarbe mit der Hintergrundfarbe nicht verträgt und der Text flimmert auf dem Bildschirm, wenn er denn überhaupt zu lesen ist. Das gilt es zu vermeiden. Das Auge des Users sollte nicht schmerzen.

Gut lesbare Schriftfarbe auf farbigen Untergründen

Diese Farbhintergründe sind gut zu lesen, wenn die Schriftfarbe Schwarz oder Weiß ist. Zum Hervorheben sind sehr helle Schriftfarben auf dunklen Hintergrundfarben gut, aber eine ganze Seite ist damit eher schwierig zu lesen. Auch wenn das alten noch kennen, die mit einem c64 gearbeitet haben: Schwarzer Bildschirmhintergrund und weiße, hellgrüne oder hellblaue Schrift.

Hintergrundfarbe: #000000
Schriftfarbe: #ffffff

Hintergrundfarbe: #ffffff
Schriftfarbe: #000000

Hintergrundfarbe: #abb8c3
Schriftfarbe: #000000

Hintergrundfarbe: #f78da7
Schriftfarbe: #000000

Hintergrundfarbe: #cf2e2e
Schriftfarbe: #ffffff

Hintergrundfarbe: #ff6900
Schriftfarbe: #000000

Hintergrundfarbe: #fcb900
Schriftfarbe: #ffffff

Hintergrundfarbe: #7bdcb5
Schriftfarbe: #000000

Hintergrundfarbe: #00d084
Schriftfarbe: #ffffff

Hintergrundfarbe: #8ed1fc
Schriftfarbe: #ffffff

Hintergrundfarbe: #0693e3
Schriftfarbe: #ffffff

Hintergrundfarbe: #9b51e0
Schriftfarbe: #ffffff

Schwarzer Hintergrund mit verschiedenen Schriftfarben

Ein schwarzer Hintergrund mit hellen Schriftfarben, wie hellgrau, rosa, hell-orange, hellgrün und hellblau eignen sich für den Header, für manche Buttons oder die Menüleiste. Für den Body, also den allgemeinen Texthintergrund kann ich das nur bei Seiten empfehlen, die sich mit Hacken, Programmieren oder dunklen Geschäften und Stimmungen beschäftigen.

Hintergrundfarbe: #000000
Schriftfarbe: #abb8c3

Hintergrundfarbe: #000000
Schriftfarbe: #f78da7

Hintergrundfarbe: #000000
Schriftfarbe: #fcb900

Hintergrundfarbe: #000000
Schriftfarbe: #7bdcb5

Hintergrundfarbe: #000000
Schriftfarbe: #8ed1fc

Schlechte Farbkombinationen

Rot-Blau oder Magenta-Blau, Grün-Orange Hintergrund und Schriftfarben Kombinationen sind meistens sehr schwierig zu lesen.

Hintergrundfarbe: #cf2e2e
Schriftfarbe: #0693e3

Hintergrundfarbe: #7bdcb5
Schriftfarbe: #fcb900

Bei schlecht aufeinander abgestimmten Hintergrund- und Schriftfarben ist, dass der Text entweder unangenehm in den Augen flimmert oder gar nicht lesbar ist. Mit einer bestimmten Schriftgröße kann man das manchmal ausgleichen, aber bei bestimmten Farbkombinationen geht einfach nichts mehr.