The Web Content Accessibility Guidelines (WCAG) are an international standard published by the W3C that defines how to make web content accessible to people with disabilities. For designers, the color-relevant sections are specific, measurable, and not as complicated as the documentation makes them seem.
The Four Principles (POUR)
Perceivable: Users must be able to see or hear content. For color: sufficient contrast, not relying on color alone. Operable: Users must be able to interact with controls. For color: visible WCAG 2.2 Compliant Focus Indicators with Your Palette">focus indicators. Understandable: Content must be clear. For color: consistent color meaning. Robust: Content must work with assistive technology. Less color-specific but affected by proper HTML structure.
The Color-Specific Requirements
SC 1.4.1 Use of Color: Color cannot be the only way to convey information. If a form field turns red on error, it also needs an error icon and text message. SC 1.4.3 Contrast (Minimum): Text needs 4.5:1 contrast against its background (normal text) or 3:1 (large text). SC 1.4.11 Non-text Contrast: UI components and graphical objects need 3:1 contrast against adjacent colors.
WCAG 2.2 Additions
The newest version adds focus indicator requirements. Focus indicators must have sufficient size (at least 2px outline) and contrast (3:1 against both the focused component and the adjacent background). This directly affects your choice of focus indicator color.
What This Means Practically
Build your palette so every text color has at least 4.5:1 contrast against its intended background. Ensure every interactive element has a visible, high-contrast focus state. Never use color as the only indicator of status, errors, or required fields. PaletteRx's Step 3 validates the contrast requirements automatically.