In software design and development you can’t avoid dealing with text. A designer hands over a mockup, the developer eyedroppers the color and hardcodes it — then the day you change the theme or background, the result is horrendous. Here’s what I’ve learned about text color.
I’m talking mainly about the browser here, but the same idea probably applies to mobile apps and desktop dialogs. Try it and see what you think.
Web pages are full of colored blocks — buttons, menus, banner images — and text sits on top of them, which raises the question of text color versus background color. Usually we just sample the value from the design mockup without thinking about future background changes, or about a single page having several different backgrounds while we set only one text color. It ends up looking like this:
It looks acceptable on a white background, but move it onto a colored background and the text becomes painful to read. I don’t actually know why — I’m not a visual designer — but my guess is the contrast between foreground and background is too harsh, and letting some opacity through smooths it out.
Here’s the same thing with white at 80% opacity. Much easier on the eyes: some of the background color bleeds through, so it feels harmonious. Opacity wins.
