ToolJoltTools

Colour Contrast Ratio Calculator (WCAG)

WCAG contrast ratio between text and background colours — the accessibility pass/fail every designer needs.

Contrast ratio
WCAG levels

WCAG sets the legal-ish accessibility bar: 4.5:1 for normal text (AA), 3:1 for large text, 7:1 for AAA. Black on white is the maximum 21:1; the trap is mid-grey text on white, beloved of designers and unreadable for low-vision users — '#999 on white' fails at 2.85:1. Roughly 1 in 12 men has colour-vision deficiency, so contrast carries information colour alone can't.

Formula

ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05), L = relative luminance
Sources: W3C WCAG 2.1 — contrast (minimum) success criteria

For general information only — not medical advice, a diagnosis or a treatment plan. Consult a qualified healthcare professional before making health, diet, medication or exercise decisions.

WCAG contrast ratio between text and background colours — the accessibility pass/fail every designer needs. The Colour Contrast Ratio Calculator (WCAG) is a free, private contrast ratio calculator tool — every result computes instantly in your browser with no sign-up and no data upload.

About Colour Contrast Ratio Calculator (WCAG)

WCAG sets the legal-ish accessibility bar: 4.5:1 for normal text (AA), 3:1 for large text, 7:1 for AAA. It applies ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05), L = relative luminance. Use the Colour Contrast Ratio Calculator (WCAG) to get an instant, clearly-explained result with the working shown step by step — free, private and with the source method cited.

How to use Colour Contrast Ratio Calculator (WCAG)

  1. 1Enter your details in the Colour Contrast Ratio Calculator (WCAG) input fields above.
  2. 2The result updates instantly with the working and reference bands shown.
  3. 3Adjust any value to explore how it changes the outcome — it's free and unlimited.

Why use Colour Contrast Ratio Calculator (WCAG)?

  • Instant contrast ratio calculator result that recomputes as you type — no waiting, no page reloads
  • 100% client-side: your health data never leaves your browser
  • Shows the actual formula and your numbers substituted in, so you can see exactly how the result is reached
  • Based on published, citable sources (W3C WCAG 2.1 — contrast (minimum) success criteria)
  • Free forever with no sign-up, account or app install

Frequently asked questions

How does the Colour Contrast Ratio Calculator (WCAG) work?+

WCAG sets the legal-ish accessibility bar: 4.5:1 for normal text (AA), 3:1 for large text, 7:1 for AAA. The calculation uses the formula: ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05), L = relative luminance. Everything runs instantly in your browser as you type — your inputs are never uploaded.

Is the Colour Contrast Ratio Calculator (WCAG) accurate, and what is it based on?+

The method is traceable to authoritative sources: W3C WCAG 2.1 — contrast (minimum) success criteria. Results are estimates — individual variation always applies, so treat the output as a well-grounded starting point.

Is the Colour Contrast Ratio Calculator (WCAG) free and private?+

Yes. It's completely free with no sign-up, and all computation happens locally in your browser, so none of your health data ever leaves your device.

Can I use this for medical decisions?+

This tool is for general information only and is not medical advice. Always consult a qualified healthcare professional before making health decisions.

What can I use the Colour Contrast Ratio Calculator (WCAG) for?+

It's commonly used for contrast ratio calculator, wcag contrast, color accessibility. WCAG contrast ratio between text and background colours — the accessibility pass/fail every designer needs.

Related tools

Related Health tools

Sponsored