Choose Text and Background Colors That Everyone Can Read

Note: This is a draft, I feel like it's a little rough but I'm not sure what's bothering me about it. So if you have any thoughts, feel free to leave a comment!

We've all seen websites that must have been designed by 21 year olds who eat a lot of carrots. As people get older, their eyes lose some ability to distinguish color and contrast - and honestly, some of us have eyesight that wasn't that great to start out with. Add in people with impaired vision due to illness or injury, plus people with color blindness, and you've got a good number of folks out there who might benefit from a little help distinguishing your text from your background.

Many mobile devices also don't have fabulous color contrast and are often used in situations where light is interfering with the screen, so mobile users also benefit from a color combination that's higher in contrast.

There's an ongoing dispute about what the "best" color combination is, and I doubt it will be settled any time soon since different groups of users with disabilities sometimes appear to have competing needs. The rough consensus, though is that in general, dark text on a light background - black/white, or black/cream for people with dyslexia - is the easiest for most people to read.

If you don't want that exact combination for your blog, though, you still may want to think about your current color choices and perhaps tweak them a bit to increase contrast.

Checking Your Blog

The best way to check your blog's readability is to use common sense. Take a step back from your monitor and honestly ask yourself whether your text stands out or blends in. If you're still not sure, ask your readers to give you feedback. (Of course, if your readers are all 21 and eat their carrots, then you may be fine.)

Dark colors combined with other dark colors, such as red/black, black/dark blue, black/green, or dark grey/burnt orange, are hard to read for most people whether they have a visual impairment or not. The same can be said about light colors combined with other light colors, such as light green/light blue or medium brown/khaki.

For people who have some degree of color blindness, reds and greens can be a problem. They can be confused with grey or even beige, yellow, and orange. Older folks or people with a more generalized color deficiency might also have trouble distinguishing between red and orange, blue and green, and other pairs of similar colors. So if you're going to combine some of those colors, you can't depend on the reader being able to perceive the color difference. You need to ensure that one of them is really light and the other is really dark - basically, maximize the contrast.

If you want something more scientific, there are a few online tests you can use.

GrayBit will render a grayscale version of your blog. This will show you how much contrast your blog has, but keep in mind that there may still be issues for people with impaired color vision. So Colorblind Web Page Filter lets you plug in your website and see what it would look like to someone who has a deficiency in their color vision. You can also try out Vischeck for a similar effect.

If you know the "hex" codes for the colors of your blog's background and text, you can try the Juicy Studio Colour Contrast Analyzer to get an idea of how much the colors contrast. The Colour Contrast Check lets you enter the codes, or you can use sliders to mix them. (Both are based on a set of recommendations called WCAG 1.0, which are being updated with a new version, but these are still handy tools.)

Fixing Your Blog

If you've decided that changes are in order, here's what to do. Some blogging tools don't offer the option to make changes:

• If you have a basic TypePad account or Vox account, you don't have any direct control over specific elements in your template. All you can do is choose a different theme.
• On WordPress.com, you can't edit your template unless you purchase the Custom CSS Upgrade. If you do, then you'll need to edit your stylesheet to make changes (see below).

Some blogging tools allow for fairly easy customization by clicking on different colors, with no knowledge of color codes required:

• In Blogger Beta, go to Manage Layout, then Fonts and Colors. You can click on any of the elements in your blog and pick a new color. (It actually shows you the hex code for the color when you click on it, so you could use that to figure out your current colors if you want to use one of the tools above.)
• If you have a TypePad Pro, Premium, or Business Class account and you are using a custom theme, you can change the background color. The instructions included in the TypePad help files under "Configuring a Custom Theme" will show you how.
• If you have a basic LiveJournal account and you're still using the old S1 style system, you can easily specify the colors of your background and text under Journal Display > Look and Feel > Theme. Switch from "Default Theme" to "Custom Colors." If you're using the S2 style system, you can specify these colors under Customize Your Theme > Style > Colors.

Editing Your Style Sheet

Some blogging tools require you to edit your style sheet to make changes to link color and/or decoration:

• If you're using Movable Type 4.x and you used StyleCatcher to select a theme, your link color and decoration scheme is in the CSS file for your theme, now saved under mt-static > support > themes. If you're using your own stylesheet, you can access that through the administrative interface or however you usually edit it.
• If you have a TypePad Pro, Premium, or Business Class account and you are using Custom CSS, or if you have converted your templates to Advanced Template Sets, you'll be looking in those files. (Or see "Using the Design Assistant" in the help files.)
• In self-hosted WordPress 2.x, you can edit your style sheet in the theme editor.

Colors are one of the easiest things to change in a style sheet. Anything with color: # in front of it is setting the color of an element. Anything with background-color: # in front of it is (surprise!) setting a background color of an element.

Colors are generally found after terms that look like this:

• body
• header
• a (perhaps with hover, visited, or some other additional word after it)
• content
• container
• post-title
• sidebar
• footer

You get the idea. It may take a little trial and error, but you can change the codes after the color: # to the new one. To speed up the process, try changing body first if you're looking to change your text color overall. If it doesn't work, change it back and try something else.

If you need a reference for color codes, try Webmonkey's color chart. You can search the page for the color code you're looking at in your CSS to figure out what element it goes with as well as finding the color code for the new color you want to use.

Sources and Further Reading