Color

The rule of accessibility is to ensure that you do not use only color to convey information. This sentence is a bit nebulous for some people. What this means to transmit a message only with the color? Let's look at this map of London Underground:

A person who can see colors has no difficulty in distinguishing red lines, dark blue, light blue, etc.. A person can not see color, because it is color-blind or with low vision, will probably not able to distinguish the different subway lines as easily. Someone who is blind can not see them at all. Look at this in black and white image:

How would you know which bus to catch to get to Waterloo? Before going further, you need to know that people who are color blind can see colors (except for rare cases), so that the grayscale drawing above is not representative of color blindness . It is simply an example of an image in which color is used to transmit information. When the colors are removed, the different subway lines are almost indistinguishable.

Consider below an example of how to circumvent this potential problem. WebAIM training CD uses colored tabs to designate the categories of links in the top navigation bar.

If a lighter color was used for the background tabs resources, the text would have been difficult to read.

The method used on the WebAIM site training to avoid confusion was to put the category titles in brackets above the tabs in the same category. Hooks ordered tabs based on workshops and resources. Even when there is no color at all on this page, information is always accessible.

Test your web pages to ensure that no information is lost when you remove the colors. You can do this by printing the page with a black and white printer (make sure your printing preferences are set to print background colors). You can also do it like we did on this page, taking a screenshot of the page, then deleting all the colors in a graphics program such as Adobe PhotoShop or Corel PhotoPaint. To do this in Windows, open the page you want to check, and then click Print Screen (Prnt Scrn often labeled). ). Then open a new file in your graphics program and use the Paste command (Ctrl + V). Finally, change the image into a grayscale image.

Contrast

Look back at the black and white version of the page of the training site.

Besides the fact that this is only a screenshot of the page where the text is much smaller and a little more blurry than the original page, you will notice that all text is easily distinguishable from background colors around him. Where there is a light background, there is a dark text. Where there is a dark background, there is a clear text. People with low vision will have no trouble making the difference between the levels of contrast text and backgrounds.

If a lighter color was chosen for the background tabs resources, the text would have been harder to read.

Make sure when you choose the color background they do not reduce contrast levels to make the text unreadable.