Coforma Design Focus: An Accessible Color Palette
Co-authored by Kate Murphy
Our Coforma Design Focus blog series provides an inside look at the design phases that led to the new Coforma brand. When building our new website, we not only selected a color palette that was representative of our company, but also pushed ourselves to prioritize accessibility and craft color usage guidelines that benefit the most users.
The new Coforma brand is our definition of a truly welcoming look and feel; its color palette and design elements are not only friendly on the surface, but also honed to meet a variety of accessibility standards. From color palette selection, to the use of plain language, to keyboard navigation support, we’ve created a brand identity, design system, and website that meets a wide variety of accessibility standards. This post focuses on how we developed an accessible color palette, but be sure to look out for the companion piece, “Coforma Design Focus: An Accessible Website Design,” to see how our new color palette was paired with a variety of design elements to forge a widely accessible website.
Selecting Our Base Color Palette
To build a color palette for the Coforma brand, we were given this criteria for what our brand colors should accomplish:
- Demonstrate our brand attributes by striking a balance between playful and trustworthy, cutting edge and human; convey that we are bold and progressive, while setting a welcoming and open tone.
- Stand out among competitors to ensure our differentiation and unique placement in the market.
- Pass accessibility color contrast tests wherever the colors are used.
Conveying abstract concepts through color is a difficult task. There are countless websites that describe the meanings of colors in design — it’s a pseudoscience at best. Red can mean anger or luck or human (because of blood, we think?) and blue means trust and green means environmentally friendly, or maybe “go,” but definitely money. It’s not a very helpful place to start. The context in which the color sits changes how someone processes it visually, and the tone of the color changes how it makes them feel.
For example, all of these blues say different things:
Pairing any one of these blues with different background colors or next to other colors changes the mood they might impress upon the viewer.
To find a color palette that communicated our targeted ideas, we had to move beyond the meaning, test initial colors in different scenarios, gut-check ourselves, and ask around for feedback once we felt we were on the right path.
We also surveyed other brands in our space and eliminated colors that were already heavily used. Here’s a snapshot of the colors we pulled from similar brands in the civic tech space:
This process helped us focus on some less-trodden color terrain. We crafted a number of color palettes, discussed, refined, and down selected.
We found ourselves drawn to a rainbow palette. Our brand is bright and welcoming, just like the people who work here. With this, our colorful and diverse palette is representative of who we are as unique, creative individuals who come together to form a diverse but cohesive collective.
The rainbow color palette speaks to our full spectrum of allyship: we design for all experiences.
It also gives us an expansive toolkit for creative (but consistent) brand design.
In addition, we knew we would have a few programs acting as sub-brands. A Coforma program is an extension of our expertise, mission, and culture that aims to serve the needs of an issue area that’s near to our hearts. We have already launched Health+ (“health plus”), a program that utilizes human-centered design research to better understand a high-impact health issue placed in focus, and we have additional programs in the pipeline. The rainbow gives us flexibility to build sub-brand universes that work well with Coforma’s visual identity. We’re using the green palette for Health+ and have a red and blue palette reserved for additional programming. We sometimes refer to these as spokes, where Coforma is the hub.
Adjusting for Color Contrast & Accessibility
Strong contrast between colors is important for ease of readability. For example, it helps ensure content is accessible for users on screens with different levels of brightness, those with eye strain at the end of a long day, and colorblind users. Before putting a seal of approval on our palette, our Chief Experience Officer insisted that we test every color combination for contrast and accessibility. This process showed us which colors could be layered over others and which combinations wouldn’t pass accessibility standards.
It’s estimated that about 300 million people globally are affected by color blindness.
Knowing how common color-based vision deficiencies can be, let alone other visual impairments, it was important to make sure that this sizable group of folks could see the colors, text, and shapes we share through the Coforma brand. The image below illustrates the way some combinations of colors layered over one another would obscure or render the text or design illegible for green-blind users.
We used the results of this testing phase to develop guidelines around color usage, maximizing accessibility for the greatest number of users. For example, we use blue-5 and shades of gray for links, buttons, and subheadings on a white background. Any color that ends in *-3 is used only for icons.
Here are a few resources for testing accessibility:
- https://www.color-blindness.com/coblis-color-blindness-simulator/
- https://www.w3.org/TR/mobile-accessibility-mapping/#contrast (Note: though it contains valuable information, we can’t vouch for the line length on the above website. More on that in our next design focus piece!)
- https://webaim.org/resources/contrastchecker/
One design hack we’re particularly proud of: we documented each color’s level of contrast against light and dark backgrounds. Then, we used that contrast score to name each color in our design system, creating a quick cheat for designers.
In an upcoming companion Coforma Design Focus post, we’ll provide an inside look at how we leveraged our color palette in a series of design elements that led to Coforma’s new, accessible website. Stay tuned! Meanwhile, you can learn about our new name and logo or how we selected our fonts and typefaces.
