Color Overview
The colors used in digital design significantly impact how accessible and inclusive a platform is for users. It's not just about looks; it affects how easy it is for people with different abilities to use the digital space. Designers need to pick colors that make text easy to read, especially for those with visual impairments. Relying on color alone can be a problem for users who have trouble seeing certain colors. To make digital experiences more inclusive, you should use a mix of colors and other cues, like text or symbols, to make sure everyone can use it.
Color Contrast
One of the most well-known accessibility guidelines is designing for users who have color vision deficiency (CVD). This refers to people who have difficulty 1) seeing certain colors, or 2) discerning between certain color combinations.
The Delish color palette was created with CVD deficiency in mind, but needs to be used correctly to meet accessibility standards. It’s important to stick to color combinations for components in the Delish system because they’ve already been checked against accessibility standards, like the Primary and Secondary buttons.
Text-to-background
The Delish primary and secondary text colors will always work on a white background. When adding a background color, check to make sure the contrast ratio is appropriate for the font size that you’re using.
- Normal text requires a 4.5:1 contrast ratio with the background
- Large text requires a 3:1 contrast ratio with the background
- Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger
There are multiple ways you can design visualizations to meet this guideline, and it might change depending on the platform you’re using. For example, Tableau makes it easier to change the text color dynamically depending on the background than Power BI.
Tip 1
When using a background color, make sure text color meets appropriate contrast ratio for text size. [Tableau]
Tip 2
Use a lighter hued diverging color palette if text color can’t be changed dynamically. [Power BI]
Tip 3
Don’t forget to check the text to background contrast ratio meets appropriate standards for text size.
Graphic Elements
Color contrast guidelines aren’t limited to text only, graphic elements and UI components also require a 3:1 contrast ratio to meet modern accessibility standards. Depending on the chart you’re using, it may seem difficult to meet this requirement when using a design system. However, it’s easy to accommodate in most cases by adding a contrasting stroke around graphic elements.
Color Context
Using color is one of the best ways to give meaning and context to data visualizations. To meet basic accessibility standards, however, make sure your visualizations and dashboards aren’t reliant on color alone to be impactful. Whenever possible, use clear titles, help-text, labels, and summaries to provide the same context that color is providing.
Don't settle for just color
Use text to indicate alerts or actions instead of relying on color alone. Default sort higher priority items at the top if possible. Don’t rely on color only to indicate alerts, severity, or intended actions.
Add labels directly to the chart that offer an additional indication of the color categories. Don’t rely on color only to distinguish between important categories.
Direct label chart components when possible to do so.
-- 1.4.2 Contrast (Minimum)
-- 1.4.11 Non-text Contrast
-- 1.4.1 Use of Color
-- 1.3.3 Sensory Characteristics