🎨 Contrast Ratio Calculator
Pick a text color and a background color to see the WCAG contrast ratio and whether it passes AA and AAA for normal and large text — no more guessing whether your palette is accessible.
🧮 Check Text & Background Contrast
What is a Contrast Ratio Calculator?
It measures how easy a piece of text is to read against its background by comparing the two colors' relative luminance. Enter or pick a text color and a background color and it instantly shows the ratio and whether it clears the WCAG AA and AAA thresholds for both normal and large text.
Use it while designing a UI to catch low-contrast text before it ships, to compare a few candidate palettes side by side, or to double-check a client's brand colors are actually readable — accessible contrast benefits every reader, not just those with low vision.
❓ Frequently Asked Questions
How does the contrast ratio calculator work?
Pick (or type) a text color and a background color. Each is converted to its WCAG relative luminance, and the calculator divides the lighter luminance plus 0.05 by the darker luminance plus 0.05 to get a ratio between 1:1 (no contrast) and 21:1 (black on white, the maximum possible).
What contrast ratio do I need to pass WCAG?
WCAG 2.x Level AA requires at least 4.5:1 for normal body text and 3:1 for large text (18pt+, or 14pt+ bold). Level AAA is stricter — 7:1 for normal text and 4.5:1 for large text. This tool checks your pair against all four thresholds at once.
Does this replace a full accessibility audit?
No — contrast is one of many WCAG success criteria. It doesn't check color blindness simulation, focus indicators, or non-text contrast (icons, borders). Use it as a fast first pass on a text/background pairing, then run a full audit before shipping.
Why do the same two colors sometimes read differently on different tools?
Small differences usually come from rounding or from using perceptual color spaces instead of the WCAG relative-luminance formula. This calculator follows the standard WCAG 2.x formula (sRGB gamma-corrected luminance), which is what most accessibility checkers and browser devtools use.