A contrast ratio is how different two colors appear. Body text, links, and icons need enough contrast for people with low vision. Decorative fills can sit below those thresholds; text on a surface cannot.
What AA and AAA require
- Normal text: at least 4.5:1 for AA, 7:1 for AAA.
- Large text: at least 3:1 for AA, 4.5:1 for AAA (about 18px regular or 14px bold).
- UI components and graphics: at least 3:1 against adjacent colors for AA non-text contrast.
How to check in Palettebro
Open the WCAG contrast checker. It rates every pair in the current palette, not one swatch at a time. Use the WCAG 2.2 / WCAG 3.0 toggle when you want to compare scoring models — 2.2 is the ratio most teams still ship against; 3.0 is APCA-style and often stricter on light text.
Shade steps have their own grid on shade contrast. Check those if you use 50–950 scales for text on tinted backgrounds.
Common fixes
- Darken on-surface text or lighten the surface until the pair clears AA. Do that in the color palette generator so tokens stay in sync.
- Keep low-contrast hues for decorative containers, not body copy.
- Re-check hover, focus, and error states — not only the default pair.