Why contrast rules exist

Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and a much larger share of the population has low-vision conditions that worsen with age, glare, or a low-quality screen. Text that looks perfectly readable to a designer on a calibrated monitor can be unreadable to a meaningful share of real visitors. WCAG (Web Content Accessibility Guidelines) sets a measurable bar so "readable enough" isn't left to individual judgment.

How the contrast ratio is actually calculated

The ratio isn't based on how different two colors look to a human eye — it's based on relative luminance, a formula that weighs how much light a color reflects. Each color's RGB channels are converted to a linear scale, weighted (green contributes far more perceived brightness than blue), and combined into a single luminance value between 0 (black) and 1 (white). The contrast ratio is then:

(L1 + 0.05) / (L2 + 0.05)

where L1 is the lighter color's luminance and L2 is the darker one's. The result ranges from 1:1 (identical colors, no contrast) to 21:1 (pure black on pure white). This is exactly the formula the Contrast Checker on this site uses.

AA vs AAA: what the levels actually require

Level	Normal text	Large text (18.66px bold+ or 24px+)	Who typically needs it
AA	4.5 : 1	3 : 1	Most commercial sites, apps, and any product covered by accessibility law
AAA	7 : 1	4.5 : 1	Government sites, healthcare portals, products explicitly built for low-vision users

AA is the level referenced by nearly every accessibility law in the world, including Section 508 in the US and the EN 301 549 standard behind the European Accessibility Act. AAA is meaningfully stricter and, for most everyday products, optional — chasing it everywhere often forces color choices that clash with a brand's palette for little practical benefit outside specialized use cases.

The European Accessibility Act changed the stakes in 2025

The European Accessibility Act (EAA) became enforceable for many digital products and services sold into the EU starting June 28, 2025. It doesn't invent a new contrast standard — it points to the existing EN 301 549 standard, which in turn aligns with WCAG 2.1 AA. What changed is enforceability: companies selling digital products, banking apps, e-commerce checkouts, and other in-scope services into EU member states can now face real penalties for failing to meet AA-level contrast and other accessibility criteria, not just a best-practice recommendation. That's a large part of why contrast-checking tools have seen a genuine, sustained rise in search interest since mid-2025 rather than a short-lived spike.

Common mistakes that fail contrast checks

• Trusting the eye over the number. A mid-saturation orange on a mid-saturation blue can look like it "pops," but both colors can have similar luminance, producing a ratio well under 3:1.
• Testing text color alone. Contrast is a pair — the same text color can pass on one background and fail on another. Always test the actual combination in use, not the text color in isolation.
• Forgetting disabled or placeholder states. Lightened "disabled" button text and placeholder text are common places where contrast quietly drops below 3:1 even in products that pass everywhere else.
• Assuming brand colors are exempt. Legal accessibility requirements don't carve out exceptions for brand palettes; the fix is usually a slightly darker or lighter shade of the same brand color, not abandoning it.

Fixing a failing combination

The fastest fix is almost always adjusting lightness, not hue — shifting a color a few percentage points darker or lighter in HSL usually preserves its "feel" while pushing the ratio over the line. Run the pair through the Contrast Checker, and if it fails, try darkening the darker color or lightening the lighter one in 5% steps until it passes, then sanity-check that it still matches your intended look.