accessible color palette · WCAG 2.2 · contrast · redundant cues
How to create an accessible color palette
Turn brand colors into named interface roles, test the pairs that actually touch, preserve visible focus and state cues, and use simulation as a review aid rather than a substitute for contrast checks or user feedback.
accessible color palette
What makes a color palette accessible?
An accessible color palette is a role-based set of colors whose real foreground, background, control, focus, and chart combinations are tested for their intended use. For WCAG 2.2 Level AA, normal text generally needs at least 4.5:1 contrast, large text needs 3:1, and visual information required to identify active controls or meaningful graphics needs 3:1 against adjacent colors. Color must not be the only cue for meaning. A palette becomes useful when each token has a job, each required pair passes its threshold without rounding, and errors, selections, links, and charts also have text, shape, pattern, or position cues.
Four rules for an accessible color palette
- accessible color palette: assign semantic roles such as canvas, surface, primary text, accent, border, focus, success, warning, and error before approving individual swatches
- accessible color palette: measure every foreground against the background it actually touches, including hover, focus, selected, overlay, and dark-theme states
- accessible color palette: treat 4.5:1 and 3:1 as minimum thresholds rather than rounded targets, and leave practical headroom for thin type and real displays
- accessible color palette: repeat meaning with labels, icons, underlines, shapes, patterns, or position so a hue difference is never the only instruction
accessible color palette: WCAG 2.2 color checks by interface role
| Interface use | Pair to measure | Level AA target | Practical note |
|---|---|---|---|
| Normal text · accessible color palette | text against its rendered background | at least 4.5:1 | 4.499:1 does not round up to a pass |
| Large text · accessible color palette | large text against its rendered background | at least 3:1 | large scale is at least 18 pt regular or 14 pt bold, with equivalent sizing for CJK fonts |
| Active controls and meaningful graphics · accessible color palette | required visual cue against adjacent colors | at least 3:1 | test boundaries, icons, focus indicators, selected states, and data marks when they carry meaning |
| Color-coded information · accessible color palette | meaning in addition to the hue difference | a visible non-color cue | add text, shape, pattern, underline, icon, or position even when the colors also have strong contrast |
accessible color palette: Start with roles, not a tray of favorite swatches
A brand palette describes identity; an accessible color palette describes decisions. Begin with a small inventory of jobs: page canvas, raised surface, primary and secondary text, link, accent, border, focus ring, disabled treatment, and semantic feedback. Give each role a stable token instead of scattering literal HEX values through components. Then write down which roles can touch. Primary text may appear on the canvas and on a card; accent text may appear on an accent background; an error border may sit against both a field and the page. This adjacency map prevents the common mistake of checking every swatch against white while the shipped interface uses tinted panels, gradients, images, transparency, and dark mode. One swatch may remain in the brand library yet be restricted to decoration because it cannot safely perform a text or control role.
accessible color palette: Build a pair matrix for text, controls, and states
Test combinations, not isolated colors. For text, record foreground, rendered background, font size, weight, and state. For controls, include the visual information needed to find the component and understand focus, checked, selected, expanded, invalid, and hover states. WCAG does not require inactive controls to meet the active-component contrast rule, but a product can still keep disabled content readable and recognizable. Measure overlays after alpha compositing, and sample the worst credible point when text sits on an image or gradient. Save results beside the tokens so a later theme change cannot quietly break the accessible color palette. A simple matrix also exposes unnecessary variants: if two secondary grays do the same job but only one passes on every surface, the safer system is usually the smaller one.
accessible color palette: Separate luminance contrast from color-coded meaning
Contrast and use of color answer different questions. A green success chip can have excellent text contrast and still fail to communicate if green alone distinguishes it from a red error chip. Keep the color, then add a word, icon, pattern, or structural difference that survives grayscale and altered color perception. Links inside paragraphs benefit from underlines rather than a subtle hue shift alone. Charts need direct labels, distinct marker shapes, line styles, or patterns when series identification matters. Focus should remain visible without depending on a color name. Complementary or widely separated hues are not automatically accessible because color-wheel distance does not guarantee relative-luminance contrast, and it does not create a second cue. An accessible color palette supports meaning, but content and component design must complete the communication.
Accessible color palette release checklist
- accessible color palette: name every swatch by semantic role and document the surfaces or states where that role is allowed
- accessible color palette: measure normal text at 4.5:1 or better and large text at 3:1 or better against the rendered background
- accessible color palette: measure required active-control boundaries, focus cues, state indicators, and meaningful graphics at 3:1 against adjacent colors
- accessible color palette: check default, hover, focus, active, selected, invalid, disabled, overlay, dark-theme, and high-zoom presentations
- accessible color palette: add a visible label, shape, icon, pattern, underline, or position cue whenever color communicates status or identity
- accessible color palette: store the pair matrix, tool result, component version, and review date so later changes can be retested
accessible color palette: Create and verify the palette in four steps
accessible color palette: 1. Inventory roles
accessible color palette: list every text, surface, border, control, focus, data, and feedback role, then note which roles touch in each theme and state.
accessible color palette: 2. Generate candidates
accessible color palette: use the harmony tool to explore coherent options, but keep brand preference separate from the contrast and communication gates.
accessible color palette: 3. Measure the matrix
accessible color palette: check the actual foreground and adjacent-background pairs without rounding; replace or restrict any token that misses its assigned threshold.
accessible color palette: 4. Review complete states
accessible color palette: simulate representative color-vision differences, inspect grayscale and keyboard focus, and test real components with content at desktop and mobile widths.
accessible color palette: What WCAG 2.2 actually establishes
- accessible color palette: Success Criterion 1.4.3 sets 4.5:1 for normal text and 3:1 for large text at Level AA, defines large scale as at least 18 pt regular or 14 pt bold, and says threshold values must not be rounded. Read W3C Understanding SC 1.4.3
- accessible color palette: Success Criterion 1.4.11 requires at least 3:1 against adjacent colors for visual information needed to identify active user-interface components, states, and meaningful graphical objects. Read W3C Understanding SC 1.4.11
- accessible color palette: Success Criterion 1.4.1 requires a visible alternative when color conveys information, action, response, or distinction; even a 3:1 hue pair still needs another indicator when exact color recognition carries the meaning. Read W3C Understanding SC 1.4.1
“Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”
Accessible color palette questions
Must every color in the palette contrast with every other color?
accessible color palette: No. Test the pairs that are intended to touch and the roles they perform. Primary text may need to pass on several surfaces, while a decorative accent may never carry text or identify a control. Document restrictions so a token is not reused in an untested relationship. A pair matrix is more accurate than labeling individual swatches compliant or noncompliant.
Are complementary colors automatically accessible?
accessible color palette: No. Opposite positions on a color wheel describe a hue relationship, not a WCAG contrast result. Two vivid complementary colors can have similar relative luminance, create difficult text, or collapse for some color-vision differences. Use harmony to generate candidates, then test luminance contrast and provide non-color cues for meaning.
Does a color-blindness simulator prove WCAG compliance?
accessible color palette: No. Simulation is a useful review lens, not a diagnosis, conformance calculation, or substitute for disabled users. Use a deterministic contrast checker for required pairs, inspect redundant cues and complete component states, and include expert or user evaluation when the product risk justifies it.