Color contrast decides whether real people can read your text. Someone with low vision, aging eyes, or a phone screen in bright sunlight needs enough separation between text and background to make out the words. WCAG, the Web Content Accessibility Guidelines, turns that judgment into a single number: the contrast ratio. This guide explains what the ratio means, how to check it, and where the number stops being the whole story.
What the contrast ratio actually measures
The WCAG contrast ratio compares the relative luminance (perceived brightness) of two colors. It runs from 1:1 (identical colors, invisible) to 21:1 (pure black on pure white). It is calculated from the sRGB values of each color using the official WCAG 2.x formula, not by eyeballing hue. That matters because two colors can look bold and different to you while still failing for someone else, and colors can be very different in hue but similar in brightness, which reads as low contrast.
The thresholds you need to hit depend on the text:
- Normal text: 4.5:1 for AA, 7:1 for AAA
- Large text (at least 24px regular, or 18.66px bold): 3:1 for AA, 4.5:1 for AAA
- UI components and graphics (icons, form borders, focus rings, chart segments): 3:1, covered by WCAG rule 1.4.11
AA is the level most organizations and accessibility laws target. AAA is stricter and often reserved for body text in high-stakes contexts.
How to check a color pair
The Color Contrast Checker (WCAG) on Every Boring Tool does this in the browser with no upload or sign-up. Here is the flow:
- Enter your text (foreground) color. You can type a hex code like
#1A1A1A, anrgb()orrgba()value, or a common name likeblack. A native color picker sits next to the field if you would rather click. - Enter your background color the same way.
- Read the contrast ratio it shows, for example
7.14:1. - Check the Pass/Fail tiles for normal text AA and AAA, large text AA and AAA, and UI and graphics. Each tile names the threshold it is testing against.
- Use the live preview box to see large and normal text samples rendered in your actual colors.
- Use Swap colors to flip foreground and background, or Copy report to grab a plain-text summary of the ratio and every pass/fail result to paste into a ticket or design note.
If a value is not a valid color, the tool tells you instead of guessing, so a typo will not silently produce a wrong number.
A useful detail: translucent text
If your text color has an alpha channel (a translucent rgba() or an 8-digit hex), raw luminance would be misleading, because the background shows through. The checker composites the translucent foreground over the background first, then scores the resulting solid color. The background itself is treated as opaque. This gives you the ratio a viewer actually sees, which is the honest way to score semi-transparent text.
Honest limits to keep in mind
A passing ratio is necessary, not sufficient. The number cannot see your design, so treat it as a floor, not a finish line.
- It scores one pair at a time. Real interfaces layer text over gradients, photos, and video where the background changes pixel by pixel. Pick the worst-case spot behind your text and test that, or the good average will hide a failure at the edges.
- It does not judge readability beyond contrast. Tiny fonts, thin weights, tight letter spacing, and long line lengths all hurt legibility even at a passing ratio. Contrast is one input among several.
- WCAG 2.x luminance is imperfect. The formula is known to be generous to some light-on-light and dark-on-dark pairs, which is part of why a newer perceptual model (APCA) is being explored for future guidelines. This tool implements the current, official, legally referenced WCAG 2.x math, so it is the right choice for compliance today, but do not assume a bare 4.5:1 pass feels comfortable to everyone.
- It checks contrast, not color blindness. Two colors can pass contrast and still be hard to tell apart for someone with a color vision deficiency. Never rely on color alone to carry meaning; add labels, icons, or patterns.
When a different approach fits better
Use this checker when you have specific color values and want a fast, private, authoritative yes or no. It is ideal while picking palette tokens, reviewing a component, or settling a design debate.
Reach for something else when your question is broader. To find every failing element on a live page at once, use an automated scanner or a browser devtools accessibility audit that crawls the rendered DOM. To design a whole palette so combinations pass by construction, a dedicated palette generator with built-in contrast constraints saves round trips. And nothing replaces testing with real assistive technology and real users, which catches problems no ratio ever will.
The short version
Check the contrast ratio for every text-and-background pair, aim for at least AA (4.5:1 normal, 3:1 large and UI), and prefer AAA for long-form reading. Test the worst case, not the average. Then remember the number is a minimum bar for one narrow thing, and back it up with sensible type, non-color cues, and human testing.