Skip to content

Just use black

I don’t know if this is the true start of the trend, but sometime around 2012 I began to notice more and more websites reducing the contrast of their text. Big, popular frameworks like Bootstrap started shipping with text that was charcoal (#333) instead of true black (#000), and there was even a popular blog post called Design Tip: Never Use Black that spread the idea farther. I was hoping this was a passing fad, but it seems to have stuck around.

The most common reason I’ve heard people give for refusing to use black-on-white text (in real life and online) is that somehow it’s too high contrast and will lead to eye strain. I don’t think this argument holds up at all. Users have many, many ways to reduce the contrast of your text – often unintentionally – but comparatively few ways to increase the contrast of text if needed.

It’s important to remember that whatever colors you specify in your website’s CSS are going to be mediated by an actual, physical device like a smartphone screen, computer monitor, or television. Unless your users have very expensive, specialized, color-calibrated equipment, their screen is probably not able to faithfully render colors accurately, and cheaper devices tend to be more “washed out” (lower contrast) than more expensive ones. Additionally, most consumer-oriented monitors are pre-configured to reduce brightness and contrast for more comfortable reading, and many include built-in configurations to reduce contrast even further – on my monitor it’s called “Comfort Mode”. Needless to say, you have no control over how the user has calibrated their screen.

The user’s physical environment will also alter their perception of the colors on your site. In my experience, cheap laptops have a really hard time dealing with ambient light, which washes out the colors on the screen and can make even black text difficult to read. There’s nothing you as a designer can do about this: your website is not some kind of painting or art installation that you can choose to display in a particular context with appropriate lighting, at a particular distance from the viewer, and so on.

Taken as a whole, I think these issues make the idea of designing to avoid making your site too high contrast is a little absurd. It’s much more likely that your typical user’s experience of the site will be too low contrast due to some combination of cheap equipment, bad screen calibration/configuration, environmental factors, etc.

Just use black. Whatever shade of grey your users actually experience when you specify the color #000 is more likely to be dark enough to be legible than whatever grey they see when you specify #333.