Text Color Contrast Rules

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.

Accessibility Evaluation Rules

no.	Testing	Description	Implementation
			FAE	Firefox Accessibility Extension
1	Check	Text content foreground and background colors of text must have sufficient color contrast to be readible by people with visual impairments. Implementation Notes Evaluation Results A contrast ratio of less than 3:1 is considered poor contrast for readability. A contrast ratio greater than or equal to 3:1 but less than 7:1 is usually considered acceptable for readability. A contrast ratio greater than or equal 7:1 is considered ideal for readability. Other factors such as font family and size also are important in the readability of text content. The use of textured backgrounds and background images generally reduce readability and text contrast. Contrast ratio calculation from WCAG 2.0 Formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter of the colors, and L2 is the relative luminance of the darker of the colors. Note 1: Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1). Note 2: Because authors do not have control over user settings as to how text is rendered (for example font smoothing or anti-aliasing), the contrast ratio for text can be evaluated with anti-aliasing turned off. Note 3: For the purpose of Success Criteria 1.4.3 and 1.4.6, contrast is measured with respect to the specified background over which the text is rendered in normal usage. If no background color is specified, then white is assumed. Note 4: Background color is the specified color of content over which the text is to be rendered in normal usage. It is a failure if no background color is specified when the text color is specified, because the user's default background color is unknown and cannot be evaluated for sufficient contrast. For the same reason, it is a failure if no text color is specified when a background color is specified. Note 5: When there is a border around the letter, the border can add contrast and would be used in calculating the contrast between the letter and its background. A narrow border around the letter would be used as the letter. A wide border around the letter that fills in the inner details of the letters acts as a halo and would be considered background. Note 6: WCAG conformance should be evaluated for color pairs specified in the content that an author would expect to appear adjacent in typical presentation. Authors need not consider unusual presentations, such as color changes made by the user agent, except where caused by the author's code.	NI	1.5

FAE Rule Implemetation

Illinois Functional Accessibility Evaluator 1.0

The Illinois Functional Accessibility Evaluator is a web based tool to help developers evaluate web resources for the use of the iCITA HTML best practices.

Web interface cannot currently analyze content generated dynamically with javascript.

Illinois Firefox Accessibility Extension

The Illinois Firefox Accessibility Extension is a Firefox add-in that is designed to identify accessibility features for both static and dynamically generated html content.

Useful for identifying the location of specific accessibility problems for failures and warnings indentified in FAE reports.

Create FAE reports for a page that uses javascript to generate page content with the FAE DHTML Report feature.