Colour Contrast
Readable, or just pretty?
WCAG AA and AAA for both text sizes — and when it fails, the nearest shade that passes.
Pure arithmetic, in this tab. No colour you type is sent anywhere.
The pair
Text
Background
The verdict
Large text, 24px and up
Body text at a normal size — this is the case that fails most often, and the one most of your page is made of.
Nearest passing text colour (AA, normal text)
—
How the ratio is calculated, and what it does not cover
Each channel is converted from sRGB to linear light — divide by 255, then
values at or below 0.03928 are divided by 12.92 and the rest are raised
through ((c + 0.055) / 1.055) ^ 2.4. Relative luminance is
0.2126R + 0.7152G + 0.0722B, and the ratio is
(lighter + 0.05) / (darker + 0.05). That is WCAG 2.1 exactly,
not an approximation using perceived brightness.
The thresholds: normal text needs 4.5 for AA and 7 for AAA. Large text — 24px, or 18.66px when bold — needs 3 for AA and 4.5 for AAA. User interface components and graphical objects need 3.
What this cannot tell you: whether the colour carries meaning on its own (a red field with no label fails for a colour-blind visitor at any ratio), whether text sits on a photograph where the effective background varies per pixel, or whether a semi-transparent layer changes what is actually behind the text. Contrast is necessary, not sufficient.
Questions people actually ask
Accessibility questions that come up the first time someone runs an audit on your site.
What contrast ratio do I need?
4.5:1 for normal body text to meet WCAG AA, and 7:1 for AAA. Large text — 24px, or 18.66px when bold — needs 3:1 for AA and 4.5:1 for AAA. Interface components and meaningful graphics need 3:1.
How is the ratio calculated?
Each channel is converted from sRGB to linear light, relative luminance is 0.2126R + 0.7152G + 0.0722B, and the ratio is (lighter + 0.05) ÷ (darker + 0.05). That is WCAG 2.1 exactly, not an approximation from perceived brightness.
My grey text fails. What is the closest colour that passes?
The tool walks your colour toward black or white — whichever direction the background allows — until it meets 4.5:1, and shows you that shade. Stepping in sRGB keeps the hue recognisably the one you chose, so it reads as a nudge rather than a redesign.
Is passing the contrast check enough to be accessible?
No. Contrast is necessary, not sufficient. It says nothing about whether colour is the only thing carrying meaning, whether text sits on a photograph where the background varies per pixel, or whether a translucent layer changes what is really behind the text.
Does it send my brand colours anywhere?
No. It is arithmetic on six hex digits, done in your browser. Nothing is fetched and nothing is logged.
Part of nine free KaiOrb instruments — all in-browser, none of them upload your files.