Content in this resource is still under active development and should be considered beta. It may change, move, antecede, or be deleted with or without notice.

ARC logo

🔙 APCA Guidelines (Visual Contrast)

Design Guide: Visual Contrast

Provide sufficient contrast between foreground text and its background.

How-To - Get Started

Get Started

ON THIS TAB

  1. Summary
  2. Why
  3. Who it helps
  4. How

Summary

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

Why

All sighted users need a high enough level of visual contrast to distinguish elements from each other, and foreground from background. By visual contrast we mean the total perceived lightness/darkness difference between the text and the background. As text gets smaller and/or thinner, visual contrast may need to be increased to achieve the same readability.

EXAMPLE: you can increase perceived contrast by:

  • Make the darkest of two colors darker
  • Make the lightest of two colors lighter
  • Increase the font weight (make it bolder, but letter spacing may need to be increased)
  • Increase the font size (make it larger, but avoid letter spacing that is too tight)
  • Use a different font design with intrinsically better contrast relative to the same x-size.

The use of color (hue/saturation) can help communication, but is does not replace the need for luminance (lightness) contrast, which is what is required for readability. When using color it should align with the purpose of the content. Too many colors with no purpose can cause confusion. Using hue and saturation to help group related content can be useful. Certain color pairs should be avoided.

Some users find too much contrast in large/bold elements may be distracting or overwhelming due to glare or neurological issues.

This guidance focuses on the needs of all users as well as users with low vision or visual/neurological impairments, and including CVD (Color Vision Deficiency, sometimes referred to as color-blindness or color insensitive vision).

Who it helps

  • All sighted people, including those with with color insensitive vision need adequate visual contrast to read and understand text and graphic elements.
    • By Visual Contrast we mean the difference between perceived lightness and darkness.
    • For instance, those with deficient red sensitivity (known as protanopia) see colors involving red as darker, so these color pairs require greater contrast than others to compensate.
  • People with low or reduced vision (due to poor contrast sensitivity and/or visual acuity) need higher visual contrast for readability. This is particularly true for those over 40, and also young children.
  • People with some cognitive, language, and learning disabilities may benefit from the use of color and lightness/darkness contrast that is less saturated, serving the purpose of the content such as grouping related items.

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 that predict the needed visual contrast for a given font size and weight to achieve a presentation which meets these requirements.

To conform to readability contrast guidelines, use an APCA compliant contrast calculator. An APCA (Accessible Perceptual Contrast Algorithm) based tool allows authors to test a pair of colors and calculate a predicted contrast value. This defines the minimum useable font weight and size.