Check text and background colours against WCAG AA and AAA contrast levels.
The ratio runs from 1:1 (no contrast) to 21:1 (black on white). WCAG level AA asks for at least 4.5:1 for normal text and 3:1 for large text, meaning 24px and up, or about 18.7px and up in bold. Level AAA asks for 7:1 and 4.5:1. Icons, input borders and other parts of the interface you need to see need 3:1 against what's next to them.
The ratio is rounded down, never up, as the guidelines say, so 4.49:1 shows as 4.49 and fails AA instead of looking like 4.5.
Low contrast is one of the most common accessibility problems on the web. It affects people with low vision and colour blindness, but also anyone reading a phone in sunlight. AA is the level most laws and accessibility policies refer to; AAA is a stricter target for long reading. Light grey text on white is the classic failure, so check placeholder and caption colours too.
At least 4.5:1 for normal text and 3:1 for large text to meet WCAG AA.
24px or larger at regular weight, or about 18.7px (14pt) or larger in bold.
No. The text contrast thresholds are the same in WCAG 2.0, 2.1 and 2.2.
Not directly. Work out the solid colour it shows on your background first, then check that.
OneClickly is a set of 119 free tools for PDFs, images, text, everyday math and code. They run in your browser, so the files and text you work with stay on your device.