Color

The color contrast used on a web page can affect how readable the site and its contents will be.  If colors are too close to one another, it can cause eyestrain when trying to read the content. Along with cognition problems, this sort of strain to read text or other content such as graphs can cause users to develop headaches.

Color Blindness is a quite common visual impairment. Not all individuals who are colorblind are even aware of their impairment.  There are more than one type of colorblindness, and not just the type that leaves individuals only capable of seeing in grayscale.  10% of men are one form of color deficient or another, and many are not aware.  Because they can see color, they often will not question their ability to see the full spectrum of visible colors.  This is important to consider when deciding on two contrasting colors for a web design.  Two differing colors could be close enough of a shade when converted to a grayscale that they appear to be identical.  There are some different ways to test color or page design for proper contrast.  Converting the colors to grayscale and comparing them side-by-side for proper contrast is a great way to test the contrast for all levels of color blindness for readability.

Color Contrast Checks

Text and Background colors

The Accessibility Color Wheel Allows you to choose background and foreground (text) colors to test them for proper color contrast.

Image Markups / Edits

If you are going to modify images with markups such as circling, underlining, or pointing arrows to important items, an easy way to check the contrast of the color used to make the markups is top convert the image to a grayscale image.

Convert to Grayscale with Fireworks CS4

Open the image within Fireworks and in the lower right corner (default layout) select the “Image Edit” tab.  With the Image Edit tab expanded select Adjust Colors -> Convert to Grayscale and you will be able to make a visual judgment for the contrast.  Be sure not to save the image in the Grayscale form.

Convert to Grayscale with Photoshop CS4

Open the image within Photoshop and select the “Image” option in the menu bar. With the Image menu expanded select Mode -> Grayscale.  Then select Discard and you will be able to make a visual judgment for the contrast. Be sure not to save the image in the Grayscale form.

You can find a tool that allows you to see through the eyes of various types of colorblind users here: Color Laboratory

Distractions

Unnecessary animations or images, color