Color Contrast Checker
Check if your text and background colors meet WCAG accessibility standards.
Large Sample Text
This is normal body text used to preview readability at a smaller size.
Contrast Ratio
Text that is hard to read is not a matter of taste — it is a measurable accessibility failure, and one of the most common on the web. Light gray text on a white background looks clean to a designer with a good monitor in a dim room, and is genuinely unreadable to someone with low vision, on a cheap screen, or in bright sunlight. The Web Content Accessibility Guidelines (WCAG) define exactly how much contrast text needs, as a numeric ratio, so this stops being subjective. This tool measures the contrast between any two colors and tells you whether it meets those standards.
How the checker works
Enter a text color and a background color, and the tool computes the contrast ratio between them using the WCAG formula, then tells you which accessibility levels the pair passes or fails. It accounts for the fact that larger text needs less contrast than small text, so it reports results for both. The calculation is based on the relative luminance of the colors, which is how the standard models human perception of brightness rather than raw color values.
The WCAG thresholds
Contrast ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)
L = relative luminance, from 0 (black) to 1 (white)
WCAG requirements:
Normal text AA: 4.5:1 AAA: 7:1
Large text AA: 3:1 AAA: 4.5:1
UI / graphics AA: 3:1
Ratios run from 1:1 (identical) to 21:1 (black on white)The ratio is built on relative luminance, not on the color values themselves, which is why two colors that look equally different to a designer can have very different contrast. Luminance weights green far more heavily than blue, because human eyes are most sensitive to green — so yellow text reads as bright and dark blue as dim, even at similar saturation. This is also why 'large text' gets a lower requirement: bigger letterforms are easier to resolve, so 3:1 suffices where small text needs 4.5:1. The scale tops out at 21:1, pure black on pure white.
What to know about color contrast
- 1Aim for AA at minimum: 4.5:1 for normal text, 3:1 for large. This is the level most accessibility laws and standards reference, and it is a genuine floor, not an aspiration. AAA (7:1) is stricter and worth reaching for body text where you can, but clearing AA is the baseline that keeps your text readable for the large population with less-than-perfect vision or screens.
- 2Large text gets a lower bar because size aids legibility. Text counts as 'large' at roughly 18pt, or 14pt bold, and needs only 3:1 instead of 4.5:1. This is why a big heading can use a color that would fail as body text. But do not use the large-text allowance to justify low-contrast small text — the two thresholds exist for a real perceptual reason.
- 3Beautiful and accessible are not in conflict, but you must check both. Harmonious palettes often pair colors of similar lightness, which looks elegant and can fail contrast badly. A palette can be genuinely attractive and still leave text unreadable, so contrast is a separate check from aesthetics — verify the ratio rather than trusting that a nice-looking combination is also a readable one.
- 4Don't forget non-text elements: icons, buttons, and form borders need 3:1. WCAG's contrast requirements extend beyond text to the interface itself, because a control no one can see is as inaccessible as text no one can read. A faint icon or a barely-visible input border fails real users, so hold UI elements to the 3:1 minimum as well.
- 5Test in real conditions, not just a dim design studio. Contrast that looks adequate on a calibrated monitor in low light can become unreadable on a phone in sunlight or a low-quality screen. The WCAG ratio exists precisely to guarantee readability across those real-world conditions, so meeting the numeric standard is more reliable than trusting how a combination looks on your own display.
Frequently asked questions
What contrast ratio do I need for accessible text?
At minimum, WCAG AA: 4.5:1 for normal text and 3:1 for large text (roughly 18pt, or 14pt bold). This is the level referenced by most accessibility laws and is the practical baseline for readable text. The stricter AAA level asks for 7:1 on normal text and 4.5:1 on large, which is worth reaching for body copy where possible. Below the AA thresholds, your text becomes genuinely hard to read for a significant part of your audience.
Why does light gray text on white fail even though I can read it?
Because you are likely viewing it under ideal conditions — a good monitor, in comfortable lighting, with normal vision. The WCAG ratio exists to guarantee readability across much harder conditions: low vision, cheap or glare-covered screens, bright sunlight, and aging eyes. Light gray on white is a classic failure precisely because it looks fine to the designer and is unreadable to a large group of real users. The numeric standard protects the people you cannot see testing your site.
Why do larger text sizes have a lower contrast requirement?
Because bigger letterforms are inherently easier to resolve, so they remain legible at a lower contrast than small text needs. WCAG sets 3:1 for large text (about 18pt or 14pt bold) versus 4.5:1 for normal text for this reason. It reflects a real perceptual fact, not a loophole — which is why you should not stretch the large-text allowance to justify low-contrast body text, where the higher requirement genuinely applies.
Does contrast apply to buttons and icons, not just text?
Yes. WCAG requires a 3:1 contrast ratio for non-text elements like icons, button boundaries, form field borders, and other meaningful graphical controls, because an interface element no one can perceive is as inaccessible as unreadable text. A faint icon or a nearly invisible input outline fails real users just as low-contrast text does, so the same discipline of checking the ratio applies to the visual interface, not only to the words.
How is the contrast ratio actually calculated?
It compares the relative luminance of the two colors — a measure of perceived brightness that weights green most heavily, because human eyes are most sensitive to green. The ratio is the lighter luminance plus 0.05 divided by the darker luminance plus 0.05, producing a value from 1:1 for identical colors up to 21:1 for pure black on pure white. Because it is based on luminance rather than raw color values, two colors that look very different can still have poor contrast, which is why measuring it matters.