Choosing brand colors is enjoyable work. Discovering that the website uses them as a secret language is rather less enjoyable for the person trying to finish a form.
A red outline may mean something went wrong. A green one may mean everything is fine. If those are the only clues, some visitors will have difficulty telling the states apart.
We don’t necessarily need to throw away the palette. We need to decide which jobs color can do on its own and which deserve a little help.
Vitaly Friedman’s February 2024 colorblindness guidance makes this a timely design conversation.1 The practical principle is straightforward: important meaning should survive when someone perceives the colors differently.
Keep the brand, change how the information travels
A fictional booking page gives us a useful test. It uses brand colors for available dates, selected dates and dates that cannot be booked.
We could try to find a perfect set of hues. A more dependable starting point is giving the states other recognizable differences.
Labels and shapes can share the work
A selected date might have a clear border or marker as well as a color change. An unavailable option can carry an understandable label. A validation message should explain the problem, rather than leaving the person to interpret a differently colored box.
For a chart, direct labels and different line treatments may help distinguish series. A legend made entirely of colored dots can be difficult to use if those dots don’t look sufficiently different.
This also benefits someone viewing the site in bright sunlight or on an unfamiliar display. We don’t all meet the interface under the conditions in which it was approved.
The aim is redundant communication. That sounds terribly technical for allowing the words to help the colors, but there we are.
See the brand and website we built for Tracy Nagle Immigration Law, from a standing start.
Text contrast is a separate check
WCAG’s Contrast (Minimum) criterion generally requires a ratio of at least 4.5:1 for normal text and 3:1 for qualifying large text, with specified exceptions.
Those ratios concern text against its background. Passing them doesn’t prove that several colored status indicators are distinguishable from one another.
A brand accent might work well for a large graphic and poorly for small text. Give it the role it can perform successfully. There is no shame in letting a darker supporting color handle the sentence.
Kelley Gordon’s visual-design guidance also places contrast alongside scale and grouping.3 We have several ways to communicate importance. The palette doesn’t need to arrive at every meeting carrying the entire agenda.
Pairs well with Designing a dark mode that still feels like your brand.
Choose a review that matches the component
Zulu Shack recommends checking the actual controls and content, rather than only the swatches in a brand document.
For the booking page, the review might include:
- Availability, selection and unavailable states with understandable noncolor cues.
- Error messages that identify the issue and explain the next step.
- Text contrast on each background actually used.
- Keyboard focus that remains visible across those states.
- Chart or status labels that do not require remembering a color.
What can a simulation tell us?
Grayscale and color-vision simulations can expose likely problems. They are useful prompts to investigate, not proof that every person will experience the page the same way.
Color-vision differences vary. Test the tasks with relevant users where possible and include keyboard behavior and readability in the wider review.
For example, removing all hue may reveal that a selected state has no other signal. That is actionable. It doesn’t mean a grayscale preview represents every color-vision condition.
Make the smallest change that resolves the communication problem, then check the whole component again. Perhaps a label, stronger text color and selected marker are enough. Perhaps the palette needs a broader adjustment.
Your brand can still have character. The visitor should simply be able to tell whether the date is booked without having to guess what shade of confidence it is.