How to Pick Accessible Colors: A Step-by-Step Workflow
Picking colors that look great and pass accessibility standards doesn’t have to be a chore. Here is the exact workflow we use to build inclusive design systems.
Why Accessibility First?
Accessibility is not a final polish you apply to a finished design; it is the foundation. When you pick colors that pass WCAG (Web Content Accessibility Guidelines) and APCA (Accessible Perceptual Contrast Algorithm) standards, you ensure that everyone—regardless of their vision—can use your product effectively.
Step 1: Define Your Canvas Neutrals
The most important contrast ratio is between your background and your body text. Don't start with the brand "hero" color. Start with your Paper (background) and Ink (text). For a standard light mode, a pure white (#ffffff) or slightly off-white (#fafafc) works best. For text, avoid pure black (#000000) as it can cause eye strain on high-contrast screens; aim for a very dark gray (e.g., #0b0b10).
Step 2: Choose a Dominant Brand Color
Once your neutrals are set, pick your primary brand color. When choosing this hue, consider its "Luminance." If your brand color is a bright yellow, it will pass contrast on dark backgrounds but fail on white. If it's a deep blue, it's the opposite. Use our Contrast Checker to find a "Goldilocks" version of your hue—one that is vibrant but still legible.
Step 3: Generate the Semantic Scale
Every interface needs colors for Success, Warning, and Error. The mistake most designers make is picking random greens and reds. Instead, generate these from a consistent OKLCH scale so they share the same perceived brightness. This ensures that a success banner doesn't look "louder" than an error banner.
Step 4: The Grayscale Test
A "God Mode" tip for accessibility: turn your design to grayscale. If you can still tell the difference between your primary button and the background, your contrast is strong. If everything blends into a single gray soup, you are relying too much on hue and not enough on value.
Step 5: Document with Design Tokens
Finally, don't just hand over hex codes. Use Design Tokens. Instead of saying "use #7c5cff," say "use --brand-primary." This allows you to adjust the color for accessibility later without needing to redesign the whole app. You can export these directly from our Design Tokens tool.
By following this workflow, you aren't just making a "compliant" site—you're making a better, more professional product for everyone.