Contrast ratio compares the brightness of text with its background, from 1:1 (identical) to 21:1 (black on white). The Web Content Accessibility Guidelines set minimums so text stays readable for people with low vision.
The numbers to remember
- 4.5:1 for normal text (AA level).
- 3:1 for large text and interface components.
- 7:1 for the stricter AAA level.
Fixing a failing pair
Darken the text or lighten the background a little and test again. Our contrast checker shows the ratio and pass or fail for each level instantly.
Need the same color in another format? Convert between HEX, RGB and HSL with the color converter, or build matching shades with the palette generator.