Printer-friendly page
Screen-friendly pageText Color Contrast Overview
Overview
Text
Benefit to People with Disabilities
- People with visual impairements will have an easier time reading web pages.
Benefits to All Users
- Pages are easier for everyone to read.
Benefits to Developers
- Developers will be able to more easily read their own web pages.
Related Resources
- WAT-C Colour Contrast Analyser 1.1
- Review of 10 color contrast measurement systems for accessibility
- 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.