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.

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.

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

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.

Most links in this checklist reside outside ibm.com at the Web Content Accessibility Guidelines (WCAG) 2.0. W3C Recommendation 11 December 2008: http://www.w3.org/TR/WCAG20/

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

Copyright © 2001, 2017 IBM Corporation