Designing for Color Accessibility: WCAG, Color Blindness, and Inclusive Palettes

The most common error in color accessibility practice is treating it as a final check rather than a design input. A palette built for visual appeal and then evaluated for contrast is almost always a palette that will fail — because the relationships between colors were never structured around legibility, only around aesthetic intent. The more effective approach is to treat minimum contrast ratios as a design system constraint that shapes choices from the beginning. WCAG 2.1 defines two contrast tiers: AA (4.5:1 for normal text, 3:1 for large text) and AAA (7:1 for normal text, 4.5:1 for large text). AA is the legal baseline in most jurisdictions; AAA is the target for critical content contexts like health information, legal documents, or education. The contrast ratio between any two colors is computed from their relative luminances — the formula is defined in the spec and computable from hex values. Every design system should have a contrast matrix that shows the WCAG rating for every text/background combination in the system. Color blindness simulation is more nuanced than most designers assume. Deuteranopia (red-green deficiency, affecting ~8% of males) is the most common variant, but protanopia (different red-green deficiency) and tritanopia (blue-yellow deficiency) also affect significant populations. Simulation tools like Chrome's vision deficiency emulation or Figma's accessibility plugins show approximately how your palette appears to users with each condition — but what they reveal is often not 'this color is invisible' but 'this distinction is ambiguous.' The design requirement is not necessarily that every color look identical to all users, but that every meaningful use of color also conveys information through a second channel: shape, label, pattern, position, or texture. Building an accessible palette from scratch means selecting primary semantic colors that satisfy contrast requirements before selecting aesthetic colors. Start with your text color and background color — these set the contrast baseline that everything else must work around. Select your primary interactive color (links, buttons, active states) to meet 3:1 contrast against all backgrounds it will appear on. Then select your semantic status colors (error, warning, success, info) to be distinguishable from each other without relying solely on hue — use value (lightness) differentiation as the primary distinguishing factor, with hue as a secondary cue.