Designing Accessible Color Palettes for WCAG 2.2
WCAG 2.2 makes color contrast stricter; here's how to build compliant palettes early.
12 April 2025
Color is one of the most common barriers in digital products. WCAG 2.2 tightens requirements for focus indicators, text contrast, and non-text components. Designing accessible palettes from the start prevents costly rework later.
Start with Contrast Ratios
Normal text needs a 4.5:1 contrast ratio against its background, while large text needs 3:1. UI components and focus indicators require 3:1 as well. Use contrast checkers during palette creation, not after final design.
Do Not Rely on Color Alone
Colorblind users and low-vision users need more than hue to interpret information. Pair color with icons, labels, patterns, or text. A success state should include a checkmark, not just a green shift.
Test Focus and Interactive States
WCAG 2.2 places new emphasis on focus appearance. Ensure focus rings are clearly visible, with sufficient size and contrast. Interactive states should be obvious to keyboard and screen reader users alike.
Accessible color is not a limitation; it is a design constraint that improves clarity for everyone. Build compliance into your palette system and test often.