Skip to content
ENExplore Calculators

Accessibility Contrast Calculator

Calculate WCAG contrast ratio between two colours and check AA and AAA.

About Accessibility Contrast Calculator

The 0.05 offset models ambient screen reflection, which is why pure black on pure white gives 21:1 rather than an infinite ratio. Large text needs less contrast because its strokes are thicker. Contrast failures are the single most common accessibility defect on the web, and unlike most they are fully determined by the design tokens rather than the implementation.

Formula

Accessibility Contrast

Contrast = (L_lighter + 0.05) ÷ (L_darker + 0.05)

relative luminance
Perceptual brightness on a 0 to 1 scale
AA threshold
4.5:1 for normal text, 3:1 for large text and interface components

Worked example

With the default values below, Accessibility Contrast Calculator returns Contrast Ratio of 5.882. Change any input above and every figure here is recalculated in your browser.

Inputs used

Foreground relative luminanceaccepts 0–100 %
12 %
Background relative luminanceaccepts 0–100 %
95 %
Text sizeone of Normal text, Large text, 18pt or 14pt bold, User interface component
Normal text

Results

Contrast Ratio
5.882 :1
Passes WCAG AA
Yes
Passes WCAG AAA
No
Required Ratio for AA
4.5 :1
Rating
Acceptable — meets AA

Step by step

  1. 1Values used
  2. 2Accessibility Contrast
  3. 3Contrast Ratio= 5.882 :1
  4. 4Passes WCAG AA= Yes
  5. 5Passes WCAG AAA= No
  6. 6Required Ratio for AA= 4.5 :1
  7. 7Rating= Acceptable — meets AA

Assumptions and limits

  • The result is derived only from the 3 inputs listed above. Anything not among them is not part of the calculation.
  • In particular, this calculator does not take inflation, tax, fees or charges or compounding frequency into account.
  • Figures are rounded for display to 3 decimal places, so totals built from several rounded parts can differ slightly from the unrounded arithmetic.

How these calculators are built and tested is described on the Methodology page. If a figure looks wrong, please report it.

Frequently Asked Questions

How is Accessibility Contrast calculated?

Contrast = (L_lighter + 0.05) ÷ (L_darker + 0.05) The 0.05 offset models ambient screen reflection, which is why pure black on pure white gives 21:1 rather than an infinite ratio. Large text needs less contrast because its strokes are thicker.

Why does Accessibility Contrast matter?

Contrast failures are the single most common accessibility defect on the web, and unlike most they are fully determined by the design tokens rather than the implementation.

What values do I need to enter?

This calculator takes 3 inputs: Foreground relative luminance, Background relative luminance, Text size. The pre-filled defaults are a realistic starting point — replace them with figures from your own environment for a result you can act on.

Related Calculators

Accessibility Contrast Calculator | Calcrivo