Building Accessible Color Palettes
Tools and workflows for 4.5:1 contrast on body text and accessible state colors.
Nestlancer Editorial
Brand palettes fail accessibility when marketing primaries become default button backgrounds without contrast checking against white text.
Workflow
- Define brand hues in OKLCH for perceptual uniformity
- Generate 9-step scales per hue (50–900)
- Validate 4.5:1 for text pairs and 3:1 for UI components
- Document approved combinations—not free combination
Tools
- APCA contrast for modern guidance
- Stark or Contrast Checker plugins in Figma
- Storybook a11y on component states (hover, disabled)
State colors
| State | Requirement |
|---|---|
| Error | Icon + text, not color alone |
| Success | Distinguishable for deuteranopia |
| Disabled | Not only lower opacity—add pattern or label |
Dark mode pairs
Each light pairing needs dark equivalent—do not reuse same hex on #000.
Accessible palettes are constraints that spark creativity—limited approved pairs speed design decisions.
Comments
Loading comments…
Related posts
Design
Brand Identity for Digital-First Products
Logo systems, voice, and visual language that survive app icons and social crops.
Design
Design Ops for Growing Product Teams
Rituals, tooling, and intake processes that keep design shipping with engineering.
Design
Inclusive Design Beyond Compliance Checklists
Cognitive accessibility, plain language, and trauma-informed patterns.
Design
Data Visualization UX for Dashboards
Chart selection, color semantics, and drill-down patterns for decision makers.