Color Contrast Checker

What is the color contrast checker?

Allows you to test out multiple color variations to ensure they pass WCAG AA standard of 4:5:1 ratio.

How to use the color contrast checker:

  1. Go to https://webaim.org/resources/contrastchecker/ 
  2. Add in the hex value for the Foreground Color
  3. Add in the hex value for the Background Color
  4. If the test passes for WCAG AA – then the color combo is good to go!
  5. If the test fails for WCAG AA – then you will need to slide the lightness left and right until the results pass.

Fail

Pass

The color needs to pass at least for large text. If it only passes for large text, it can only be used at a font sizes larger than 19px. Ideally it should pass for both small and large fonts.