Web checklist

Checkpoint AA1.4.3: *WCAG 2.0 AA* Contrast (Minimum)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:


Rationale

Web content must provide enough contrast between text and background colors to enable users with moderately low vision to read the text without contrast-enhancing technology.

This checkpoint addresses content with small text and a second with larger text. WCAG 2.0 has less stringent requirements for large text because large text is easier to read at lower contrast. Large text is defined as 18 point or greater when not bold and 14 point or greater when bold.

This checkpoint also applies to images of text that are intended to be understood as text. This checkpoint does not apply to decorative text that conveys no meaning and text that is part of a logo or brand name.

While this checkpoint specifically addresses text contrast, WCAG 2.0 recommends sufficient color contrast for data presented in charts and graphs.

For more information, refer to the Intent of this Success Criterion in WCAG 2.0 Level AA Success Criterion 1.4.3 (link resides outside of ibm.com).

Required development and unit test techniques


To comply with this checkpoint, you must meet at least one the following techniques. These techniques are defined in WCAG 2.0 Level AA Success Criterion 1.4.3 (link resides outside of ibm.com).

  1. Minimum contrast: The contrast between text (and images of text) and the background behind the text must meet the following minimum requirements based on the size of the text:
    • Small text: 4.5:1 contrast ratio for plain text that is less than 18 point if not bold and bold text that is less than 14 point.
    • Large text: 3:1 contrast ratio for plain text that is at least 18 point if not bold and bold text that is at least 14 point.
  2. Use color defaults: Do not specify background color or text color and do not use technology features that change those defaults.
  3. Alternate presentation: Provide a control with a sufficient contrast ratio so that allows users can switch to a presentation that uses sufficient contrast.

Note: The examples presented in the techniques are not exhaustive. The examples are meant to illustrate the spirit of this checkpoint.

