Accessibility guide
What does a 4.5:1 contrast ratio mean?
A contrast ratio compares the relative brightness of two colors. For normal-sized text, WCAG 2.1 Level AA commonly uses a minimum contrast ratio of 4.5:1.
Common text thresholds
- AA normal text: 4.5:1
- AA large text: 3:1
- AAA normal text: 7:1
- AAA large text: 4.5:1
What that means in practice
If a foreground text color and its background produce a ratio below the applicable threshold, change one or both colors until the combination passes. Do not judge readability by appearance alone.
Contrast is only one part of accessibility, but it is an easy thing to test before shipping a page, app screen, graphic or component.