Accessibility

WCAG 2.2 for Color: What Changed and What You Need to Know

WCAG 2.2 was published as a W3C Recommendation in October 2023, updating the previous 2.1 standard. While most of the changes relate to motor accessibility and cognitive accessibility, several new success criteria have direct implications for color design.

Focus Appearance (2.4.11 - AA)

This new criterion requires that keyboard focus indicators meet specific size and contrast requirements. The focus indicator must have a contrast ratio of at least 3:1 against the unfocused state of the component AND against adjacent colors. This means your focus ring color needs to be carefully chosen from your palette.

Impact on Your Palette

Your palette needs a dedicated focus indicator color that passes 3:1 contrast against both your background colors AND against the default state of interactive elements. Your primary brand color often works, but you need to verify. If your primary is a medium blue and your buttons are also blue, the focus ring around a blue button may not have 3:1 contrast against the button itself.

Target Size (2.5.8 - AA)

While primarily about size (24x24 CSS pixels minimum), target size interacts with color when visual indicators of interactive elements are small. If a small interactive element is the same color as surrounding non-interactive elements, users may not identify it as a target. Color differentiation supports discoverability even when the size requirement is met.

Dragging Movements (2.5.7 - AA)

Any functionality that uses dragging must have a single-pointer alternative. PaletteRx's drag-to-assign-roles feature, for instance, provides click-based alternatives for accessibility compliance.

📘 Action item: Open PaletteRx Step 3 and check your planned focus indicator color against both your light base AND your primary button color. Both pairs need 3:1 or better. If either fails, adjust the focus color or switch to a high-contrast alternative like a black-and-white double ring.

Ready to Build Your Palette?

PaletteRx guides you from color selection to accessible, export-ready design systems in minutes.

🎨 Launch PaletteRx