Color Contrast Checker: WCAG Accessibility Guide
Learn how to check color contrast for accessible websites. WCAG AA and AAA requirements, the ratio formula, and how to use a contrast checker tool in your browser.
Color Tools · UtilityHub Blog
Color contrast is the difference in brightness between text and the background behind it. It is the single most common reason websites fail accessibility checks, and it is also one of the easiest problems to fix once you know the numbers.
This guide explains how contrast is measured, what WCAG requires, and how to check any color pair in seconds using a browser-based contrast checker — no design software or install needed.
Check your colors against WCAG
Check the contrast ratio between two colors and verify WCAG accessibility compliance for text.
Why color contrast matters
Around 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and millions more have reduced visual acuity. When text barely differs in brightness from its background, those users cannot read it — regardless of how beautiful the palette looks on screen.
Contrast also affects everyone else. Low-contrast text is harder to read in bright sunlight, on low-quality displays, and for older readers. Meeting WCAG contrast requirements is a legal requirement for many public-facing organizations and simply good design for everyone.
How contrast ratio is calculated
Contrast ratio is a number between 1:1 and 21:1 that describes how much two colors differ in brightness:
- 1:1 — the colors are identical (invisible text)
- 21:1 — pure black on pure white (maximum possible)
The formula is:
- Compute the relative luminance of each color (a weighted value of how bright the color appears, following the WCAG definition).
- Divide the lighter luminance plus 0.05 by the darker luminance plus 0.05:
(L1 + 0.05) / (L2 + 0.05)
The result tells you the brightness gap. Higher is easier to read. You never need to do this math by hand — a contrast checker computes it instantly and marks the verdict.
WCAG requirements at a glance
| Level | Normal text | Large text (18pt / 14pt bold) | Non-text UI |
|---|---|---|---|
| AA (minimum recommended) | 4.5:1 | 3:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 | — |
Key takeaways:
- AA 4.5:1 for normal text is the standard target for most websites.
- Large text gets a lower requirement (3:1) because thicker glyphs are easier to parse.
- Non-text UI — the boundary of a button, a checkbox, an icon that is part of the meaning — needs at least 3:1 against adjacent colors.
How to check contrast with the Contrast Checker
Checking a color pair takes seconds:
- Select the text color using the color picker or by typing a HEX value.
- Select the background color the same way.
- The tool shows a live preview with sample text on your chosen pair.
- Read the contrast ratio (for example 12.63:1) and the WCAG rating badge:
- AAA (Excellent) — 7:1 or higher
- AA (Good) — 4.5:1 or higher
- AA Large Text (Acceptable) — 3:1 or higher
- Poor / Very Poor — below the AA thresholds
Test the exact colors from your design tokens, not approximations. A button that "looks fine" at one pixel size can fail when it is the small icon-only case.
Common contrast failures and fixes
- Light gray on white ("#999999 on #FFFFFF") — a very common style choice that fails at about 2.8:1. Darken the gray to at least #767676 for AA.
- Brand colors used for body text — a medium blue can pass as a header (large text) yet fail for paragraphs. Reserve light brand colors for large text and accents.
- Placeholder text — placeholders are often too faint (< 3:1). Either darken them or label fields with visible text instead.
- Links distinguished only by color — contrast is separate from color alone; WCAG also requires links to be identifiable without color. Add an underline or icon.
How to build an accessible palette
A practical workflow for new designs:
- Start with your two main pairing colors (text and background) and confirm they meet AA 4.5:1.
- Check secondary pairings — cards, tables, and muted text — the same way.
- Verify the accent color used for links and buttons has at least 3:1 against the surfaces it sits on.
- Test focus states: a visible keyboard focus ring needs 3:1 against the page background.
Keep a small set of tested color pairs you know pass, and reuse them instead of inventing new grays per component.
Frequently asked questions
What is a good contrast ratio?
For normal text, at least 4.5:1 (WCAG AA). For large text, at least 3:1. AAA pushes normal text to 7:1.
Do dark mode and light mode need different colors?
Not necessarily, but every theme you ship must pass on its own. A pair that passes in light mode may fail in dark mode because both colors shift — test each theme separately.
Are there exemptions for disabled buttons?
No. Text shown inside disabled-looking controls that must be readable still needs to meet contrast requirements. Never rely on low contrast alone to signal "disabled."
Can I check contrast offline?
Yes. The Contrast Checker runs entirely in the browser — your colors never leave the page, so you can check designs privately, anywhere.
Conclusion
Color contrast is objective, measurable, and fixable. By checking every text-background pair against WCAG AA, you make your site genuinely usable for people with low vision and color vision deficiencies — and you avoid a common accessibility failure that automated audits flag on countless sites.
Use the Contrast Checker at the start of every color decision and you will never ship an unreadable pairing again.
Color tools for accessible design
Check the contrast ratio between two colors and verify WCAG accessibility compliance for text.
Select colors using a visual color picker, view HEX/RGB values, and explore preset palettes.
Convert HEX color codes to RGB format. View a live preview of the converted color.
