In the middle of 2020, I started a new role, contributing to the Interact Design system.
Background
We received feedback from a colorblind PM that he can’t tell the differences between the ink blue 100 and the purple 100 in the Interact design system when they were applied together on a chart.
There had been colors defined especially for data visualization, but no detailed rules. My task was to solve the problem for the colorblind and create guidelines in the Interact design system.
Desk research and interview
In the beginning, I tried to refine the colors to solve the problem. But it was almost impossible to totally avoid the problem just by changing colors. Because there are 4 types of colorblindness. The problem could be avoided for this type, then the new color might not cover another type. I realized that the problem was not the colors. I interviewed the PM and we had a few discussions. I checked quite a few articles about color blindness. I would like to know more about colorblind people, what the colors look like from their view, what the common problems are in their daily life, etc.
One of the breakthroughs is that they are usually more sensitive to brightness, which means in a graph, different brightness of one color is more friendly compared to different colors with the same brightness. As a consequence, it becomes critical to guide designers on how to pick up the colors. There should be more detailed guidance and examples documented.
There have been color filters provided on all platforms, iOS, macOS, Andriod, Windows, etc to help the colorblind in the digital world. The problem is not all colorblind people know they could have this assistance on their phones or PCs. It would be really helpful for them if we just spend a little more time carefully picking up the colors or using at least 2 visual indicators.
Accessibility is a big topic and easily to be overlooked. Monitoring is one of the critical features in Interact products, where charts are widely used. The documentation could guide the designers, then help the Interact users, including the colorblind people, have a better experience in our products.
Summary
5 key points are documented.
- Data visualization color palette: refining the colors, supporting as many colors as possible to reach the contrast rate to 3:1
- Creating more contrast: guidance on how to pick up the colors
- Combining with other indicators: ways of using second visual indicators when colors have to be reused and unfriendly color combinations are not avoidable
- Using a colorblind simulator: tools for designers to do a self-check
- Giving meanings in the product: best practices
Below is the spec.
Data visualization color palette
Color contrast ratio
Be careful when the color contrast between the background and the critical information can’t reach 3:1.
Colorblind simulation
Below is how different types of colorblind people see the data visualization color palette. Consider colorblind people and take it as a reference when colors are the only style applied to differentiate the objects on the UI.
Creating more contrast
When you pick up the colors for data visualization, consider and combine all the rules together for your final decision. And be careful when there are colors in the same brightness in a color package because sometimes the contrast is not enough for the colorblind.
Creating more contrast with background
General sequence for light theme
1. Consider the row of 100 colors, and magenta, purple, and ink blue first;
2. Consider the row of darker colors;
3. Use the row of lighter colors.
Lighter colors, especially 20, on the light theme, are applied more for backgrounds, decoration purposes.
General sequence for dark theme
1. Consider the row of bright colors;
2. Consider the row of lighter colors;
3. Use the row of darker colors.
Darker colors, especially 150, on the dark theme, are applied more for backgrounds, decoration purposes.
Creating more contrast between colors
The more contrast in shades, the better the colorblind can see the difference between the two objects.
Mix adjacent colors with tints and shades.
Avoid adjacent colors in the same color as possible as you can.
Avoid adjacent colors in the same shades as possible as you can.
Problematic color combinations
When you combine the colors below, make sure to adjust the shades – most color blind people can detect contrast, so this likely will make things easier.
- Light blue & aqua
- Ink blue & purple
CAUTION – Light blue and aqua are too similar in color wise, even for normal people.
CAUTION – The colorblind can’t differentiate ink blue and purple when they are in the same brightness.
Multiple colors scenarios
When there are more than 5 colors required in the system, limit your predefined color palette to 10-15 colors and allow users to customize their own colors. It means the number of colors in a color package for Interact branded apps would never be over 15.
This is because more colors won’t help users to differentiate the graph intuitively anymore. Try to add another indicator to your graph or even reconsider your color rules in the app.
DO
Whatever colors are in the package, allow users to customize the color themselves. Colorblind mode is optional.
Examples in Interact products
When 2 colors are required
DO – Provide enough contrast between 2 colors in both color and brightness wise.
DON’T – The colors have a very low contrast between each other or with the background.
When 3 colors are required
DO – Test the color options and provide enough contrast between 3 colors in both color and brightness wise.
DO – Test the color options and provide enough contrast between 3 colors in both color and brightness wise.
CAUTION – In this case, users can still understand the schedule belongs to what fields without colors.
CAUTION – In this case, users can still understand which stage they are in without colors.
When 4 colors are required
CAUTION – There is lighter colors on the graph in light theme. They might not be seen on bad monitors.
When more than 5 colors are required
DO – The number of the facilities can be more than the colors. Colors with the same brightness can be hard to tell for the colorblind. Therefore, labels are provided as a second indicator.
Combining with other indicators
Try your best to avoid using colors alone to convey information or indicate action when they are critical information to the users.
Always provide alternatives in the form of text, icons, textures, labels or other indicators. Ensure that those who are colorblind can distinguish between them without having to worry about color affecting their perception of the data.
OPTIONAL – This is optional. The avatars of the lines have been added as the second indicator. It works when there are only 3-5 colors required on the graph.
DO – The facilities can be more than the colors. Colors with the same brightness can be hard to tell for the colorblind. Therefore, labels are provided as a second indicator.
When users hover over the graph, not only show the value of the point but also highlight the name of the line. The hovering behavior can be different, depending on the device type.
DO – In this case, users use the app on tablets. They could click and select a field first and check the values on the line by moving the finger on the graph.
Or if you are in a scenario where you would like to display all lines at a particular point when hovering over the graph, add one more indicator that highlight the name of the line users click at a particular point at the same time. Also, the interaction regarding how you highlight a particular point at the same time can be different, depending on the device type.
It seems subtle at first glance in the example, but this is on purpose. Whatever other styles you are considering, make sure that it also won’t be too obtrusive when users play with the graph, checking all the values.
DO – In this case, users use the app on tablets. They could check the values of all the lines by horizontally moving the finger in the graph area. When they vertically move their finger, they could switch between different lines at a particular point, which means the pointer will snap to a certain line when they vertically move the finger.
Using a color blind simulator
There are also quite a few tools in the market. 2 of them are listed below considering efficiency and our working scenario.
Coblis — Color Blindness Simulator
It is an online tool, easy for a quick check.
The only thing you have to do is to export the image you would like to test, drag and drop it to the simulation area and test all the views.
The weakness is that all the simulations can only be an image inside the tool, you can’t edit them directly.
Colorblind plugin on Figma
It is a plugin inside Figma. You could choose the visions you would like to generate.
The advantage is that all the simulations are also editable in Figma.
No matter what your final decision is for the final color options, keep accessibility in mind and test your color options with the users.
Giving meanings in the product
Giving data visualization colors meanings, making them useful, efficient, and appealing to your product.
- In Interact Pro mobile app, colors are used for project types and entry points that you would like to highlight. The purpose is to create information hierarchies on the page, helping users to differentiate the main entry points easily and efficiently on the UI.
- Colors for project types:
- Office: : #00B8D4 (100 light blue)
- Industry: #00BFA5 (100 aqua)
- Warehouse: #386DFF (100 ink blue)
- Retail: #B92EFF (100 purple)
- Other: #8A8A8D (60 dark gray)
- In Interact Agriculture mobile app, colors are applied to indicate the phases in a recipe. This idea is used across the whole app, which helps users understand which phases they are in and the complex levels of the recipes faster and more easily.
- In Interact Sports Recreational web app, colors are applied for different fields in a facility. The purpose is to help users check the schedules of a sports field faster and more efficiently in the different calendar views.
Wenlan’s portfolio site 