Readable color, by the numbers
Contrast is the difference in brightness between text and its background. Too little and the text is hard to read — especially for low-vision users, in sunlight, or on cheap screens. The WCAG guidelines set minimum ratios, and this tool computes the exact figure and tells you what it passes as you tweak the colors.
The thresholds that matter
AA needs 4.5:1 for normal text and 3:1 for large text; AAA raises that to 7:1 and 4.5:1. Buttons, icons and other non-text UI need at least 3:1. AA is the level most laws and design systems target.
Frequently asked questions
What contrast ratio do I need?
AA: 4.5:1 normal, 3:1 large. AAA: 7:1 normal, 4.5:1 large. UI components and graphics: 3:1 minimum.
What counts as large text?
At least 24px, or 18.66px (14pt) if bold. Large text gets a lower requirement because it's easier to read.
Is this an official accessibility audit?
It computes the exact WCAG 2.x contrast ratio — the core text check. A full audit also covers focus, keyboard, semantics and more.
More free tools
Design tools: HEX to RGB, Color Palette Generator, CSS Gradient Generator · See all Alienated Tools.