Do text elements have enough contrast against their background?

Goal

Ensure that no one is prevented from reading the site’s text because of the color of the text on its background.

Why this matters

If you can’t read the site, there’s not much point in having one. Visual Disabilities vary widely in the way that color impacts their ability to see text. The contrast levels outlined for this guideline ensure that as many people as possible can read the text.

How to implement

Designer

Review Using color, specifically the part about readable color.

If testing 1.4.3 Contrast (Minimum) – Level AA:

  • Small text must be at a 4.5:1 ratio to its background.
  • Large text must be at a 3:1 ratio to its background.

If testing 1.4.6 Contrast (Enhanced) – Level AAA:

  • Small text must be at a 7:1 ratio to its background.
  • Large text must be at a 4.5:1 ratio to its background.

Developer

Ensure you’re using the Designer’s defined colors.

How to test

TBD