One of the most critical considerations in making content accessible is that of good color contrast between foreground and background. Being able to gauge what is acceptable color contrast has been a judgment call in the past. With the AIS Colour pulldown menu, this task is no longer subjective. We will take a look at two of the features in the Colour menu.
This slide is the disney.com homepage. For someone with color blindness this is a nightmare with all of the different and varying color differences. There are a number of accessibility issues with this page, but for the moment, we will focus on color contrast.
The first option in the Colour menu is Grayscale. The results of this feature are shown on this slide. Seeing things in black and white is a good generic way of experiencing what someone with color blindness experiences on the Web. Look closely at the color contrast between the text color of the word Search just, to the right of the search edit field. It would be difficult for many low vision users to read as well as those with color blindness. You do develop a sense of good color contrast if you pay attention to it long enough. As you develop course materials, keep color contrast in mind.
The Contrast Analyzer is a very valuable ally in taking the guesswork out of color contrast. An algorithm has been developed to create a way of checking foreground and background colors on a pass/fail basis. When you choose the Contrast Analyzer, it brings up a dialog box. If the foreground and background of a page, or an area on a page, there is an eye dropper tool for background and foreground at the top right of the dialog box. When you click on the eye dropper for either of these selections, a small square area will be magnified with the eye dropper in the area. Move the mouse to the foreground or background of the contrast in question and click on it. The hexadecimal number for that color will be place in the appropriate edit field just to the left of the eye dropper icon. Once you have checked both foreground and background, you are given the results in two ways. Just below the foreground and background test area, there is a checkbox for pass/fail for the four major conditions for color blindness. If the test fails, red check marks will be place beside the condition. If the test passes, there will be no red check marks.
If you would like to check for low vision users, just uncheck the color blindness checkbox. An edit field will replace the color blindness area. The results of the test on the word Search foreground and the background color where the word Search is located on the Disney page, shows that the results are a number 82. The threshold number for good color contrast is 125.
This is much more difficult to explain than it is to do. When you look at a webpage and you have questions with regard to readability and color contrast, use the Color Analyzer to answer your questions