Check your text contrast the WCAG way
A worked tutorial: measure any text/background pair, read AA and AAA results for normal and large text, and know exactly what to fix.
Enter the pair exactly as shipped
Open the contrast checker and enter the two colors precisely as your CSS renders them — the computed text color and the computed background behind it, not the design-file intention. Transparency, gradients, and images behind text all change the real values, so sample the rendered pixel when in doubt.
Read the ratio first, then the verdicts. The ratio (like 4.6:1) is the measurement; AA/AAA for normal and large text are the judgments. Normal text needs 4.5:1 for AA; large text (roughly 18.66px bold or 24px regular and up) needs 3:1.
Prioritize by where users read
Not all failures are equal. Body copy and form labels fail loudly — fix those first. Secondary metadata (timestamps, captions) failing AA is still a failure, but it harms fewer tasks; either darken it or accept it as decoration, never as information. Disabled states are the one legal exemption — they have no contrast requirement, though they still must not be the only signal.
Check both themes. A pair passing in light mode routinely fails in dark mode, and vice versa — the checker takes seconds, so there is no excuse for shipping one mode unmeasured.
Record the decision
Contrast passes rot: a later redesign lightens the gray and nobody re-measures. Write passing pairs into tokens with names that encode the guarantee (text-primary, text-muted) and treat any new gray as guilty until checked. Teams that tokenize contrast keep it; teams that remember hex values lose it.
For the full palette, graduate to the matrix view — every pair graded at once beats twenty individual checks when the palette changes.
Tip
The most common silent failure is placeholder text. It looks intentional at 2:1 and reads as broken to low-vision users — measure it like body copy.
Related free tools
Want to apply this right now? Open the color palette generator and try it with your own brand color — free, no sign-up.