How to use Contrast Checker
- Enter the exact foreground and background HEX colors from your design.
- Review the ratio and the normal-text and large-text results.
- Adjust a color, then test the pair again in the actual layout.
A secondary label
A light gray label may look elegant on a white card yet be difficult to read. Darken the label, check the ratio, and inspect the label at its real size instead of judging only from a large preview.
Know what the result covers
WCAG's AA text requirement is at least 4.5:1 for normal text and 3:1 for qualifying large text. Do not round a slightly lower value up to a pass. The checker evaluates a color pair, not a complete page.
Test the rendered design
Transparency, gradients, photographs, and hover states can change the actual background. Enter the colors that appear together. For a changing background, check its least favorable area or place text on a solid surface.
Good to know
What qualifies as large text?
WCAG defines large-scale text as at least 18 point, or 14 point when bold, with equivalent sizes for some scripts. A heading label alone does not make text large.
Does a pass certify my website?
No. Accessibility also involves keyboard use, structure, labels, focus, alternatives for images, and other requirements.