Contrast Checker

[ChrisPackard]

Contrast Checker page in Crownpeak DQM

Contrast Checker is a tool you can use to test if using two color combinations together – text color and background color – passes WCAG compliance.

Simply enter the 6-character Hex codes into the textboxes for Text color and Background color, or click on the color swab to the right of each text box to show a color-picker preview, where you can click to choose a color.

The Contrast results are shown as a ratio in the box to the right. If the colors meet the required contrast threshold, text is shown to explain this, and the box will go green. If the colors fail to meet the required contrast threshold, text is shown to explain this, and the box will go red.

You can use the checkboxes provided to test for Normal Text, or for Normal Text (Bold), or Large Text.

Contrast Checker page showing Level AAA compliance checks in Crownpeak DQM

The default target is WCAG 2 Level AA compliance, and the tests are shown for this level. However, you can also show the results for WCAG 2 Level AAA compliance by clicking the checkbox to reveal these checks.