When we talk about color contrast, we usually mean the difference between the background and foreground. We typically mean it for text, but we should watch out for non-text contrast ratio too.

Text is essential to any medium, and following the best practices with text color contrast can be tricky (with brand colors) but an easy and rewarding task (it is a frequent error).

WCAG has more success criteria for contrast (both for AA and AAA) levels and differentiates regular and larger (headings) texts.

You need to these contrast ratios:

  • In the case of the regular text (your site's primary copy, flowing text): 4.5 : 1 (AA) and 7 : 1 (AAA).
  • In case of larger (heading) text (that is 120-150% bigger than your body copy): 3 : 1 (AA), 4.5 : 1 (AAA).

And how to measure these? Use a contrast checker like the one from WebAIM.