How to read a contrast ratio
A contrast ratio compares the relative luminance of two colors. The scale runs from 1:1 for identical colors to 21:1 for black against white. A higher number means a stronger visual difference. This tool uses the WCAG relative-luminance formula and evaluates the pair against the commonly used AA and AAA thresholds.
| Content | WCAG AA | WCAG AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| UI components and graphics | 3:1 | Not separately defined |
What this result can and cannot prove
A passing ratio confirms the mathematical difference between the two entered colors. It does not prove that every text layer in a design uses those colors, that text remains legible over photography, or that color is not being used as the only way to communicate meaning. Review hover, focus, disabled, error, and visited states separately.
Large text thresholds only apply when the rendered type meets the relevant size and weight definition. When in doubt, evaluate the stricter normal-text threshold. For complete guidance, consult the W3C explanation of contrast minimum.
Frequently asked questions
What contrast ratio should body text use?
WCAG AA requires at least 4.5:1 for normal text. A 7:1 ratio meets the enhanced AAA threshold.
Does a brand color have to be replaced if it fails?
Not necessarily. Keep the brand color for large surfaces or decoration, and choose a different approved foreground or background color for text.
Are transparent colors supported?
This calculator accepts solid hex colors. Composite transparent layers against their final background before testing the resulting color pair.
Check the complete exported asset
BrandPreflight can evaluate resolvable SVG text pairs alongside approved colors, typefaces, logos, terminology, and production hygiene. Uncertain raster evidence stays marked for human review.
Run a full preflight