Accessible Color in Data Visualization: Why a Color-Blind-Friendly Palette Is Only the Start

"Using a color-blind-friendly palette" is only the beginning. A truly accessible chart must also ensure that color is not the sole encoding, essential graphics have sufficient contrast, data remains available without hover, and complex information has alternatives such as labels or tables.

When many data products are designed for accessibility, they download a so-called "color-blind-safe palette" and then think the problem has been solved. However, the readability of a chart is not solely determined by hue: the same two shades of blue may be almost indistinguishable to users with low vision. Even if red and green are replaced with blue and orange, if the only information still depends on color, it will still cause some users to lose the data relationship.

01 Separate visibility, differentiation, and comprehension

Identification is "Can I see this line?" Differentiation means "Can I know if it is not in the same group as the other line?" Comprehension means "Can I know whether it represents North China or South China, growth or decline?" Color design is just one layer. The accessibility solution must cover three layers.

02 Two WCAG requirements that matter most for charts

1.4.1 Use of Color in WCAG 2.2 requires that color cannot be the sole visual means of conveying information, status, or distinguishing elements. That is to say, it is not enough to merely use red to indicate a decline and green to indicate an increase. Positive and negative signs, arrows, text or different shapes can be added.

1.4.11 Non-text Contrast requires a contrast of at least 3:1 between the graphic objects necessary for understanding the content and the adjacent colors. The W3C's explanation clearly regards the important lines, segments, etc. in the graph as graphical objects that may need to be satisfied. Not all decorative lines need to be 3:1, but if you can't see it, you can't understand the data and must handle it carefully.

03 Categorical data needs more than additional colors

When a chart has 8 to 12 series, even the most excellent categorical color palette will be difficult to recognize. Prioritize reducing the series displayed simultaneously and use direct labels, line types, dot shapes, patterns or group positions as secondary codes. The G111 technology of W3C also adopts the approach of "color + Pattern", using redundant visual channels to prevent color from being the sole clue.

04 Sequential and categorical data require different color logic

Categorical data emphasizes "being different from each other" and is suitable for different hues. Sequential data emphasizes "from low to high", which is more suitable for the brightness or saturation gradient of the same hue. Divergent data express positive or negative or deviation around the midpoint, which requires visual balance on both sides. First, determine the data relationship, and then select the palette instead of randomly picking colors from the brand palette.

05 Red and green is not only a color-blindness issue

Financial products often use red or green to indicate ups and downs, but there are even cultural direction differences among different markets. Even if red and green are retained, +/−, up/down arrows, text labels or position changes should be added. Users should still be able to understand the main conclusion after converting the screen to grayscale.

06 Test contrast between adjacent color blocks

In pie charts, stacked bar charts and heat maps, adjacent areas are in direct contact. W3C G209 suggests that when the boundary itself is necessary for understanding the information, check the contrast of adjacent colors at least 3:1. In actual design, intervals, borders or direct labels can also be added to reduce the reliance on color boundaries.

07 Do not hide all data in hover tooltips

hover is not reliable for keyboard, touch and some assistive technology users. Key values should be obtainable through focus, direct labels, data tables, or detail panels. Tooltip can increase density, but it should not be the only way to obtain data.

08 Distant legends increase cognitive load

If users need to constantly compare colors between the legend on the right and the line on the left, it will be very difficult when the amount of data increases. Mark directly at the end of the line if possible, and write the numbers near the columns to reduce the reliance on legends. Accessibility is often in the same direction as lower cognitive costs.

09 Provide equivalent access to complex chart data

The W3C's explanation of Non-text Contrast clearly states that if graphic information is provided simultaneously in the form of text or tables, etc., the reliance of the graphics themselves on understanding can be reduced. Complex BI charts can offer "View data table", "Download CSV" or long descriptions, allowing users to avoid forcing themselves to extract all the information from visual graphics.

10 Build system-level data visualization tokens

Carbon Charts selects the designed palette based on the number of data groups and emphasizes accessibility and page coordination. The enterprise's own design system can also establish data color tokens such as categorical, sequential, diverging, and status, and clearly define the maximum number of series, background themes, and allowed combinations. Don't let each Dashboard decide on its own 12 random colors.

11 Dark themes require more than a black chart background

In dark mode, the same group of data colors will produce different perceived brightness. Two lines that are sufficiently separated in a light-colored theme may appear overly bright or close to each other on a dark background. Data color tokens should be verified separately for each theme instead of directly reusing the same set of Hex. The grid lines, reference lines, focus rings and Tooltip backgrounds also need to be rechecked and compared.

12 Do not make unselected data disappear on interaction

When many charts hover over a certain series, they reduce the transparency of other series to 10%, which may make users with low vision completely unable to see the context. A more reliable approach is to enhance the current series while maintaining the minimum recognizability of other series. The keyboard focus should also produce the same effect. When switching animations, user preferences such as Reduced Motion should also be respected.

13 A practical validation checklist

• Can the main relationship still be understood when the chart is converted to grayscale?
• Can the key series be distinguished by hiding the legend color and only looking at the label and shape?
• Do the important lines, points and boundaries have sufficient contrast in the actual background?
• Can the keyboard focus obtain the same data as hover?
• Is it still available on mobile devices without hover?
• Are data tables, details or replicable data exports provided?

Truly accessible data visualization is not about sacrificing aesthetics, but about reducing single-point dependencies. Color can still be a very effective visual channel, but it should work in conjunction with text, position, shape and pattern.

Frequently Asked Questions

Can the color-blind-friendly palette meet the requirements of WCAG?

No. WCAG also requires that color cannot be the sole information channel. Key graphics may need to meet non-text contrast requirements and take into account keyboard, text alternatives, etc.

Must all the colors in the chart reach a ratio of 3:1 to each other?

No. The graphic objects and adjacent colors necessary for understanding the content are required. The specific situation needs to be judged based on the structure of the chart. It cannot be simply required that all series be 3:1 in pairs.

Must the red and green color combination never be used?

It can be used, but don't rely solely on red and green to convey meaning. Add redundant encodings such as text, symbols, positions or shapes.

Is it true that the more data labels there are, the better?

No. Labels should give priority to covering key data and hard-to-distinguish series to avoid information overload. More details can be unfolded through interaction.

Must complex charts provide data tables?

Not all charts are mandatory, but for complex data that relies on visual detail understanding, providing tables or equivalent text is a very effective way of accessibility.