The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, with a 3:1 ratio for large-scale text. (Level AA)

Rationale

Content must provide enough contrast between text and its background to enable users with moderately low vision to read the text without contrast-enhancing technology. (Users requiring more contrast will often use an assistive technology or platform feature such as Windows High Contrast mode.)

WCAG 2.0 makes a distinction between "large" text and small or body text.  Large text, which is defined as text that is at least 18 point or at least 14 point when bold, has a contrast requirement of 3:1.  Body text (less than 18 point and less than 14 point when bold) has a contrast requirement of 4.5:1.  

This checkpoint also applies to images of text that are intended to be understood as text (refer to Checkpoint 1.4.5 regarding using images of text). However, this checkpoint does not apply to decorative text which conveys no meaning, or 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 as well. WCAG 2.1 introduced a specific requirement for Non-text Contrast.

Incidental Exception: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Logotypes Exception: Text that is part of a logo or brand name has no minimum contrast requirement.

Refer to Understanding SC 1.4.3  for more information, including common failures (external link to WCAG).

Development Techniques

This paragraph appears generically in all checkpoints. Review the General techniques as well as other tabs applicable to your technology.  Prioritize the use of technology-specific techniques, and implement the General techniques as needed. You are always required to find, understand and implement accessible code techniques to meet the checkpoint. The documented techniques and supplements are not exhaustive; they illustrate acceptable ways to achieve the spirit of the checkpoint. If numbered, techniques are in order of preference, with recommended techniques listed first. Where used, IBM information that complements the WCAG techniques is indicated as supplemental.

Web (HTML, ARIA, CSS) techniques

In addition to the General techniques, any item in this section represents a technique deemed sufficient.

Meet G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast with:

Mobile Native (iOS) techniques

There are no specific iOS techniques for this checkpoint. Refer to the General techniques section.

Eclipse techniques

 Instructions: In addition to the General techniques, the following technique is required for Eclipse applications to meet this checkpoint (1.4.3).

When color customization is supported, provide a variety of color selections capable of producing a range of contrast levels

If custom color is supported in your application, then you must provide at least three color choices that offer sufficient contrast.

  • The application can increase legibility for some users by heightening screen contrast with alternative color combinations. Examples of contrasting color combinations are black on white, white on navy, and yellow on blue.
  • Avoid using reds and greens together
  • Use colors that meet the guidelines for effective color contrast (link resides outside of ibm.com) provided by Lighthouse International.

Windows-based (MSAA+IA2) techniques

 Instructions: In addition to the General techniques, the following technique is required for Windows-based (MSAA+IA2) applications to meet this checkpoint (1.4.3).

When color customization is supported, provide a variety of color selections capable of producing a range of contrast levels

If custom color is supported in your application, then you must provide at least three color choices that offer sufficient contrast.

  • The application can increase legibility for some users by heightening screen contrast with alternative color combinations. Examples of contrasting color combinations are black on white, white on navy, and yellow on blue.
  • Avoid using reds and greens together
  • Use colors that meet the guidelines for effective color contrast (link resides outside of ibm.com) provided by Lighthouse International.

Many links in this checklist reside outside ibm.com at the Web Content Accessibility Guidelines (WCAG) 2.1. W3C Recommendation 05 June 2018: http://www.w3.org/TR/WCAG21/

Copyright © 1994-2019 World Wide Web Consortium, (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University, Beihang University). All Rights Reserved.

Copyright © 2001, 2019 IBM Corporation