A color contrast checker measures the luminance difference between a foreground color and a background color, then reports it as a ratio between 1:1 (identical colors) and 21:1 (pure black on pure white). This tool takes two colors, computes their relative luminance using the WCAG formula, and tells you in real time whether the pair clears the AA and AAA thresholds. Type or paste hex, RGB, or HSL values and the ratio updates as you edit.
The math behind the ratio is more involved than a simple RGB subtraction. Each channel is normalized to 0-1, linearized (values above 0.03928 get raised to the 2.4 power after an offset, below it they're divided by 12.92), then weighted 0.2126 R, 0.7152 G, 0.0722 B to get relative luminance. The ratio is (L_lighter + 0.05) / (L_darker + 0.05). That green weighting is why swapping a blue for a green of the same lightness can move you from failing to passing.
This matters because CSS gives you no built-in guardrail: `color` and `background-color` will happily render 3:1 body text that's illegal under WCAG and unreadable in sunlight. Checking the ratio before you ship is the only reliable way to know your palette is accessible rather than merely pretty.
Checking a color pair
- 1
Enter your foreground (text) color in the first field and your background color in the second. Any valid CSS format works: hex like #1a1a2e, rgb(26, 26, 46), or an HSL value.
- 2
Read the contrast ratio that appears instantly, expressed as a value from 1:1 up to 21:1.
- 3
Check the AA and AAA compliance badges. Each is evaluated separately for normal text and large text, since the thresholds differ.
- 4
Adjust either color and watch the ratio recalculate live. Nudge lightness or saturation until the pass indicators turn green for the level you need.
- 5
Swap foreground and background if you're testing an inverted or dark-mode variant. The ratio is symmetric, but confirming both directions catches palette mistakes.
When you'll reach for it
Meeting WCAG for an audit
You need to prove AA compliance for a client or legal requirement. Verify every text-on-background pair in your design system hits at least 4.5:1 before the accessibility review.
Building a dark mode
Dark themes often quietly fail: light gray text on near-black backgrounds frequently lands around 3:1. Check each dark-mode token so your inverted palette stays as readable as the light one.
Picking accessible brand colors
A brand color that looks great as a button fill may be unreadable as button text. Test the brand hue against white and black to decide which pairings are safe for labels versus decoration.
Validating placeholder and disabled states
Muted UI text, placeholders, and helper copy are where contrast bugs hide. Confirm these secondary colors still clear the threshold instead of assuming they're exempt.
Practical notes and pitfalls
- Know the actual thresholds: AA requires 4.5:1 for normal text and 3:1 for large text (18pt / 24px, or 14pt / 18.66px bold). AAA raises those to 7:1 and 4.5:1. Large text gets a lower bar because thicker strokes stay legible at lower contrast.
- Contrast requirements apply to non-text elements too. Icons, form input borders, and focus indicators need 3:1 against their surroundings under WCAG 2.1's 1.4.11 rule, even though they carry no text.
- The ratio ignores opacity and blending. If your text uses rgba() or sits on a gradient or image, the effective color differs from the token you typed; test against the actual composited color the user sees.
- Passing the numeric ratio isn't the same as being readable. Pure #FF0000 on #0000FF can clear 3:1 yet vibrate painfully. Use the ratio as a floor, not a guarantee of comfort.
- Don't rely on browser DevTools alone. Chrome's contrast overlay uses the same formula but only samples the pixel behind the text, so it misses semi-transparent layers and won't tell you the AAA verdict at a glance.
Common questions
What is a good WCAG contrast ratio?+
For normal body text, aim for at least 4.5:1 to meet WCAG AA, or 7:1 to meet AAA. Large text (18pt regular or 14pt bold) can pass AA at 3:1 and AAA at 4.5:1.
What's the difference between AA and AAA contrast?+
AA is the standard most laws and design systems target: 4.5:1 for normal text, 3:1 for large text. AAA is the enhanced level for maximum readability: 7:1 and 4.5:1 respectively. Most products aim for AA and treat AAA as aspirational.
How is the contrast ratio calculated?+
Each color's relative luminance is computed by linearizing its RGB channels and weighting them 0.2126 red, 0.7152 green, 0.0722 blue. The ratio is (lighter luminance + 0.05) / (darker luminance + 0.05), producing a value from 1:1 to 21:1.
Does font size affect whether text passes?+
Yes. Text counted as 'large' (at least 18pt / 24px, or 14pt / 18.66px when bold) only needs 3:1 for AA instead of 4.5:1, because larger, heavier glyphs remain legible at lower contrast.
Do icons and borders need to meet contrast rules?+
Under WCAG 2.1 success criterion 1.4.11, meaningful non-text elements such as icons, input borders, and focus rings need a 3:1 contrast ratio against adjacent colors. Purely decorative elements are exempt.
Why does my text pass the checker but still look hard to read?+
The WCAG ratio measures luminance difference only. Two colors can clear the threshold while clashing in hue, so highly saturated complementary pairs may pass the math yet cause visual strain. Treat the ratio as a minimum, and sanity-check readability by eye.