Color contrast checker
DevNo. 11 / 84
Compare text and background colors with the WCAG contrast ratio, plus pass or fail for AA and AAA at normal and large sizes.
gray on gray is a design choice, and the choice is usually regret.
work surface
Math, not advice — results are indicative.Read the disclaimer.
most-used utilities
Body text on paper
Test the default text and background pair before shipping a theme, not after a complaint.
Button labels
Check white text on the brand color at the size the button actually renders, not at the size in the mockup.
Placeholder text
See whether the hint in a form field is readable or just decorative fog.
pro tips
A color that barely passes at 4.5 will fail on a phone in daylight. Aim higher for body text.
Check hover, focus, disabled and error states too; they are where the accessible palette usually falls apart.
Dark mode is a second design, not an inversion. The same two colors rarely work in both themes.
what it does
Contrast ratio compares the relative luminance of two colors on a scale from 1 to 21. Black on white is 21; identical colors are 1. The number is what WCAG uses to decide whether text is readable, and it does not care how nice the palette looked in the mockup.
AA asks for 4.5:1 on normal text and 3:1 on large text. AAA raises that to 7:1 and 4.5:1. Large means 24 pixels, or 18.66 pixels when bold; everything below those sizes plays by the stricter rule.
Pick the text color and the background color, and the page recalculates as you go. The preview shows the pair at headline, body and footnote sizes, so a color that passes on a heading but disappears in a caption is obvious before it ships.
The ratio is a floor, not a finish line. Font weight, letter spacing, glare, color vision and the image behind the text all change how readable a page feels. Use the number to catch failures, then look at the page with human eyes.
quick answers
What ratio do I need for AA?
4.5:1 for normal text and 3:1 for large text. AAA moves those to 7:1 and 4.5:1. The badges above mark each combination pass or fail as you change the colors.
What counts as large text?
24 pixels, or 18.66 pixels when bold, which is 18 and 14 points. Headlines usually qualify; form labels and captions usually do not.
Does passing WCAG mean the text is easy to read?
No. The ratio measures luminance contrast only. Size, weight, line length, motion, glare and color vision all matter, and a technically compliant gray can still be exhausting.