Accessibility

Text on Backgrounds

When text is against a non-solid background, such as an image or a gradient, it can present legibility issues for various users, especially those with low vision or cognitive disabilities such as dyslexia.

Definitions

Non-solid background:
A background that is not a single color. For example, a gradient or an image.
Gradient:
For purposes of this doc, we’ll use “gradient” to strictly mean a linear gradient from one color value to another.

General Guidelines

To minimize visual and cognitive load on the user, follow these guidelines:

  • Only heading text may appear on non-solid backgrounds. Text should be at least 18px and ideally only one line; longer strings of text can be harder to navigate when the background varies slightly behind each word or line.
  • Gradient backgrounds can only be vertical, i.e. the color at the top is different than the color at the bottom. Avoid horizontal, diagonal, and radial gradients, which have the potential to change the background color for each character in a string.
  • Always define a backup background color. Some users turn off background images due to accessibility concerns, so make sure that with the background image disabled, text is still legible and passes contrast requirements (4.5:1).

Achieving proper contrast for background images

Light text on darker background

  • Font weight must be at least 400 (normal font size and above).
  • Text must have a text-shadow with a 4px blur in a color that has at least a 7:1 contrast ratio when compared to the text’s color.
  • If any part of the image touching text has a non-solid background, apply either:
    • a vertical background gradient, where the lightest portion of the gradient behind the text has at least a 4.5:1 contrast ratio with the font color
    • a semi-transparent background that, when layered above a white background, would have at least a 4.5:1 contrast ratio with the font color

Dark text on lighter background

  • Font weight must be at least 400.
  • Text must have a text-shadow with a 3px blur in a color that has at least a 7:1 contrast ratio when compared to the text’s color (for example: white).
  • If any part of the image touching text has a non-solid background, apply either:
    • a vertical background gradient, where the lightest portion of the gradient behind the text has at least a 4.5:1 contrast ratio with the font color, between the text and the background image
    • a semi-transparent background that, when layered above a black background, would have at least a 4.5:1 contrast ratio with the font color, between the text and the background image

Design note: This is a much less common pattern on the web.

Achieving proper contrast for background gradients

Ensure one of the following is true:

  • Every color in the gradient has at least a 4.5:1 contrast ratio with its text.
  • One end of the gradient has at least a 4.5:1 contrast ratio with the font color, and the text must have a 4px text-shadow in a color that has at least a 7:1 contrast ratio with the font color.