The presentation of this document has been augmented to identify changes from a previous version. Three kinds of changes are highlighted: [begin add] new, added text [end add],[begin change] changed text [end change], and[begin delete] deleted text [end delete].

Understanding Success Criterion 1.4.3 [Contrast (Minimum)]

[begin change]

1.4.3 Text and images of text have a contrast ratio of at least 5:1, and large-scale text and images of text have a contrast ratio of at least 3:1, except for the following: [2000] (Level AA)

[end change]
[begin add]
  • Inactive User Interface: If text content is part of an inactive user interface component, then no minimum contrast requirement applies.

  • Decoration or Incidental: If text content is pure decoration, or is incidental text in an image, then no minimum contrast requirement applies.

  • Invisible: If text is not visible to anyone, then no minimum contrast requirement applies.

[end add]
[begin add]

Note: Success Criteria 1.4.3 and 1.4.5 can be met via a contrast control available on or from the page.

[end add]

Intent of this Success Criterion

The intent of this success criterion is to provide enough contrast between text and its background so that it can be read by people with moderately low vision (who do not use contrast-enhancing assistive technology). For people without color deficiencies, hue and saturation have minimal or no effect on legibility as assessed by reading performance (Knoblauch et al., 1991). Color deficiencies can affect luminance contrast somewhat. However, in the recommendation, the contrast is calculated in such a way that color is not a key factor so that people who have a color vision deficit will also have adequate contrast between the text and the background. Text that is decorative and conveys no information is excluded. For example, if random words are used to create a background and the words could be rearranged or substituted without changing meaning, then it would be decorative and would not need to meet this criterion.

Text that is larger and has wider character strokes is easier to read at lower contrast. The contrast requirements for larger text is therefore lower. This allows authors to use a wider range of color choices for large text, which is helpful for design of pages, particularly titles. 18 point text or 14 point bold text is judged to be large enough to require a lower contrast ratio. "18 point" and "bold" can both have different meanings in different fonts but, except for very thin or unusual fonts, they should be sufficient. Since there are so many different fonts, the general measures are used and a note regarding fancy or thin fonts is included.

[begin add]

The previously-mentioned contrast requirements for text also apply to images of text (text that has been rendered into pixels and then stored in an image format) as stated in success criterion 1.4.3. [1978]

[end add]
[begin add]

This requirement applies to situations in which images of text were intended to be understood as text. Incidental text, such as in photographs that happen to include a street sign, are not included. Stylized text, such as in corporate logos, should be treated in terms of its function on the page, which may or may not warrant including the content in the text alternative. [1978]

[end add]

Rationale for the Ratios Chosen

A contrast ratio of 3:1 is the minimum level recommended by [ISO-9241-3] and [ANSI-HFES-100-1988] for standard text and vision. The 5:1 ratio is used in this provision to account for the loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging.

The rationale is that loss of logarithm of visual acuity is generally linearly related to loss of logarithm of contrast sensitivity, in people with low vision such that the user with 20/40 visual acuity would need roughly 4.5:1 contrast to have the equivalent of the 3:1 minimum contrast standard for normal vision [ARDITI-FAYE]. The user with 20/47 visual acuity would require contrast of about 5:1, and the user with 20/80 visual acuity would require contrast of about 7:1.

Hues are perceived differently by users with color vision deficiencies (both congenital and acquired) resulting in different colors and relative luminance contrasts than for normally sighted users. Because of this, effective contrast and readability are different for this population. However, color deficiencies are so diverse that prescribing effective general use color pairs (for contrast) based on quantitative data is not feasible. Requiring good luminance contrast accommodates this by requiring contrast that is independent of color perception. Fortunately, most of the luminance contribution is from the mid and long wave receptors which largely overlap in their spectral responses. The result is that effective luminance contrast can generally be computed without regard to specific color deficiency, except for the use of predominantly long wavelength colors against darker colors (generally appearing black) for those who have protanopia. (We provide an advisory technique on avoiding red on black for that reason). For more information see [ARDITI-KNOBLAUCH] [ARDITI-KNOBLAUCH-1996] [ARDITI].

The contrast ratio of 5:1 was chosen for level AA because it compensated for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/40 vision. (20/40 calculates to approximately 4.5:1 which is rounded up to 5 providing a slight additional increase in contrast.) 20/40 is commonly reported as typical visual acuity of elders at roughly age 80. [GITTINGS-FOZARD]

The contrast ratio of 7:1 was chosen for level AAA because it compensated for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/80 vision. People with more than this degree of vision loss usually use assistive technologies to access their content (and the assistive technologies usually have contrast enhancing, as well as magnification capability built into them). The 7:1 level therefore generally provides compensation for the loss in contrast sensitivity experienced by users with low vision who do not use assistive technology and provides contrast enhancement for color deficiency as well.

