Color contrast checker

How does the color contrast checker work?

The Polypane color contrast checker checks against values defined by the WCAG 2 (Web Content Accessibility Guidelines) or APCA (the Accessible Perceptual Contrast Algorithm). WCAG give a formula to calculate the contrast, ranging from 1 (no contrast) to 21 (black on white). APCA has a range from minus ~106 to plus ~106.

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 background 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.

For non-text elements, like icons, charts and controls, a minimum contrast of 3 is needed.

AAA Level

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

* this is actually 18.66 pixels, rounded up.

APCA

APCA is not part of any current standard, so shouldn't be used for production work.

APCA is an alternative color contrast algorithm that might end up replacing the WCAG algorithm. It is more advanced and takes into account which color is used for the text. You can score between 0 and roughly 106. The higher the absolute score, the better the contrast. The negative value just means you're using a light-on-dark color combination.

Scoring in APCA is dependent on the font and font-weight used. In this color picker we use a simplified scoring method based on the Bronze level:

• 75: For normal body text.
• 60: For medium-size (24px or more) or bold (16px) text.
• 45: For large (36px or more) or bold (24px or more) or non-text elements.

For a more advanced scoring table, check out the official APCA calculator.

For more information on web design terminology, check out our Responsive design glossary. For our other free tools, go to Resources and tools. Start a free Polypane trial and get color suggestions directly in your browser.