Contrast checker
Pick a text colour and a background colour. You get the WCAG contrast ratio, and whether the pair passes for normal text, large text and interface parts.
Try a pair
Contrast ratio
0:1
- Normal text, AAneeds 4.5:1
- Normal text, AAAneeds 7:1
- Large text, AAneeds 3:1
- Large text, AAAneeds 4.5:1
- Icons and controls, AAneeds 3:1
Large text means 24px or bigger, or 19px or bigger in bold.
Large text, 24px and up
Normal text is anything smaller. The quick brown fox jumps over the lazy dog, and the contrast between these words and their background decides whether people can read them.
An icon or control