Check the contrast ratio between two colors against WCAG AA and AAA accessibility standards, with a live text preview — instantly, right in your browser.
📂 Technology & InternetEnter a text color and a background color as HEX codes (like #1F2937), then press Check Contrast to see the ratio, whether it passes WCAG AA/AAA, and a live preview of sample text on that background. Everything runs locally in your browser — no sign-up required, and no data is ever sent anywhere.
This tool measures how easy it is to read text of one color placed on a background of another color, using the official Web Content Accessibility Guidelines (WCAG) contrast ratio formula. Enter a text color and a background color as HEX codes, and the calculator converts both to their relative luminance (a measure of perceived brightness that accounts for how the human eye weights red, green, and blue light differently) and computes a ratio ranging from 1:1 (no contrast at all, like white on white) to 21:1 (maximum contrast, pure black on pure white). That ratio is then checked against the four standard WCAG thresholds: 4.5:1 for AA-level normal text, 3:1 for AA-level large text, 7:1 for AAA-level normal text, and 4.5:1 for AAA-level large text. Meeting these thresholds matters well beyond formal compliance checklists — low-contrast text is genuinely difficult to read for people with low vision or color vision deficiencies, and often frustrating for everyone else too, especially on a bright screen outdoors or a low-quality display.
Before the Web Content Accessibility Guidelines introduced a standardized contrast ratio formula, judging whether text was "readable enough" against its background was almost entirely subjective — one designer's comfortable gray-on-white might be genuinely difficult for someone else to read, particularly people with low vision, certain color vision deficiencies, or simply older eyes that have lost some contrast sensitivity with age. A numeric standard replaced that guesswork with something objective and testable, the same way a building code replaces "sturdy enough" with a specific load-bearing number.
The formula itself starts by converting each color from the familiar 0–255 RGB scale into what's called relative luminance — a single number representing how bright that color appears to the human eye, accounting for the fact that human vision is far more sensitive to green light than to red or blue. That's why the WCAG luminance formula weights green most heavily (a coefficient of 0.7152), red significantly less (0.2126), and blue the least (0.0722) — a pure green square looks noticeably brighter to human eyes than a pure blue square of the exact same numeric intensity, and the formula reflects that biological reality rather than treating all three color channels as equally perceptible.
Once both colors have a relative luminance value, the contrast ratio is simply the lighter luminance plus a small constant, divided by the darker luminance plus that same constant: (L1 + 0.05) / (L2 + 0.05). The added 0.05 constant prevents the ratio from becoming mathematically unstable when a luminance value is at or near zero (pure black), and it's also a rough approximation of the small amount of ambient light that reflects off any real screen even when displaying "true" black. The result is a single, easily comparable number: exactly 1:1 for two identical colors, and exactly 21:1 for the theoretical maximum of pure black against pure white.
WCAG's four thresholds — 4.5:1 and 3:1 for AA, 7:1 and 4.5:1 for AAA — aren't arbitrary either; they were derived from vision science research into the contrast levels at which text remains reliably legible for people with moderately reduced visual acuity, roughly comparable to 20/40 vision. The lower threshold for large text reflects a simple fact about human vision: bigger shapes with thicker strokes remain distinguishable at contrast levels that would make small, thin text blur into its background. Designers who deliberately test and adjust for these numeric thresholds — rather than relying on how a color pairing looks on their own well-lit, high-quality monitor — tend to produce interfaces that stay legible across a far wider range of real-world viewing conditions and visual abilities.
It's a number from 1:1 (identical colors, no contrast) to 21:1 (pure black on pure white, maximum contrast) that measures how easily one color can be distinguished from another, calculated from each color's relative luminance using the WCAG formula.
For WCAG AA (the most commonly required level): at least 4.5:1 for normal text, or 3:1 for large text (roughly 18.66px bold or 24px regular and up). For the stricter WCAG AAA level: at least 7:1 for normal text, or 4.5:1 for large text.
Larger text is inherently easier to read at lower contrast because its strokes are thicker and its shapes are more distinguishable, so WCAG allows a lower minimum ratio for large text than for normal-sized body text.
No. This tool calculates the standard WCAG luminance-based contrast ratio, which is designed around general legibility and low-vision accessibility, not simulating any specific type of color vision deficiency. Passing WCAG contrast is still valuable for color-blind users, but it isn't a substitute for a dedicated color-blindness simulation.
No. The contrast ratio is calculated entirely inside your browser using JavaScript, and nothing you enter is ever transmitted, logged, or saved.