Low-contrast text is the most common accessibility failure on the web: light gray captions, pastel buttons, text over brand colors. The Web Content Accessibility Guidelines (WCAG), published by the W3C and referenced by US Section 508 rules and many other accessibility laws, set measurable minimums. This checker computes the exact WCAG 2.x contrast ratio for any pair of colors, tells you which levels pass, previews the pair at real sizes and suggests the nearest colors that would pass.
How to use the contrast checker
- Enter the text color (foreground) and the background color as HEX, rgb(), hsl() or a CSS name.
- Choose normal or large text; the headline verdict follows your choice, and every level is listed on the tape.
- Look at the live preview: body text, large text, bold text, an outlined button and an icon drawn in your colors.
- If the pair fails, the table suggests a text color and a background color with the same hue and saturation, adjusted in lightness just enough to pass AA or AAA.
The WCAG contrast formula
First, each sRGB channel (0–255) is converted to linear light:
Then the relative luminance weights the channels by how bright each looks to the eye:
Finally, with L₁ the lighter and L₂ the darker color:
The ratio runs from 1:1 (identical colors) to 21:1 (black on white). Older versions of the WCAG text used 0.03928 as the threshold instead of 0.04045; for 8-bit colors the two give identical results, because no channel value falls between them.
Worked example
Check medium gray #888888 text on white.
Linearize: 136 ÷ 255 = 0.5333 → ((0.5333 + 0.055) ÷ 1.055)2.4 = 0.2462 for each channel, so L = 0.2462. White has L = 1.
Ratio: (1 + 0.05) ÷ (0.2462 + 0.05) = 3.54:1.
Verdict: passes AA for large text and UI components (3:1) but fails AA for normal text (4.5:1) and both AAA levels.
Fix: darkening to #767676 gives 4.54:1 and passes AA; #595959 reaches 7.0:1 for AAA.
WCAG levels at a glance
| Requirement | Normal text | Large text | UI parts & graphics |
|---|---|---|---|
| Level AA | 4.5:1 | 3:1 | 3:1 |
| Level AAA | 7:1 | 4.5:1 | — |
Most organizations, and most legal settlements and procurement rules that cite WCAG, target level AA. Logos and purely decorative text are exempt, as is text in inactive (disabled) controls.
Practical tips
- Check every state. Hover, focus, visited links, placeholder text and disabled-looking but active buttons each need their own check.
- Text over images needs a solid or semi-opaque backing panel; measure against the lightest part of the image behind the text.
- Brand colors often sit in the 3:1–4.5:1 gap. Use them for large headings, borders and icons, and pair body text with a darker shade from the same hue — the suggestions table finds one.
- Dark mode needs separate checks. Pure white on pure black (21:1) can feel harsh; off-white on dark gray still passes AAA comfortably.
- Contrast is not the whole story. Never use color alone to convey meaning; add text, icons or patterns for people who cannot tell red from green.
WCAG 3 is in development with a different, perception-based contrast model, but WCAG 2.x remains the published standard that regulations reference today.
To convert colors between HEX, RGB, HSL and CMYK or build tints and shades, use the color converter.
Frequently asked questions
What contrast ratio does WCAG require?
For level AA, normal text needs at least 4.5:1 and large text at least 3:1. Level AAA raises those to 7:1 and 4.5:1. Since WCAG 2.1, user-interface components and meaningful graphics such as icons and input borders need 3:1 against adjacent colors (Success Criterion 1.4.11).
What counts as large text?
At least 18 point (24 CSS pixels) in regular weight, or at least 14 point (about 18.67 CSS pixels) in bold. Anything smaller is normal text for contrast purposes.
What is the lightest gray that passes AA on white?
#767676, which reaches 4.54:1 on #FFFFFF. One step lighter, #777777, falls to 4.47:1 and fails for normal text.
Does WCAG round the ratio up?
No. A ratio of 4.499:1 does not meet a 4.5:1 requirement. This checker truncates to two decimals so a borderline pair never shows a passing number it does not actually achieve.
Does the checker handle transparent colors?
Yes. A text color with alpha is blended over the background first, as the browser would paint it, and the ratio is measured on the blended color. A translucent background is blended over white, with a note, because the real color behind it is unknown.