Colour Contrast Ratio Calculator

Work out colour contrast ratio instantly with clear inputs, formula shown and shareable results.

About Colour Contrast Ratio Calculator

Each channel is linearised, combined into relative luminance with the 0.2126, 0.7152 and 0.0722 weights, and the ratio is the lighter luminance plus 0.05 over the darker plus 0.05. WCAG requires 4.5:1 for body text and 3:1 for large text, and the green-heavy luminance weighting is why green text on white often passes where red does not.

Formulas

Relative luminance

L = 0.2126 R + 0.7152 G + 0.0722 B, using linearised channel values

Contrast ratio

ratio = (lighter L + 0.05) / (darker L + 0.05)

Worked example

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

Inputs used

Text colour (hex): #595959
Background colour (hex): #FFFFFF

Results

Contrast ratio: 7.005 :1
WCAG AA, normal text: Passes AA for normal text
WCAG AAA, normal text: Passes AAA for normal text
WCAG AA, large text: Passes AA for large text

Step by step

1Values used
2Relative luminance
3Contrast ratio
4Contrast ratio= 7.005 :1
5WCAG AA, normal text= Passes AA for normal text
6WCAG AAA, normal text= Passes AAA for normal text
7WCAG AA, large text= Passes AA for large text

Assumptions and limits

The result is derived only from the 2 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 the Colour Contrast Ratio figure worked out?

L = 0.2126 R + 0.7152 G + 0.0722 B, using linearised channel values. Each channel is linearised, combined into relative luminance with the 0.2126, 0.7152 and 0.0722 weights, and the ratio is the lighter luminance plus 0.05 over the darker plus 0.05.

Why does this matter?

WCAG requires 4.5:1 for body text and 3:1 for large text, and the green-heavy luminance weighting is why green text on white often passes where red does not.

What do I need to enter?

Enter text colour (hex), background colour (hex). The defaults shown are a realistic worked example — swap in your own figures to get a result you can use.