WCAG contrast checker

1. Enter or pick foreground (text) and background colors.

2. Read the contrast ratio (e.g. 4.52:1).

3. Check AA and AAA rows for normal and large text sizes.

4. Adjust HSL lightness until required level passes, then copy hex values.

• When you audit design system tokens before release.

• When you fix accessibility findings from Lighthouse or axe.

• When you choose link colors that must differ from body text, not only by hue.

• When you need full page audit — use automated scanners on rendered DOM.

• When testing non-solid backgrounds (images, gradients) — sample worst-case pixels.

• When simulating color blindness — use specialized vision simulators.

Level A is minimum; AA is the legal target in many jurisdictions (ADA, EAA public sector). AAA is aspirational for body copy — large headlines may pass AAA easier than 14px captions. Focus visible indicators (2.4.7) complement contrast — keyboard users need visible focus rings, often 3:1 against adjacent colors. Document pass/fail in your design system next to each token pair.

If brand purple fails on white, do not swap hue — darken foreground 5–10% lightness steps or use purple only for large headings. Placeholder text must meet contrast (4.5:1), not just input values. Disabled states may be exempt from strict text contrast but should not convey critical info by color alone. Pair this checker with the color converter for quick HSL iteration.