How can you create color palettes that effectively balance accessibility, brand identity, and scalability?
There’s almost always a starting color
Contrary to some advice, designers rarely create palettes from scratch. Most often, we build on established brand guidelines.
Establishing light mode colors
Baseline color
Using the seed color directly is not always feasible because it may not meet accessibility requirements. Consider these popular brand colors that do not satisfy WCAG 2.1’s AA standards for regular text:
To ensure compliance with WCAG 2.1 guidelines, start by establishing a baseline color. Adjust the lightness of the seed color using a contrast tool until it meets the minimum requirements for regular text displayed against a white background. This baseline color will serve as the foundation for all other colors.
Canvas color
To identify this color, set the baseline color as the foreground and use white as the background in your contrast tool. Gradually increase the lightness of the foreground color until it reaches a 1.1:1 contrast ratio with the background — just enough to subtly suggest the color.
Default and subdued accent colors
Accent colors attract attention to actionable elements such as buttons and links. Two levels of contrast — default and subdued — help establish visual hierarchy.
- Default accent: Reduce the baseline’s lightness until it has a 1.7:1 contrast ratio against the baseline color.
- Subdued accent: Lower the alpha (opacity) of the default accent until it meets WCAG 2.1’s AA minimum contrast ratio for text against the canvas color.
Default and subuded neutral colors
Neutral colors serve as the default for most content, much like text printed on paper.
- Default neutral: Reduce the default accent’s lightness until it achieves a 1.3:1 contrast ratio against black.
- Subdued neutral: Lower the alpha of the default neutral until it meets WCAG 2.1’s AA contrast ratio against the canvas color.
Establishing dark mode colors
Baseline color
Dark mode typically requires lower saturation levels to reduce eye strain and enhance accessibility. Begin by decreasing the saturation of the light mode baseline by 33%. Next, adjust the lightness until it complies with WCAG 2.1’s minimum contrast standards for regular text displayed on a black background.
Canvas color
For simplicy, reuse the light mode’s default neutral color.
Default and subdued accent colors
In dark mode, invert the light mode formulas:
- Default accent: Increase the dark mode baseline’s lightness until it achieves a 1.7:1 contrast ratio against the baseline color.
- Subdued accent: Reduce the alpha of the default accent until it meets WCAG 2.1’s AA minimum contrast ratio against the canvas color.
Default and subdued neutral colors
Again, invert the light mode formulas:
- Default neutral: Increase the default accent’s lightness until it has a 1.3:1 contrast ratio against white.
- Subdued neutral: Lower the alpha of the default neutral until it meets WCAG 2.1’s AA contrast ratio against the canvas color.
APCA changes things
These colors were calculated using WCAG 2’s flawed contrast formula, which WCAG 3 aims to improve with the introduction of APCA. This new method will address the contrast formula flaws while also considering font size and weight to ensure sufficient readability. While I’m unsure how this will impact my approach, I’m eager to explore the changes when we cross that bridge.
