WCAG Contrast Checker Guide

What it does

The WCAG Contrast Checker calculates contrast ratios between foreground and background colors and reports AA and AAA compliance for normal and large text. Import palettes directly from Chroma Constellation via share URL to test every pair without re-entering hex values. All calculations run locally in your browser — no colors are uploaded.

When to use it

• Verifying text readability on brand colors before shipping a redesign
• Auditing buttons, links, and form labels against WCAG requirements
• Checking palette pairs exported from Chroma Constellation in bulk
• Documenting accessibility compliance for stakeholders or audit reports
• Comparing hover and focus states against their resting background colors

How to use it

1. Enter foreground and background hex colors or use the built-in color pickers.
2. Review the contrast ratio and AA/AAA pass indicators for normal and large text.
3. Import colors from a Chroma Constellation share URL using the import field.
4. Swap foreground and background with one click to test reversed combinations.
5. Copy results or share the checker URL so teammates see the same color pair.

Tips

• Test both default and hover states — a passing resting color may fail when the background darkens on hover.
• Large text thresholds are 18px regular or 14px bold; everything else counts as normal text.
• AAA is stricter than AA — aim for AA minimum on body copy and AAA on critical UI where feasible.
• Pair this tool with Chroma Accessible mode to generate palettes that start closer to compliance.

FAQ