Design and media

Colour contrast calculator

WCAG relative-luminance contrast for opaque sRGB colours. This checks contrast only, not full accessibility conformance.

Your numbers

Use the units shown. Results update as you change valid inputs.

YOUR RESULT

WCAG relative-luminance contrast for opaque sRGB colours. This checks contrast only, not full accessibility conformance.

THE NUMBERS, EXPLAINED

How to use this calculator.

WCAG relative-luminance contrast for opaque sRGB colours. This checks contrast only, not full accessibility conformance.

Start with your inputs

Enter foreground hex, background hex. Keep amounts in the units shown on each field. The example is a starting point, not a recommended value.

InputExample value
Foreground HEX#000000
Background HEX#ffffff

A worked example

With the example inputs above, contrast ratio is 21. Change the inputs to explore your own scenario.

All results for the example inputs above
ResultExample answer
Contrast ratio21
Normal-text AAPass

How this is calculated

Contrast ratio

Use the relative-luminance contrast calculation below.

Normal-text AA

Pass when the unrounded contrast ratio is at least 4.5; otherwise Fail. This is the normal-text AA contrast threshold only.

Symbols and units
a
Foreground HEX
b
Background HEX

Use the units shown. A list keeps the order in which you enter its values. The symbol ^ means “raised to the power of”.

Calculation steps and notation

Convert each sRGB channel to c in [0,1]. Linear channel = c/12.92 when c ≤ 0.04045, otherwise ((c+0.055)/1.055)^2.4. Luminance L = 0.2126 × red + 0.7152 × green + 0.0722 × blue using linear channels. Contrast = (lighter L + 0.05)/(darker L + 0.05).

Assumptions and limits

WCAG relative-luminance contrast for opaque sRGB colours. This checks contrast only, not full accessibility conformance.

Calculations use the values you enter. Blank or invalid inputs show an error instead of silently substituting zero. Results are displayed to useful precision; calculations retain the underlying numeric precision.

Questions about this tool

What does the result tell me?

Contrast ratio; Normal-text AA. The result applies to the method and inputs described above. Check the units and assumptions before using it in a decision.

Why might another calculator differ?

Differences in units, rounding, timing or model definitions can produce different answers. Compare the input definitions and the method, rather than only the final number. For this tool: WCAG relative-luminance contrast for opaque sRGB colours. This checks contrast only, not full accessibility conformance.

Are my inputs stored or sent to AI?

Calculations on this page happen in your browser. The separate AI question finder sends its submitted conversation to OpenAI; these calculator fields are not sent. Favourites and recent tool names are stored locally. A shared link contains the inputs you choose to include.

Further reading

W3C: Understanding contrast ↗

Background reading; this does not imply endorsement or independent review of SumFizz.

Review status

Software example and browser checks are recorded in our quality report. No external expert review is claimed. Created with coding assistance; calculations run as ordinary browser code.

Read the quality report →