Silver

🔙 WCAG 3.0 (Silver) Guidelines (Visual contrast of text)

Visual contrast of text

Provide sufficient contrast between foreground text and its background.

How-To - Get Started

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. By visual contrast we mean the total perceived color and lightness 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. 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, commonly known as color blindness).

Who it helps

  • People with color blindness need adequate luminance contrast to perceive text and graphic elements, and some color pairs require greater contrast than others to compensate.
  • People with low vision (due to poor contrast sensitivity and/or visual acuity) may 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 luminance contrast that is more homogenous, 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.

The complex, interrelated nature of font and graphic elements to provide visual readability is aided by the use of the APCA algorithm (Advanced Perceptual Contrast Algorithm) which allows authors to input color pairs to find a predicted contrast value. That contrast value then defines the minimum useable font weight and size.

Change Log

{list of non-editorial changes by date}
Back to Top

WCAG 3 JSON