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 sufficient contrast between foreground and background colors. [WCAG 1.4.3 and WCAG 1.4.6]
- G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
- G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text
- G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text
- G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast
- G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them
- Provide alternatives to color for identifying information. [WCAG 1.4.1]
- G14: Ensuring that information conveyed by color differences is also available in text
- G111: Using color and pattern
- G138: Using semantic markup whenever color cues are used
- G182: Ensuring that additional visual cues are available when text color differences are used to convey information
- H92: Including a text cue for colored form control labels
- Use CSS together with semantic markup. [WCAG 1.3.1]
- C22: Using CSS to control visual presentation of text
- C23: 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
- C25: 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.
But color is problematic for more than just the problems that arise conveying semantic meaning. The contrast between foregrounds and backgrounds can make reading difficult. Green text on red backgrounds (and vice-versa) can be unreadable for some people, and can generally cause what's 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 best to avoid them in the first place.
Also avoid placing text over noisy (multi-colored) backgrounds. The less uniform the background is the more difficult it can be for any user to follow.
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.