Gone are the days when internet users had to suffer through arbitrarily designed, flashy, green-on-red websites. Think MySpace circa most of our childhoods. Back then all you needed was to have a website, but now that everyone has a website, how do you compete?
Your users have options, so your website needs to be the best. In order to do that, you have to ensure your customers understand the story you’re trying to share – through branding, readability, and accessibility.
Basics of Readability
Readability simply means how easy it is to read your webpage. Think back to that green-on-red Christmas site you probably read in 2001. Did it strain your eyes? Could you follow the text easily?
Contrast: How High Can You Go
As Ginny Redish points out in her book Letting Go of the Words, high contrast colors are easiest to read. The most readable color scheme is a dark font on a light background.
You’re probably thinking, what about light on dark? If your site doesn’t have a lot of written content this might work for you, but if you’re planning on a blog your users won’t thank you (and probably leave pretty early).
If you do go against our recommendation and do the light font-on-dark background, use open space to your advantage. “The Dos and Don’ts of Dark Web Design” points out that text will look much closer and more cluttered on a dark background than a similar font and size will on a lighter background. Be sure to leave plenty of open space around text to make the color scheme less overwhelming to read.
Think back to that dark time in internet’s history when everyone created their own MySpace colors. It’s like a rainbow got high and threw up on everywhere, but instead of glitter we got seizures. While it’s tempting to include all the bright colors, could you imagine if the McDonald’s site were all yellow on red?
Using Accent Colors
A great way to draw your customers in without tiring out their eyes is to choose an accent color, as recommended by this blog on the psychology of color.
Work with a background, base, and accent. The accent should pop and be memorable and used on calling out action or important information, while the background and base should be easy to read.
No guide to choosing colors for the web is complete without a note on accessibility.
Colorblindness affects 1 in 12 men and 1 in 200 women. While colorblind people may not make up the majority of your users, a good site can and should be accessible to all. You don’t want your users leaving your site and you losing out on their support or money.
Red-green colorblindness is the most common form of colorblindness. While two colors might look distinct to most, to a color blind user they may appear almost the same. Below is a table of color combinations that can be particularly difficult for colorblind users to distinguish.
|Don’t pair green with…||Don’t pair blue with…|
*Thanks to Usabilla Blog for this list
Many websites will use dark gray instead of pure black text when writing on a white background. While high contrast is better than low contrast, pure black on pure white causes eye strain. It also makes reading your site difficult for those with dyslexia, who make up 10-15% of the US population.