Color contrast checker

Contrast ratio is a number between 1:1 and 21:1 that describes how different two colors look to the human eye — specifically, how a foreground color (usually text) compares to the background it sits on. A ratio of 1:1 means the two colors are identical, like white text on a white background: completely unreadable. A ratio of 21:1 is the maximum possible, produced by pure black text on a pure white background: maximally readable.

Everything in between falls somewhere on a legibility spectrum, and the Web Content Accessibility Guidelines (WCAG) define specific minimum ratios that count as “accessible enough” for different situations. That is exactly what this color contrast checker calculates for you: enter (or pick) a text color and a background color, and the tool works out the precise ratio and tells you which WCAG levels it passes.

Under the hood, the calculation follows the WCAG 2.x formula exactly. Each color is first converted to its relative luminance — a measure of how much light it reflects, weighted by how sensitive the human eye is to red, green, and blue (green contributes the most, blue the least). The formula gamma-corrects each channel, then combines them as 0.2126R + 0.7152G + 0.0722B. Once both colors have a luminance value, the contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter of the two luminances and L2 is the darker. That +0.05 offset prevents divide-by-zero issues with pure black and keeps the ratio meaningful even at the extremes.

WCAG defines two conformance levels — AA and AAA — and two text sizes — normal and large — giving four distinct thresholds. This WCAG contrast checker tests your color pair against all four at once:

“Large text” is defined precisely by WCAG as 18pt (24px) and above, or 14pt (about 19px) and above when bold. Anything smaller counts as normal text and needs the stricter ratio. Most product teams target AA as the practical minimum — it is what's referenced by law in most jurisdictions — while AAA is a stretch goal for especially sensitive or high-traffic surfaces. Non-text elements like icons, form field borders, and focus indicators have their own related rule, WCAG 1.4.11 Non-text Contrast, which requires at least 3:1 against adjacent colors.

Contrast isn't just a nice-to-have for designers who like clean palettes. Low-contrast text is one of the most common accessibility failures on the web, and it directly affects people with low vision, color blindness, and age-related vision changes — plus everyone else trying to read a phone screen in bright sunlight or on a low-quality monitor.

• ADA (Americans with Disabilities Act). U.S. courts and the Department of Justice increasingly treat websites as “places of public accommodation” under Title III, and WCAG 2.1 AA is the standard regulators and plaintiffs' attorneys point to when arguing a site is inaccessible. Thousands of ADA web-accessibility lawsuits are filed in the U.S. every year, and insufficient color contrast is consistently one of the top-cited issues.
• EN 301 549 (European standard). This is the technical standard referenced by the EU Web Accessibility Directive and the European Accessibility Act, and it incorporates WCAG 2.1 AA success criteria directly — including the 4.5:1 and 3:1 contrast requirements. Public-sector sites across the EU must conform, and private-sector obligations are expanding under the Accessibility Act.
• Section 508 (U.S. federal). Federal agencies and their vendors must meet WCAG 2.0/2.1 AA, which again includes the same contrast thresholds this tool checks.
• Real users, not just compliance. An estimated 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and low vision becomes far more common with age. Good contrast helps everyone read faster with less eye strain — it is one of the highest-leverage, lowest-cost accessibility fixes available.

Beyond the legal exposure, poor contrast quietly hurts conversion. Users skim; if your call-to-action text or pricing table is hard to read, people bounce before they even register there was content to read. Fixing contrast is one of the few accessibility improvements that also reliably improves usability metrics for everyone, not just users with disabilities.

1. Run the pair through this checker first. Paste your exact hex codes rather than guessing — many colors that look “dark enough” on a bright monitor still fail 4.5:1 numerically.
2. Darken the text or lighten the background (or both). Even a small shift — for example moving gray text from #999999 to #767676 on white — can take a failing pair from around 2.8:1 to a passing 4.5:1+.
3. Increase the font size or weight to unlock the more lenient “large text” threshold (3:1 for AA) if the design constraints won't allow a color change — this works well for headings and hero copy.
4. Don't rely on color alone to convey meaning. Pair color with an icon, label, or underline for things like error states and links, so the information still comes through for users who can't distinguish the colors at all.
5. Check your whole design system, not just body text. Placeholder text, disabled states, secondary/muted text, and text on top of photos or gradients are the most common places contrast quietly fails — test each combination that appears in production.
6. Re-test after any brand refresh. A new accent color or a lighter shade of your brand color can silently break contrast on buttons and links that used to pass.

A useful habit: whenever you pick a new brand or UI color, run it against both white and black (and your actual background tones) through this WCAG contrast checker before it goes into a component library. Catching a failing pair at the token level saves you from re-auditing dozens of pages later.

• Light gray on white. Muted “subtle” text (think #aaaaaa on #ffffff) is one of the most common AA failures in modern minimalist design.
• White text on a mid-tone brand color. Brand colors are often chosen for vibrancy, not contrast — a bright blue or teal button can look great but fail with white text at small sizes.
• Text over photos or video. A gradient overlay that works on one image can fail on another; test contrast against the busiest, brightest part of the image, not the average.
• Placeholder and disabled text. These are frequently left at whatever the framework default is and never checked, but they still need to meet non-text or text contrast rules depending on context.
• Dark mode inversions. Flipping a light theme to dark isn't just inverting colors — a ratio that passes in light mode can fail once the background becomes near-black and the text becomes a soft gray.

• Designers validate a palette before it becomes a component library, catching failures at the token level instead of page by page.
• Frontend developers spot-check hex values pulled from Figma or a CSS variable file before shipping a component.
• Accessibility & QA teams run contrast checks as part of a WCAG 2.1 AA audit alongside screen-reader and keyboard-navigation testing.
• Marketing teams confirm campaign landing pages and email templates stay legible across brand color variations.
• Product managers use it as a quick sanity check when reviewing mockups, without needing design-tool access.
• Legal & compliance reviewers use documented pass/fail results as part of ADA and EN 301 549 conformance evidence.

Once your contrast is dialed in, it's worth checking the surrounding content too — our readability checker helps make sure the words on the page are as easy to understand as they are to see.

Yes. The ratio calculation uses the exact WCAG 2.x relative luminance and contrast formulas — the same math behind every major accessibility audit tool — so the pass/fail results match what a formal WCAG audit or browser DevTools contrast check would report. Everything runs client-side in your browser: no colors, hex codes, or screenshots are ever uploaded to a server, so it is safe to test unreleased brand colors or internal design systems.