Guideline 2. Don't rely on color alone
Source Article: http://www.w3.org/TR/WCAG10/#gl-color
Color can make a big difference in the way a user perceives a website. It can also be a big factor in the way they don't percieve it at all. It's very clear that many pages are unclear due to contrast issues when the background and the text are very similar in color. This article helps to identify other difficulties with colors and how they can be avoided and how we as web developers can create better pages to help even those who are poor or even no-sighted
The first checkpoint is to be sure that all information conveyed with color is also availabe without color, for example from context or markup. For example, your page should never include an instruction such as, "Please select an item from those listed in green." Yes, we should be able to make the items clear in another way, whether it is by position or by relation to the division of the page or whatever. Green is not a clear description for somebody who can't see green. Believe it or not, there are alot of people who cannot. To make sure that your content makes sense without relying on the colors, it should obviously be tested. You could view your website on a monochrome monitor, turn the colors off in your browser, or print your pages in a black and white printer. Whatever you do, just do it.
The other checkpoint is to be sure that the foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. Okay, now that our content makes sense without color, can we still make it out if we are a little color blind? It is a all too common mistake to put two colors together that have a similar hue. When it's read, if it can be read, it's an eye squinting task at best.
A few tips were given to help in these areas:
- Use numbers, not names, for colors
- Use 'color' for foreground text color
- Use 'background-color' for background colors
- use 'border-color' or 'outline-color' for border colors
- For link colors, refer to the link, visited, and active pseudo-classes
- When specifying a foreground color always specify a background color and vice-versa
I think the best way to make sure to implement this and to keep on top of it is just to actually think about and consider that there are many out there who need your site who can't see. However, it's very important they see your site, so we need to cater to them.