Note: Calculations in [ISO-9241-3] and [ANSI-HFES-100-1988] are for body text. A relaxed contrast ratio is provided for text that is much larger.

Notes on formula

Conversion from nonlinear to linear RGB values is based on IEC/4WD 61966-2-1 [IEC-4WD] and on "A Standard Default Color Space for the Internet - sRGB" [sRGB].

The formula (L1/L2) for contrast is based on [ISO-9241-3] and [ANSI-HFES-100-1988] standards.

The ANSI/HFS 100-1988 standard calls for the contribution from ambient light to be included in the calculation of L1 and L2. The .05 value used is based on Typical Viewing Flare from [IEC-4WD] and the [sRGB] paper by M. Stokes et al.

This success criterion and its definitions use the terms "contrast ratio" and "relative luminance" rather than "luminance" to reflect the fact that Web content does not emit light itself. The contrast ratio gives a measure of the relative luminance that would result when displayed. (Because it is a ratio, it is dimensionless.)

Note: Refer to related resources for a list of tools that utilize the contrast ratio to analyze the contrast of Web content.

Specific Benefits of Success Criterion 1.4.3:

  • People with low vision often have difficulty reading text that does not contrast with its background. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a minimum luminance contrast ratio between the text and its background can make the text more readable even if the person does not see the full range of colors. It also works for the rare individuals who see no color.

Examples of Success Criterion 1.4.3

Related Resources

Resources are for information purposes only, no endorsement implied.

Techniques and Failures for Success Criterion 1.4.3 [Contrast (Minimum)]

Each numbered item in this section represents a technique or combination of techniques that the WCAG Working Group deems sufficient for meeting this success criterion. The techniques listed only satisfy the success criterion if all of the WCAG 2.0 conformance requirements have been met.

Sufficient Techniques

Instructions: Select the situation below that matches your content. Each situation includes techniques or combinations of techniques that are known and documented to be sufficient for that situation.

Situation A: text is less than 18 point if not bold and less than 14 point if bold

  1. G18: Ensuring that a contrast ratio of at least 5:1 exists between text (and images of text) and background behind the text

  2. H21: Not specifying background color, not specifying text color, and not using CSS that changes those defaults (HTML)

Situation B: text is as least 18 point if not bold and at least 14 point if bold

  1. G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text

  2. H21: Not specifying background color, not specifying text color, and not using CSS that changes those defaults (HTML)

Common Failures Identified by the Working Group

The following are common mistakes that are considered failures of Success Criterion 1.4.3 by the WCAG Working Group.

Additional Techniques (Advisory) for 1.4.3

Although not required for conformance, the following additional techniques should be considered in order to make content more accessible. Not all techniques can be used or would be effective in all situations.

  • Using a higher contrast value for text that is over a patterned background (future link)

  • Creating foreground and background contrast (future link)

  • Using a light pastel background rather than a white background behind black text (future link)

  • Using Unicode text and style sheets instead of images of text (future link)

  • Using a higher contrast values for lines in diagrams (future link)

  • Using greater contrast level for red-black text/background combinations

  • Using colors that are composed predominantly of mid spectral components for the light and spectral extremes (blue and red wavelengths) for the dark

  • Using a light pastel background rather than a white background behind black text (future link)

Key Terms

contrast ratio

(L1 + 0.05) / (L2 + 0.05), where

Note 1: Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1).

Note 2: For dithered colors, use the average values of the colors that are dithered (average R, average G, and average B).

Note 3: Text can be evaluated with anti-aliasing turned off.

Note 4: Background color is the specified color of content over which the text is to be rendered in normal usage. If no background color is specified, then white is assumed.

[begin change]

Note 5: Background color is the specified color of content over which the text is to be rendered in normal usage. It is an error if no background color is specified when a foreground 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 an error if no foreground color is specified when a background color is specified. [2263]

[end change]
larger scale (text)

with at least 18 point or 14 point bold or font size that would yield equivalent stroke width for Chinese, Japanese and Korean (CJK) fonts [2175]

Note 1: Fonts with extraordinarily thin strokes or unusual features and characteristics that reduce the familiarity of their letter forms are harder to read, especially at lower contrast levels.

Note 2: Font size is the size when the content is delivered. It does not include resizing that may be done by a user.

[begin add]

Note 3: The actual size of the character that a user sees in dependent both on the author-defined size and the users display or user-agent settings. This success criterion is based on common pixel sizes available today. Users who have low vision would be responsible for choosing appropriate settings. [2267]

[end add]
pure decoration

serving only an aesthetic purpose, providing no information, and having no functionality

Note: Text is only purely decorative if the words can be rearranged or substituted without changing their purpose.

Example: The cover page of a dictionary has random words in very light text in the background.

text

sequence of characters that can be programmatically determined, where the sequence is expressing something in human language