This tool answers a specific, testable question: can most people actually read this text against this background? Type a foreground and background color and it computes the exact WCAG contrast ratio — the same metric auditors, courts and automated accessibility scanners use to decide whether a design passes or fails.
The regulatory and human history behind contrast ratios
The Web Content Accessibility Guidelines (WCAG) trace back to 1999, when the W3C's Web Accessibility Initiative published WCAG 1.0 in response to a wave of lawsuits and government mandates — most notably the U.S. Rehabilitation Act's Section 508 — requiring digital content to be usable by people with disabilities, including low vision and color blindness (which affects roughly 1 in 12 men and 1 in 200 women, according to long-standing prevalence studies). WCAG 2.0, published in 2008 and still the legal reference point in many jurisdictions, introduced the precise numeric contrast formula this tool implements. Low-contrast text has since become one of the single most common findings in web accessibility lawsuits under the Americans with Disabilities Act.
How the ratio is actually calculated
WCAG defines "relative luminance" for a color as a weighted, gamma-corrected sum of its red, green and blue components — weighted because the human eye is far more sensitive to green light than to blue, a fact rooted in the same photoreceptor research behind the RGB model itself. The contrast ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 the darker one's, producing a value from 1:1 (identical colors, no contrast) to 21:1 (pure black on pure white).
The thresholds that actually matter
- 4.5:1 — WCAG Level AA minimum for normal body text; the most commonly cited legal and design-system baseline.
- 3:1 — WCAG AA minimum for large text (18pt+, or 14pt+ bold) and for UI components like button borders.
- 7:1 — WCAG Level AAA, a stricter standard often required for government and healthcare sites.
Who checks contrast, and when
Accessibility auditors run this exact calculation as step one of any WCAG conformance review. Design system teams bake minimum ratios directly into their color tokens so no designer can accidentally ship gray-on-white body copy. Front-end engineers run automated tools like axe or Lighthouse in CI pipelines, which flag the identical formula on every pull request. Even outside compliance concerns, higher contrast measurably reduces reading time and error rates for everyone, not only users with low vision — a finding replicated across usability research since the 1980s.
Frequently asked questions
Does font weight or size affect the required ratio? Yes — WCAG explicitly relaxes the requirement to 3:1 for large or bold text because bigger strokes remain legible at lower contrast.
Is a higher ratio always better? Not necessarily for aesthetics — pure black on pure white (21:1) can cause visual "vibration" or eye strain for some readers, which is why many style guides intentionally cap contrast around 15–18:1 for large text blocks rather than maximizing it.
Does this account for color blindness specifically? The WCAG ratio is luminance-based, so it holds up reasonably well across most color vision deficiencies, but it is not a substitute for testing with a dedicated color-blindness simulator for hue-dependent issues like red/green confusion.
Further reading
W3C — WCAG 2.1, Success Criterion 1.4.3 — The official normative text and formula for minimum contrast.
Wikipedia — Color blindness — Prevalence and types of color vision deficiency that contrast standards aim to accommodate.