idpixo

Colour Contrast Checker

Check whether a text colour is readable on a background colour under the WCAG accessibility standard. Nothing is uploaded — the maths runs in your browser.

The quick brown fox jumps over the lazy dog.

Contrast ratio: —

How the WCAG contrast ratio is calculated

The Web Content Accessibility Guidelines define contrast as the ratio between the relative luminance of two colours, from the lighter to the darker. First each sRGB channel is linearised, then a relative luminance L is formed as 0.2126 R + 0.7152 G + 0.0722 B; the ratio is (Llighter + 0.05) / (Ldarker + 0.05). A ratio runs from 1:1 (identical colours) up to 21:1 (black on white).

Which threshold applies?

This is the same rule set used by the accessibility audits behind our own page colours. When you are preparing a document photo or a print sheet, colour and lighting matter for a different reason — the photo size chart and the passport photo checker cover the photographic side.

Frequently asked questions

Is my colour data sent anywhere?
No. The conversion and the ratio are computed in your browser with built-in JavaScript; no colour you enter leaves your device.

Why does a colour pair pass for large text but fail for normal text?
Large text has a lower minimum ratio because thicker strokes are easier to read at low contrast, so a pair that fails the 4.5:1 normal-text rule can still satisfy the 3:1 large-text rule.

Does a passing ratio guarantee my page is accessible?
No — contrast is one requirement. Text size, font, focus states and alternative text are checked separately; this tool only measures the colour-pair ratio.

Can I use any colour format?
Enter six-digit hex values such as #1a1a1a (the leading # is optional). Three-digit shorthand like #abc is expanded automatically.

What is the highest possible contrast?
Black on white, at 21:1. Because the formula adds 0.05 to each luminance before dividing, you cannot reach a higher value with any pair of sRGB colours.