Contrast ratio measures the difference in luminance between the text color and the background color. 1:1 means no difference at all; 21:1 means black on white.
The ratios WCAG requires
- Normal text: at least 4.5:1 (AA).
- Large text: at least 3:1. Large text means 18 point and above, or 14 point and above in bold.
- User interface components: Button borders, form fields and icons need at least 3:1 against their surroundings.
- AAA: 7:1 for normal text, 4.5:1 for large text.
Common mistakes
Light gray placeholder text, text placed over photos and links set in a light tint of the brand color are the most common problems. Check your colors with a contrast checker when you choose them.