This guideline section is required (normative).

Visual Contrast of Text How-To Guidance

Provide sufficient contrast between foreground text and its background.

The following tabbed sections contain helpful information, but are not required (informative).

Get Started

Summary

Sighted users need good contrast between foreground and background to read easily. Users with low vision need strong contrast between foreground and background to perceive content.

Why

Many users need a high enough level of visual contrast to distinguish elements from each other and foreground from background. For those who find it difficult to perceive smaller text, increasing contrast level may help (example, make the lightest of two colors lighter to increase contrast, or make the font bolder). Color use can help communication, but only when it aligns with the purpose of the content. Too many colors can cause confusion. Some users find too much contrast may be distracting or overwhelming. This guidance focuses on the needs of users with low vision.

Who it helps

How

Authors need to balance font size, font stroke width, background color, font color, and nearby colors to achieve good visual contrast. Authors can use tools to evaluate elements and adjust the attribute and color of those elements to achieve a presentation which meets these requirements.

The solution to this challenge of a complex relationship between interrelated elements of visual readability is to use an algorithm (Advanced Perceptual Contrast Algorithm, APCA) which allows authors to input preferred settings and calculate the minimal contrast needed. See Evaluate tab for APCA.

Exceptions

  1. User Control. There is no visual contrast requirement for text where the content does not specify font characteristics. In this situation, the text content is presumed to inherits its characteristics from platform settings and that end-users have control over those platform settings.
  2. Bolder Text: Where content specifies a bold font weight (i.e., equivalent to CSS value of 700 or above) the allowable APCA is reduced 20% (e.g., an 18px bold font needs an APCA of at least 60%).
  3. Larger Text: Where the size of text and images of text is between those specified in the values above, an interpolated APCA may be used (e.g., a 22px font has an APCA of at least 70%).
  4. Incidental Text: 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 APCA contrast requirement.

Examples

An example of the exception for Incidental Text is a photograph of street scene where some shop windows have lettering on them. If they are not important to the purpose of the photograph, the lettering on the shop windows does not have a font size or contrast requirement.

Plan

Planning Responsibilities

  1. Ensure that...

Tips for Collaboration

Where communication is important with designers, developers, testers

Planning for Each Stage:

How to get started early

How to remediate

Design

  1. Ensure that...

HOW - Guide:

Link to Style Guide(s)

Links to Video (Embedded or Links)

Designer Tips:

User Testing & Meaningful Involvement:

Write

Editorial Responsibilities

  1. none

Examples & Demo:

Video (Embedded or Links)

Editorial Tips:

Develop

Technical Responsibilities

  1. Ensure that...

Examples & Demo:

Video (Embedded or Links)

Technical Tips:

Evaluate

Testing Responsibilities

  1. Ensure that...

Auto-Testing Tips:

Includes links to 3rd party/crowd-sourced tips?

Manual Testing Tips:

Includes links to 3rd party/crowd-sourced tips?

Testing with Users:

Is this duplication of User Testing in Designer tab or different?

Methods