Colour Contrast Checker
WCAG contrast ratios for foreground and background pairs, with what passes and what does not.
About this tool
Give it pairs of colours and it computes the WCAG contrast ratio for each, then says which level they meet.
This is the most common accessibility failure and among the easiest to fix, and it is invisible to whoever picked the colours — it reads fine on their screen, in their lighting, with their eyesight. The ratio is arithmetic, so there is nothing to argue about: 4.5:1 for body text, 3:1 for large text and for the visible parts of a control.
Grey placeholder text on white is the classic case. It usually lands around 2.5:1 and is genuinely unreadable for a large number of people.
Common questions
What ratio do I need?
4.5:1 for normal body text and 3:1 for large text, which means 18pt, or 14pt bold. Those are the AA thresholds, and AA is what almost every legal requirement points at. AAA asks for 7:1 and is rarely mandated.
Does this apply to more than text?
Yes. Since WCAG 2.1, the parts of a control that show its state and boundary need 3:1 too — a form field with a border you can barely see fails, even if its label is perfectly readable.
What about disabled buttons and logos?
Both are exempt. A disabled control has no contrast requirement, and neither does text that is part of a logo. Exempt does not mean invisible is fine, only that WCAG does not set a number.
Why does grey placeholder text keep failing?
Because it usually lands near 2.5:1. Placeholder text is real text with a real requirement, and it is often the only label a field has. If it fails, people cannot tell what the field wants.