Designers

1.4.3 Color Contrast

Text and images of text should have sufficient contrast so they can be read by people with low vision.

What you need to know.

  • The closer text color is to the background color, the harder it is to read. To figure out what colors your website is using, use a color selector tool to grab a color off your website.
  • Color numbers are specified using hexadecimal values. You’ll be able to get its hexadecimal code (for example, #efefef) using a color selector tool. You can then enter this into a color contrast checker and instantly know what your color contrast ratio is.
  • Having adequate color contrast makes it easier for everyone, not just people with low vision, to read your content.

What you need to do.

  • Make sure your text sufficiently stands out from the background.
  • Meet a 4.5:1 color contrast ratio regardless of what size your text is.

Reference

Read the full explanation of success criterion 1.4.3 on W3.org.

Related Resource

Check out “Contrast and Color Accessibility” from WebAIM for more information about this success criterion.