MotionShine01 / Ratio
From 1:1 to 21:1
Each colour's relative luminance comes from its red, green and blue, weighted as the eye sees them. The ratio is the lighter one plus 0.05 over the darker one plus 0.05.
Free tool
Color contrast checker, WCAG AA and AAA.
Type or pick a text colour and a background to see the contrast ratio and whether it passes WCAG 2.2: AA needs 4.5:1 for normal text and 3:1 for large text, AAA needs 7:1 and 4.5:1, and buttons, fields and icons need 3:1. When a pair fails, you get the closest colours that pass, with the same hue. Paste a whole palette to check every pair at once.
See-through colours are checked as they look on the background (and the background on white).
AANormal text, 4.5:1
AALarge text, 3:1
AAANormal text, 7:1
AAALarge text, 4.5:1
UIControls and icons, 3:1
Large text, 24 px
Normal text at 16 px. The quick brown fox jumps over the lazy dog, and this is how a paragraph reads in these colours.
ButtonText field
Check a palette
The WCAG 2.2 levels
Contrast (Minimum) 1.4.3, level AA: 4.5:1, or 3:1 for large text.
Contrast (Enhanced) 1.4.6, level AAA: 7:1, or 4.5:1 for large text.
Non-text Contrast 1.4.11, level AA: 3:1 for controls, focus rings and the parts of icons and charts you need.
Large text is at least 18 point (about 24 px), or 14 point (about 18.66 px) when bold. Read on w3.org, 17 October 2026.
Colours are checked in your browser. Nothing is uploaded.
How the ratio works
Light against dark, measured.
02 / No rounding up
4.49 is not 4.5
WCAG treats the thresholds as exact, so the ratio here is cut, not rounded: a pair that shows 4.49:1 fails AA.
03 / Fixes
Same hue, new lightness
Suggested colours change only the lightness, in the OKLCH colour space, so a brand blue stays blue.
Questions
Good to know.
What contrast ratio do I need?
For WCAG AA, 4.5:1 for normal text and 3:1 for large text, buttons and icons. For AAA, 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
WCAG says at least 18 point, or 14 point bold. On the web that is about 24 px, or 18.66 px bold.
Does contrast matter for logos?
No. WCAG does not ask for any contrast on logos or brand names, or on text in a control that is switched off.
Can I check colours with transparency?
Yes. A see-through colour is checked as it looks on the background, and a see-through background as it looks on white.
Is #767676 on white enough?
Yes, just: it is 4.54:1, which passes AA for normal text. One step lighter, #777777, is 4.47:1 and fails.