WCAG 2.1 Help Blog
Color contrast for WCAG 2.1 AA: a practical guide
Contrast issues are one of the fastest ways to fail an audit. This guide helps designers and developers fix them quickly.
Know the baseline ratios
WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. UI components and graphical objects should also meet 3:1 against adjacent colors.
Large text generally means 18pt regular or 14pt bold. If you are unsure, default to the stricter 4.5:1.
Common contrast traps
The most frequent failures are light gray text, low-contrast links, and buttons with subtle borders.
- Placeholder text used as labels
- Links that only differ by color
- Disabled button states that drop below 3:1
- Chart colors that blend together
Design-friendly fixes
You do not need to redesign your brand. Adjust the text color, add a darker border, or increase font weight to meet contrast.
Create a contrast-safe palette in design tokens so future components inherit the right colors.