Color Contrast Checker
Pick two colors and see the contrast ratio with a live preview.
Contrast ratio
—
The quick brown fox jumps over the lazy dog
Design tool
Color Contrast Checker
Check text and background colors against WCAG AA and AAA accessibility standards.
All tools
Related Tools
More design and developer utilities.
How To Use The Color Contrast Checker
Open the Text color picker and choose the color your words will be printed in, then open the Background color picker and choose the color sitting behind them. The contrast ratio updates the moment you change either value, and the WCAG AA and AAA pass or fail marks tell you which accessibility levels the pair meets. The live preview underneath renders sample text in your exact colors, so you can judge the real feeling of the combination, not just the number. If a pairing fails, nudge one color lighter or darker and watch the ratio climb until it passes.
What The Contrast Ratio Means
A contrast ratio compares the perceived brightness of two colors and is written as a single number against one, from 1:1 for two identical colors up to 21:1 for pure black on pure white. The Web Content Accessibility Guidelines (WCAG) use this ratio to decide whether text is easy enough to read. A higher number means the foreground and background are further apart in brightness, so letters stand out clearly. The ratio depends only on brightness, not hue, which is why two colorful but similarly bright shades can look pleasant yet still fail the test.
WCAG Contrast Thresholds
WCAG defines two conformance levels and two text sizes, giving four minimum ratios to aim for. Use this table as a quick reference when you check a color pair.
| Level and text size | Minimum ratio | Typical use |
|---|---|---|
| AA, normal text | 4.5:1 | Body copy, labels, links |
| AA, large text | 3:1 | Headings, big buttons |
| AAA, normal text | 7:1 | Strict, high-readability sites |
| AAA, large text | 4.5:1 | Large headings under AAA |
| UI components and graphics | 3:1 | Icons, borders, form outlines |
Large text means roughly 18pt (24px) regular or 14pt (18.7px) bold; anything smaller is treated as normal text and must meet the higher ratio.
Worked Example
Suppose your design uses mid-gray text #777777 on a white background #FFFFFF. The checker reports about 4.48:1, which falls just short of the 4.5:1 needed for AA normal text. Darkening the gray slightly to #767676 pushes the ratio to 4.54:1 and the pair now passes AA. That tiny change shows why an exact number matters: a color that looks "dark enough" by eye can still fail by a hair, and only a precise ratio tells you whether you are safely above the line.
Why This Tool Is Useful
Low contrast is one of the most common and most easily fixed accessibility problems on the web. Text that blends into its background is hard to read for people with low vision or color vision deficiency, and tiring for everyone reading on a phone in bright sunlight. This checker removes the guesswork: instead of squinting at a mockup, you get an exact ratio and a clear pass or fail against each WCAG level, so designers, developers, and content authors can settle color decisions in seconds and ship interfaces that more people can actually use.
Accuracy And Privacy
The ratio is computed with the official WCAG relative-luminance formula, the same math screen-reader and audit tools rely on, so the result matches what a formal accessibility audit will report. Everything runs locally in your browser. The colors you pick are never uploaded, logged, or stored on any server, which means you can safely test unreleased brand palettes and private projects without anything leaving your device.
FAQ
What contrast ratio should I aim for?
For WCAG AA compliance, aim for at least 4.5:1 for normal body text and 3:1 for large text. To meet the stricter AAA level, target 7:1 for normal text and 4.5:1 for large text. When in doubt, aim higher than the minimum, because real-world conditions such as glare, low-quality screens, and small fonts reduce effective contrast.
What counts as large text?
WCAG defines large text as roughly 18pt (about 24px) for regular weight, or 14pt (about 18.7px) when the text is bold. Large text is allowed a lower contrast ratio because bigger letterforms are easier to read even when the difference between colors is smaller. Anything below those sizes is treated as normal text and must meet the higher threshold.
Why does color contrast matter for accessibility?
Many people have low vision, color vision deficiency, or simply read on poor screens in bright light. Sufficient contrast keeps text legible for them and reduces eye strain for everyone. Accessibility laws and standards in many countries reference WCAG, so meeting these contrast ratios is often a legal and professional requirement, not just a nicety.
How is the contrast ratio calculated?
Each color is converted to a relative luminance value using the official WCAG formula, which weights the red, green, and blue channels to match how the human eye perceives brightness. The ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 the darker. Results range from 1:1 for identical colors up to 21:1 for pure black on pure white.
Does the order of the two colors change the result?
No. Contrast is a ratio between the lighter and darker color, so swapping the text and background colors produces the same number. What changes is readability in practice: dark text on a light background and light text on a dark background can both pass while feeling very different, so always check the live preview as well as the number.