Visual Contrast of Text How-To Guidance

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

• People with color blindness need luminance contrast to perceive text and graphic elements.
• People with lower vision (contrast sensitivity and visual acuity), including seniors, may need higher color contrast to make smaller text more visible.
• People with some cognitive, language and learning disabilities may benefit especially from use of colour contrast that serves the purpose of the content.

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.

• No Tiny Text. Text and Images of Text never use a font size below 12px.
• Minimum Characteristics for Body Text: Where text and images of text are used for any string of words that present as a paragraph, one of the following is true:
  • A sans-serif font face is specified with a font size of at least 16px; or
  • A serif font face is specified with a font size of at least 18px.
• Minimum Contrast for Smaller Text: Text and images of text with a font size between 12px and 15px have an APCA of at least 100%.
• Minimum Contrast for Normal Text: Text and images of text with a font size between 16px and 20px have an APCA of at least 80%.
• Minimum Contrast for Large Text: Text and images of text with a font size of between 24px and 48px have an APCA of at least 60%.
• Minimum Contrast for Larger Text: Text and images of text with a font size of 60px or larger have an APCA of at least 40%.
• Maximum Contrast for Larger Text. Text and Images of Text that use a font size of 48px or larger have an APCA of 120% or lower.

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

• Select font characteristics and background colors to provide enough contrast
• Use default fonts and colors