Text Color Contrast Overview

Overview

Text

Benefit to People with Disabilities

  1. People with visual impairements will have an easier time reading web pages.

Benefits to All Users

  1. Pages are easier for everyone to read.

Benefits to Developers

  1. Developers will be able to more easily read their own web pages.

Related Resources

  1. WAT-C Colour Contrast Analyser 1.1
  2. Review of 10 color contrast measurement systems for accessibility
  3. Color Contrast Check

HTML Markup Details

CSS color property
The CSS color property should be used for styling the foreground color of text content.
CSS background-color property
The CSS background-color property should be used for styling the background ground color of text content.
CSS background-images property
The CSS background-color property should be used for styling the background ground color of text content.

Related Accessibility Requirements

Illinois Information Technology Accessibility Standards
3.1 - Do not convey information with color alone.
3.2 - Use contrasting foreground and background colors.
Section 508
§ 1194.21 (g) Applications shall not override user selected contrast and color selections and other individual display attributes.
§ 1194.21 (j) When a product permits a user to adjust color and contrast settings, a variety of color selections capable of producing a range of contrast levels shall be provided.
§ 1194.22 (c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
W3C Web Content Accessibility Guidelines 2.0
1.4.1 Use of Color
1.4.3 Contrast (Minimum)
1.4.6 Contrast (Enhanced)
W3C Web Content Accessibility Guidelines 1.0
2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup.
2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. [Priority 2 for images, Priority 3 for text].
3.3 Use style sheets to control layout and presentation.