Colour · accessibilityWCAG contrast checker
Check the contrast of text and background against WCAG. Enter two colours — see the ratio, levels AA and AAA and how to adjust a colour to pass.
Everything is computed in your browser — colours never leave the device
01
Colours
the ratio updates on every keystroke02
Level checks
five WCAG 2.1 criteriaAA
Normal text
4.54 ≥ 4.5
threshold 4.5 : 1
AA
Large text
4.54 ≥ 3
threshold 3 : 1
AAA
Normal text
4.54 < 7
threshold 7 : 1
AAA
Large text
4.54 ≥ 4.5
threshold 4.5 : 1
UI · 1.4.11
Icons, borders, elements
4.54 ≥ 3
threshold 3 : 1
03
Live preview
sample text on the background with a WCAG contrast checkWhich sample maps to which threshold✓ passes✓ passes✓ passes✕ fails
Normal text 16px
needs 4.5:1 for AA
Large 24px / 18.66px bold
needs 3:1 for AA
Input border and button
criterion 1.4.11 — 3:1
Normal text at AAA
needs 7:1
04
How to fix
the nearest passing colour by lightnessAA · normal text
4.5 : 1The level already passes — no need to change the colour.
AAA · normal text
7 : 1#595959
7.00 : 1
Contrast is about luminance. Making the text a bit darker or the background a bit lighter is usually enough — the hue can stay.
05
About WCAG contrast
Contrast is how well text reads on its background. WCAG sets minimum thresholds: the smaller the text, the higher the contrast has to be. What is measured is not the difference in hue but the ratio of luminances — from 1:1 for identical colours to 21:1 for black on white.
Contrast ratio
Basics1:1 … 21:1
The ratio between the luminance of two colours. 1:1 means identical colours, 21:1 is the maximum (black on white). Hue on its own does not matter — luminance does.
Levels AA and AAA
Levels4.5:1 · 7:1
AA is the baseline required by most guidelines and accessibility laws. AAA is the enhanced level; meeting it for all text is not always achievable.
Large text
Threshold≥ 3:1
Large text has a softer threshold — 3:1 instead of 4.5:1. Large means from 18pt (≈ 24px) regular or 14pt (≈ 18.66px) bold.
Interface and graphics
UI · 1.4.113:1
Icons, input borders, focus states and meaningful parts of graphics must contrast too — at least 3:1 under criterion 1.4.11.
How it is calculated
Formula(L1 + 0.05) / (L2 + 0.05)
sRGB channels are linearised, relative luminance is computed from them, and then the ratio is taken. That is why bright yellow on white fails: both are too light.
WCAG 3 and APCA
FutureLc
APCA is a new perceptual algorithm for the upcoming WCAG 3 standard: it models the perception of light and dark more precisely. It is still a draft — the official criterion is WCAG 2.
06