Ensure sufficient contrast so that text is legible, and do not rely on color to impart information, as not all users will be able to see the colors or perceive the differences.
Provide alternatives to color for identifying information. [WCAG 1.4.1]
- Ensuring that information conveyed by color differences is also available in text
- Using color and pattern
- Using semantic markup whenever color cues are used
- Ensuring that additional visual cues are available when text color differences are used to convey information
- Including a text cue for colored form control labels
Use CSS together with semantic markup. [WCAG 1.3.1]
- Using CSS to control visual presentation of text
- Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content
- Specifying borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors
Although the use of color is a common semantic method for conveying information to sighted users, it should never be used as the sole means of imparting information. Semantic markup should always underlie any use of border colors and shading so that the equal access is provided to users using non-visual playback methods.
More generally, though, be sure to always cleanly separate styles from content. Separation of styling ensures that users can apply their own style sheets and/or use and built-in color, brightness and contrast controls in their user agent to tailor the display to their needs.
But color is problematic for more than just the problems that arise conveying semantic meaning. Green text on red backgrounds (and vice-versa) can be unreadable for some people, and can generally cause what is known as visual vibrations. Red and black can also be indistinguishable to many users. Black text on bright white backgrounds can lead to eye strain and headaches.
Likewise, placing one shade of a color on another is also going to make reading difficult, as will placing two light or dark colors on top of each other (luminosity).
A user may be able to fix some of these issues with a configurable user agent, but it is better to avoid them in the first place.