Color
It is estimated that 1 in 20 visitors to a Web site will have some form of color vision deficiency and may find the Web site either difficult to or impossible to use if color by itself is used to convey information. It is good to use color to convey information. The key is not to use color alone.
An example of using color alone to convey a message is below. When the color red is used to indicate required fields in a form people who are color-blind (achromtopsia) will have difficulty finding required fields.
Adding a symbol, like an asterisk, that indicates required fields allows color-blind users to determine which fields are required.
For more information on forms and required fields, read Mandatory Form Fields.
Contrast
Be sure there is enough contrast between foreground text color and background color. If the foreground and background colors are too close to the same hue, they may not provide sufficient contrast for some visitors.
The visual presentation of text and images of text should have a contrast ratio of at least 4.5:1
- Large Text: Large-scale text and images of large-scale text should have a contrast ratio of at least 3:1;
- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains insignificant visual content, have no contrast requirements.
- Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
Image text should be avoided. If image text is used it must be customizable for the user to increase contrast for better visual presentation. This can be accomplished with CSS and implementing functionally to switch to a high contrast style sheet.
Tools
There are a few tools that can be used to determine if enough color contrast is being used.
- Color Contrast Analyser for Web Pages (for the PC)
A tool for checking foreground & background color combinations to determine if they provide good color visibility. Determining "color visibility" is based on algorithms suggested by the World Wide Web Consortium. - Colour Contrast Check Tool (Web Based)
This tool allows you to specify a foreground and a background color and determine if they provide enough of a contrast "when viewed by someone having color deficits or when viewed on a black and white screen." - Sim Daltonism (color blindness simulator for Mac OS X)
A color blindness simulator that filters in real-time the area around the mouse pointer and displays the result — as seen by a color blind person — in a floating palette. - Lighthouse International
Examples of different color combinations and how they effect people with partial sight and color deficiencies.
References
- Caldwell, B, ed, Trace R&D Center, ed, W3C, ed, Web Content Accessibility Guidelines (WCAG) 2.0. World Wide Web Consortium. December 2008.
- Rutter, R, Thatcher, J, Web Accessibility: Web Standards and Regulatory Compliance. Berkeley, CA: friends of ED/Apress, 2006.