Colour contrast checker
- 47 tools
- No watermark
- No daily limit
Put in two colours and see the ratio, the verdict at every size the rules distinguish, and the pair rendered so you can judge it with your eyes as well as with a number. Ordinary text needs 4.5 to 1; large text needs only 3, and large means 24 pixels or 18.66 when bold, which is the line most people get wrong. When a pair fails you get the nearest colour that would pass, found by moving lightness alone so the result still belongs to the palette it came from.
Put in the two colours and the answer appears as you type. Nothing has to be pressed.
Your two colours, at the three sizes the rules treat differently
Body text at sixteen pixels, which is what most of a page is made of.
Large text, 24px
Large bold, 19px
Colours that would pass, keeping the same hue
Frequently asked questions
Are my colours sent anywhere?
No. The arithmetic runs in this tab as you type. The site’s security policy sets connect-src ‘none’, so the browser blocks network requests from these pages, meaning nothing could be sent even if the code tried.
Where do 4.5 and 3 come from?
They are the thresholds in WCAG 1.4.3, which is the level almost all accessibility work is held to and what most laws point at. 4.5 to 1 is ordinary text. Large text needs only 3, because bigger letterforms survive lower contrast. AAA, which is 1.4.6, raises those to 7 and 4.5 and is worth aiming at for anything people read for a long time.
What counts as large text?
24 pixels, or 18.66 pixels when the text is bold. That second number looks arbitrary and is not: the rule is written in points, 14pt bold, and 14pt is 18.66px. It is the line people most often get wrong, usually by assuming a heading is automatically large when it is set at 18px and it is not.
What is the 3 to 1 line about borders and icons?
WCAG 1.4.11, added in 2018, covers everything that is not text but still carries meaning: the border of a text field, an icon that is the only label on a button, the ring that shows what has keyboard focus, a line on a chart. It needs 3 to 1 against what is next to it. Most checkers do not mention it, and it is the most commonly missed requirement on otherwise careful sites.
How is the suggested colour worked out?
By moving lightness and leaving hue and saturation alone, in both directions, and keeping whichever move is smaller. That matters because a suggestion in a different colour is not a suggestion anybody will take: a brand blue that fails needs to become a darker brand blue, not a grey. If no lightness of that hue can reach the target, the page says so rather than offering something that does not work.
Why does it refuse colours with transparency?
Because a semi-transparent colour has no contrast of its own. What it looks like depends on everything painted behind it, which this page cannot know. A checker that quietly composites it against white is inventing an answer that will be wrong on any other background, so this asks for the colour it ends up looking like instead.