General examples

  1. Minimum contrast: The contrast between text (and images of text) and the background behind the text must meet the following minimum requirements based on the size of the text:

    • Small text: 4.5:1 contrast ratio for plain text that is less than 18 point if not bold and bold text that is less than 14 point.
    • Large text: 3:1 contrast ratio for plain text that is at least 18 point if not bold and bold text that is at least 14 point.

    It is highly recommended that you design a color scheme with the help of a color analyser. You can do this before coding the Web page to ensure contrast requirements will be met. Find a tool that analyzes the contrast of your color choices. The tool should calculate the contrast ratio using the WCAG 2.0 relative luminance formula to help you determine if large and small fonts will meet WCAG 2.0 Level AA contrast requirements.

    To comply with this technique, you must implement all of the following examples.

    General example 1: Small text

    A Web application has a text box that is in 10 point plain text. The colors used are a dark blue (#0000E7) text on a medium gray (#B0B0B0) background that provides a contrast ratio of 4.5:1. This color scheme meets the minimum requirement.

    Entry field with small blue text on a medium gray background.


    General example 2: Large text

    A Web application has a button with 18 point plain text. The colors used are a white (#FFFFFF) text on an orange (#F76800) background that provides a contrast ratio of 3:1. This color scheme meets the minimum requirement.

    Button showing large white text on orange background.


    Required unit tests for general development technique 1

    Manually review the content and ensure that the contrast ratio meets the WCAG 2.0 AA criteria as follows:

    • For any plain text that is less than 18 point and bold text that is less than 14 point, the contrast ratio is equal to or greater than 4.5:1.
    • For any plain text that is at least 18 point and bold text that is at least 14 point, the contrast ratio is equal to or greater than 3:1.

    Note: Calculate the contrast ratio using the WCAG 2.0 relative luminance formula.

  2. Use color defaults: Do not specify background or text color and do not use technology features that change those defaults.

    By using the default colors, the user can set their own preferred color schemes in the operating system, browser, or customized CSS to provide sufficient contrast.

    To comply with this technique, you must implement the following example.

    General example 4

    A Web application does not specify the text color or background color, which enables the user to set browser color defaults to their preferred settings.

    Required unit test for general development technique 2

    Manually review the content and ensure the color settings meet the WCAG 2.0 AA criteria as follows:

    • All color settings for the text and background behind text do not use any technology feature, such as CSS.
  3. Alternate presentation: Provide a control with a sufficient contrast ratio so that users can switch to a presentation with a preferable contrast.

    To comply with this technique, you must implement the following example.

    General example 5

    Although a Web page does not meet the contrast requirements for large and/or small text, the page contains a link that opens a version of the page that meets the requirement. The link is located in the site navigation list and has a contrast ratio appropriate for the font size of the link text as specified in technique 1.

    A Switch to High Contrast link is provided in the navigation bar.


    Required unit tests for general development technique 3

    Manually review the Web page and ensure the alternate presentation options meet the WCAG 2.0 AA criteria as follows:

    • A navigational link is provided that takes the user to a version of the page that meets the contrast requirements. The contrast of the link text meets the following requirements:
      • Small text: 4.5:1 contrast ratio for plain text that is less than 18 point if not bold and bold text that is less than 14 point.
      • Large text: 3:1 contrast ratio for plain text that is at least 18 point if not bold and bold text that is at least 14 point.
    • The user is able to locate the link and select it using only the keyboard.
    • The alternative Web page that presents the information in high contrast meets the required contrast ratios for the size of the text.

CSS examples

  1. Minimum contrast: The contrast between text (and images of text) and the background behind the text meet the following minimum requirements based on the size of the text:

    • Small text: 4.5:1 contrast ratio for plain text that is less than 18 point if not bold and bold text that is less than 14 point.
    • Large text: 3:1 contrast ratio for plain text that is at least 18 point if not bold and bold text that is at least 14 point.

    To comply with this technique, you must implement the following example.

    CSS example 1

    A Web page uses CSS to create a color scheme for the text content. The contrast ratio for large and small text adheres to the requirements of 4.5:1 for small text and 3:1 for large text.

    Required unit test for CSS development technique 1

    Refer to Required unit tests for general technique 1.

  2. Use color defaults: Do not specify background color or text color and do not use technology features that change those defaults.

    There are no CSS examples for this technique. Refer to the general examples for guidance.

  3. Alternate presentation: Provide a control with a sufficient contrast ratio so that users can switch to a presentation with a preferable contrast.

    CSS example 2

    Although a Web page does not meet the contrast requirements for large and/or small text, it has a button to switch the presentation to a high contrast style sheet.  The button is located at the top of the Web page and has a contrast ratio appropriate for the font size of the button text as specified in technique 1.

    Required unit tests for CSS development technique 3

    Manually review the Web page and ensure the alternate presentation options meet the WCAG 2.0 AA criteria as follows:

    • A button or other control is provided that will allow the user to switch to a high contrast presentation of the Web page that meets the contrast requirements. The contrast of the text on the control meets the following requirements:
      • Small text: 4.5:1 contrast ratio for plain text that is less than 18 point if not bold and bold text that is less than 14 point.
      • Large text: 3:1 contrast ratio for plain text that is at least 18 point if not bold and bold text that is at least 14 point.
    • The user is able to locate the control and select it using only the keyboard.

    The Web page switches to a high contrast presentation that meets the required contrast ratios for the size of the text.


Recommended development techniques

Although you are not required to implement the recommended techniques in order to comply with this checkpoint, you should review these techniques because they can improve the accessibility and usability of the application. Refer to the WCAG 2.0 Additional Techniques (Advisory) for Success Criterion 1.4.3 (link resides outside of ibm.com) for a list of techniques and examples.


©2013 IBM Corporation

Last updated January 1, 2013.

W3C Recommendation 11 December 2008: http://www.w3.org/TR/WCAG20/ (link resides outside of ibm.com)
Copyright 1994-2009 W3C (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University), All Rights Reserved.