Contrast checker
Pick a text colour and a background colour to get their WCAG contrast ratio, with a pass or fail for AA and AAA. Every shade of the scale is checked against your second colour too, so you can see which steps are safe.
Free, no sign-up. Runs in your browser. Nothing you type or upload is sent to us or stored.
At a glance
- Large text means
- At least 18 point, or 14 point bold (about 24px, or 18.7px bold)
- Source: w3.org, checked 2026-11
- UI parts and graphics (buttons' edges, icons, chart lines)
- 3:1 or more against what's next to them
- Source: w3.org, checked 2026-11
- Lightest grey that passes AA on white
- #767676 (4.54:1); #777777 is 4.47:1 and fails
- This page's starting pair
- #2563eb on #f8fafc: 4.93:1 (AA)
Give your page these colours
A Liite page comes with 15 themes, from sunset to midnight, and your own colours on top. Pick the one closest to your palette and your link-in-bio page is ready in a few minutes.
Contrast checker: what to know
This page starts the colour palette generator for this case. For every option and how to use it, see the colour palette generator.
How the ratio is worked out
WCAG compares the relative luminance of the two colours, a measure of how bright each looks with green weighted most and blue least. The ratio runs from 1:1 (identical colours) to 21:1 (black on white). The order doesn't matter: dark on light and light on dark give the same number.
Ratios are compared without rounding up. 4.49:1 fails AA even though it looks close; the tool rounds down so it never shows a pass that isn't one.
Text on images
A photo has many colours, so there isn't one ratio. Drop the image into the palette tool to pull out its main colours, then check your text colour against the lightest one that sits behind the words. If it fails, add a dark overlay or move the text.
Questions
What contrast ratio do I need for WCAG AA?
4.5:1 for normal text, 3:1 for large text (18pt, or 14pt bold) and 3:1 for icons, input borders and other UI parts.
How can I check the contrast of a color online?
Enter your two colours above. The ratio and AA/AAA result show at once, and every shade of the first colour is checked against the second, so you can pick a step that passes.
Does contrast matter for logos?
No. WCAG makes an exception for text that's part of a logo or brand name, and for purely decorative text.