Contrasting views on web page backgrounds

Type on dark backgrounds

Q: We have a family-owned business and are thinking about using a dark background on our WordPress theme. It looks good to us, but a few of our friends have warned against this. I'd like to get your thoughts before we launch.

A: I’m so glad you asked before your site goes live!

The use of dark backgrounds remains controversial for designers. After all, nothing beats dark text against a light background for readability and accessibility. Yet, a dark background can often cue associations with luxury, elegance, status and power, making this an attractive option for some.

As a general rule, you can use light text on dark backgrounds if the amount of text is minimal. A paragraph of white text against a dark background can cause eye strain because it scatters all visible wavelengths of light. The reflected light from white type can cause the characters to “bleed” into the pixels around them, making them harder to distinguish.

For body text, nothing beats crisp dark text against a light background. This enables users to read content with minimal eye strain and optimal speed.

I think it’s very important that all websites are accessible to everyone, including those with visual impairments. Your website should meet, at a minimum, level AA standards for contrast. This means a contrast ratio of at least 4.5:1 for normal text, 3:1 for large text, and 3:1 for graphics and user interface components (such as form input borders). You can test your color scheme with the WebAIM Color Contrast Checker and test your site’s overall accessibility with their Web Accessibility Evaluation Tool.

Ultimately, like any other design decision, the correct answer is that is a balance of user experience, brand and content. When you write that the site looks good, but that “a few of our friends have warned against this,” I wonder what they’ve warned against. Do they agree with you that the site looks good? If not, I’d get their feedback.

In fact, since you haven’t launched the site, this is a great chance to test your user experience and make any tweaks. You can start by selecting a sample of your best customers. Share your new site with them individually or as a group (website preview party, anyone?). Observe as they explore the site and test its features. Then, collect their feedback about color schemes, readbility, functionality, and anything else they’d like to share with you.

Since design is ultimately about how a user responds emotionally, be sure to explore how they feel about using your site.

In the end, you want your customers to love visiting and using your website, to find it easy to navigate and read. If your users answer yes to all of these, then you can move forward with your design.

Have a question for the Q&A? Please email it here.