A color contrast check for accessibility scores a foreground and background color pair against a contrast ratio formula and compares that number to the minimum thresholds defined in the Web Content Accessibility Guidelines (WCAG). For normal body text, WCAG AA requires a contrast ratio of at least 4.5:1, while WCAG AAA tightens that to 7:1; large text (roughly 18 point and up, or 14 point bold) gets a relaxed 3:1 for AA and 4.5:1 for AAA. The Color Contrast Checker applies those exact thresholds to any two colors you give it, so you can replace guesswork with a single verifiable number before you publish a page.
Designing for accessibility is not an abstract exercise. Roughly one in twelve men and one in two hundred women have some form of color vision deficiency, and many more readers use phones in bright sunlight, low-end displays, or simply have tired eyes at the end of the day. Contrast is the safety net that catches all of those users at once. When text and background lack enough luminance difference, letters blur into the surface and content becomes unreadable, no matter how beautiful the brand palette looks in a design tool.
What the WCAG Contrast Thresholds Actually Mean
The contrast ratio that WCAG uses is a relative luminance formula, expressed as a number like 4.5:1 or 7.43:1. Bigger numbers mean more separation between text and background. The higher the number, the wider the audience that can comfortably read your content.
| Content Type | WCAG AA | WCAG AAA |
|---|---|---|
| Normal text (below 18 pt, or 14 pt regular weight) | 4.5:1 | 7:1 |
| Large text (18 pt and above, or 14 pt bold) | 3:1 | 4.5:1 |
| Non-text UI components and graphical objects | 3:1 | 3:1 |
These thresholds come straight from the W3C recommendation and are quoted in our sibling guide on how to check color contrast for WCAG compliance. Treat AA as the legal and ethical floor for general web content, and AAA as a stretch goal for body copy where you can reasonably reach it.
Run a Two-Color Contrast Check in the Browser
The fastest path from a color idea to a pass or fail decision is the Color Contrast Checker. It runs entirely in your browser, so nothing leaves your device, and it updates the ratio the moment you touch either color input. If you are comparing a brand-on-brand combination you pulled from a Color Palette Generator, you can paste hex values straight from there without retyping.
- Set the foreground color. Open the checker and locate the foreground field, usually labeled "Text" or "Foreground." Either click the swatch to use the built-in color picker, or type a hex value directly (for example #111111).
- Set the background color. Do the same for the background field. A common starting point is #ffffff for white, but any surface hex works, including a tinted card color or a brand wash.
- Read the contrast ratio. The tool displays a number like 4.5:1 or 7.43:1 the moment both fields contain a valid color. This is the relative luminance ratio between your two inputs.
- Read the AA and AAA badges. Next to the ratio, look for pass or fail indicators for small text, large text, and (where shown) UI components. These map directly to the WCAG thresholds in the table above.
- Adjust until you hit the level you need. Nudge the foreground darker, lighten the background, or both. Because the ratio updates in real time, you can feel the effect of every small change and stop as soon as the badges flip to pass.
Reading the Result the Way Auditors Do
Once you have a ratio, the next step is matching it to the content you actually ship. Body paragraphs, form labels, button text, and inline links should clear the 4.5:1 AA bar at minimum. Marketing headings and display copy on hero sections can usually rely on the relaxed 3:1 large-text threshold, but only if the text really is 18 pt or larger, or 14 pt and bold. Icons, focus rings, and the boundaries of form fields are not "text," but WCAG still asks for 3:1 so users with low vision can perceive them.
A common trap is trusting the AA badge for body text while shipping 13 pt regular weight. That combination is normal text under WCAG and needs 4.5:1, not 3:1. If you are unsure which bucket your content falls into, audit the font size and weight on the live page, not in the design file, because responsive CSS can shrink text by a few points on mobile.
Fixing Pairs That Fail
When the checker reports a fail, you have three honest options: darken the text, lighten the background, or accept the failure and limit the content to large text only. Designers often jump to a high-contrast black and white pair out of caution, but that usually abandons brand expression unnecessarily. Small shifts in lightness typically solve the problem.
For example, take a mid-gray foreground like #777777 on a white #ffffff background. That pair lands at roughly 4.48:1, which fails the 4.5:1 small-text AA bar by a hair. Bumping the foreground to #767676 drops it further, so instead nudge toward #6b6b6b or #595959 to cross the threshold without going to pure black. The exact number you land on depends on your palette, which is why running the pair through the checker beats trusting a stock recommendation.
If you are designing dark themes, reverse the logic. Start from a near-black surface and lift the text color rather than deepening it. Pairs like #e0e0e0 on #121212 comfortably clear AAA, while dimmer text like #9e9e9e on the same surface often slips below 4.5:1 even when it looks readable to a sighted reviewer.
Where Contrast Checks Fit in a Real Workflow
Contrast is a design-system concern, not a one-off task. The smartest place to enforce it is when you first codify a color pair as a reusable token, so the work happens once and protects every component that consumes it. Run your base body-text pair through the Color Contrast Checker, record the ratio next to the token definition, and reviewers can later spot drift.
You will also save time by checking contrast after any color conversion. Round-tripping a brand color through print conversions tends to darken or shift saturation; see how to convert RGB to CMYK without losing color accuracy for that side of the pipeline. The converted hex that looks fine in a print proof can fail contrast on screen, so revalidate after any color-system conversion, including RGB-to-hex transformations covered in how to convert RGB to HEX.
Finally, pair your contrast score with a real-device test. Open the page on a cheap phone in direct sunlight, zoom to 200 percent, and ask a colleague who is not a designer to read a body paragraph out loud. A green badge in the tool is necessary, not sufficient. The eye test confirms that the number you shipped actually behaves the way the formula predicted.
Common Pitots When Checking Contrast
- Testing only one pair per screen. A page uses many foreground-background combinations, and each one needs its own ratio.
- Forgetting hover, focus, and disabled states. A button that passes at rest can fail on hover if the hover style lightens the text.
- Ignoring semi-transparent overlays. RGBA text on a patterned background reads as a blended color, and the checker usually scores against the painted hex, not the perceived result.
- Assuming every monitor shows the same color. Wide-gamut displays and uncalibrated laptop screens shift how close two colors appear; the formula stays correct, but your visual sanity check can mislead you.
Run every distinct pair through the checker, mark the result alongside the token, and revisit the list whenever a brand refresh or theme update changes the underlying hex values. That habit turns accessibility from a last-minute scramble into a routine check that fits inside a normal design review.
For a deeper look, see Check Color Contrast for Accessibility in Chrome.