How does the contrast checker work?

The Polypane color contrast checker checks against values defined by the WCAG, the Web Content Accessibility Guidelines. These guidelines give a formula to calculate the contrast, ranging from 1 (no contrast) to 21 (black on white).

Unlike many contrast checking tools, the Polypane contrast checker takes opacity into account when calculating the colors, giving you the real contrast ratio.

How are the suggested colors calculated?

When the contrast is not sufficient, we'll suggest you similar colors that do have enough contrast. We do this by increasing or decreasing the luminance of the foreground color until it has enough contrast. When the foreground color can not be changed (because it's too close to full black or full white) we will suggest an accessible backgorund color instead.

How much contrast do I need?

The WCAG has multiple levels, and the relevant ones for us are called AA and AAA.

AA is an acceptable level of accessibility, and AAA is one step above: the most complete accessibility ruleset there is.

AA Level

  • 4.5: For normal text.
  • 3: For large (24px or more) or bold (19px*) text.

AAA Level

  • 7: For normal text.
  • 4.5: For large (24px or more) or bold (19px*) text.

* this is actually 18.66 pixels, but rounded up.

For more information on web design terminology, check out our Responsive design glossary. For our other free tools, go to Resources and tools.

Become a better dev like the thousands signed up for our newsletter. Join now!

By using our site you agree to our privacy policy and disclaimer