Reapproaching colors in a more inclusive way
How we tackled accessibility in our color scheme at Getaround
At Getaround, we’re on a mission to make cities more liveable while having a positive impact on the environment. We are also in a mission to have a product that is usable for all, so we knew we had to care about accessibility in our color choices to be more inclusive.
As part 2 of our 3-part series on Semantic Colors, we’ll be diving into how our Design team uses our new color system as an opportunity to create a more inclusive experience. Part 1 looked at how we implemented Semantic Colors — if you missed this, you can read the post here.
This is the second post of a 3-articles series.
Follow Inside Getaround to be alerted when we publish the next posts.
So here is our story and how we re-approached colors in a more inclusive way, including learnings and challenges in our process of building a more accessible color scheme at Getaround.
Discovery.
Our existing color palette was carefully chosen to compliment our unique branding, so it was very important to follow the brand guidelines we had already established.
Although the team and our users love our branding colors, it was not until we ran accessibility checks that we learned that a few of our color combinations had readability issues. Ouch.
While we were assessing our existing palette and exploring new possibilities to revamp colors in our design system called Cobalt we asked ourselves:
How can we mitigate readability issues ensuring we follow our brand guidelines while keeping accessibility at the forefront?
Resources.
There are many great resources about designing an accessible color scheme and one of our first steps started by giving a damn about accessibility. This guide presents a candid take on the topic and helped us understand that true accessibility is a process improvement that never comes to an end. It was particularly helpful for not feeling overwhelmed and better accept the fact that no one starts a new skill at the expert-level. We have to start somewhere, right?
It was also helpful to follow Google’s Material Design and Apple’s Human Interface Guidelines recommendations on color accessibility — both feature great content with lots of insights to keep in mind.
And then for a dive deep with an exhaustive list of accessibility resources, the Accessibility Resource Center is pure gold. This one will stay forever on my bookmarks!
Was I an expert when we first started? Nope. But we didn’t use this as an excuse not to make our color combinations more readable and accessible. Again, we have to start somewhere. And so we did.
Design.
A lot of thought and care went into choosing our product’s color palette — kudos to all of our talented designers!
Our iconic purple, featured in our product, branding and everything Getaround related, is our main Accent color in our Semantic colors system, as explained in our first post about Semantic colors. We knew we had to keep our brand guidelines in mind during this process.
There are many handy tools out there when it comes to color accessibility checks. We found the tool EightShapes Constrast Grid to be quite handy to quickly calculate the contrast ratio of our existing color scheme against all of our possible backgrounds.
After running color accessibility checks, we realized that some color combinations were not WCAG AA compliant. In other words, some combinations didn’t provide enough contrast between foreground and background for our content to be readable and compliant. Meeting AA compliance, our product is considered usable and understandable for the majority of people with or without disabilities.
Using the Constrast Grid tool, we input in the columns HEX code values for our Text, Icon, Stroke, ButtonIcon and ButtonLabel (all of our content). In the rows, all of our background values.
As a result, we have a visual representation that cross-check columns (content) and rows (background) by displaying either:
- AAA, AA or AA18, which passes on accessibility standards
- DNP, which fails on accessibility standards
The tool also displays the contrast ratio, and anything below 3.0 does not pass on accessibility standards.
Thanks to accessibility checks like this, we were able to identify which colors we needed to tweak. For instance, the table above shows that our text color “InfoAlt” #FFC766 failed the accessibility check behind a light background #FFFFFF. The label in red DNP indicated that it does not pass accessibility with low contrast ratio of 1.5.
We used the tool Colorable to explore possibilities: by inputting our existing share of yellow #FFC766 behind a light Background #FFFFFF, we confirmed that this combination failed on the accessibility check because of a low contrast ratio of 1.5. Still on Colorable, we can easily tweak Saturation and Lightness to achieve AA standards as shown below:
By adjusting the color’s hue and and brightness we introduced a new, accessible yellow shade to be used behind a light background: #C58920.
This new shade of yellow behind a light background had a contrast ratio of 3.01, which is enough to pass WCAG’s AA standard. In practice, some notable requirements to pass AA standards are:
- Color contrast is, for most text, at least 4.5:1
- For large text (defined as 18-point or 14-point bold fonts) and all important visual elements, maintain a minimum contrast ratio of 3:1
After ensuring the contrast ratio of our colors combinations had enough contrast based on their usage, our Color Palette was then validated and AA compliant (A lowest, AA mid-range, and AAA highest standards).
We were then ready to apply the new, accessible colors to our Semantic Colors scheme and see the new color values updated in our Design System’s components, as shown in the example below:
At this point, everything was looking good on a design level: our colors were referenced in our Semantic Colors scheme and successfully applied across our Design System, improving the accessibility of our product.
It was then time to document our findings, so we can guide and empower designers to use only the combinations we knew were accessible.
Documentation.
With our new AA compliant Semantic colors system added to our Design System, Cobalt, it was important to ensure folks could find which color combinations are possible when using our product colors.
With the goal to prevent deviation and help maintain our system for both engineers and designers, our Design system’s Product Owner Fabien Gavinet built a tool that works as an interactive guide that lists all the possible (and accessible) color combinations:
Created 100% on Figma, the tool enables anyone to select a Semantic value to see what are the combinations available, while staying color contrast compliant.
It’s that simple: you land on the existing Semantic values table, make a selection and see what options are available for you to pair with.
The Semantic Colors Guidelines Tool is a strong first step to ensure Getaround experiences stay color contrast compliant. If you’d like us to share the tool with you, let us know in the comments!
Next steps.
The implementation of the Semantic colors gave us a simple yet scalable color system, while helping us to better align our inclusive, global vision with a more accessible product.
Thanks to the Semantic colors our color scheme has improved guidelines, guiding and empowering designers to make visual language decisions that deliver a more accessible experience.
We now have an easy to use, accessible Semantic Colors system built thanks to a joint effort of our Design System squad Cobalt, the rest of the Design team, the Brand team and our developers. Accessibility checks to ensure we stay compliant are now part of our framework in any color exploration.
It also leaves us with a neat framework so we can continue accounting for accessibility in our product. Because even if it was a first step we took — we had to start somewhere.
🍭 Check out the Part 1 of this series Colors that make sense: A walk through our journey with semantic colors
🌚 Part 3 of this series is coming soon, follow Inside Getaround to be notified when it’s out!
Thanks
Big thanks to the Design and Brand teams 💜
Like the sound of product design at Getaround? Got plenty of ideas on how to make our product better? We’d love to hear from you. Take a look at our vacancies.
Your own experience tackling accessibility
Did you also start giving a damn about accessibility? Anything worth sharing about your journey with Semantic Colors or accessibility? Let us know in the comments below.
And if you liked this topic, give this article a few claps 👏 — it helps us pinpoint the most interesting topics to talk about next.
