How to make charts accessible

An accessible chart does not depend on perfect vision, color perception, a large desktop screen, or a mouse. The reader should be able to identify the subject, understand the primary comparison, distinguish important series, and reach the underlying values through more than one channel.

This does not mean every chart must become visually plain or contain every possible accommodation inside the image. It means the visual design, surrounding text, semantic structure, and data alternative work together. A reader who cannot distinguish red from green may use labels and markers. A screen-reader user may use alt text and a table. A mobile reader may rely on larger type and a focused takeaway.

Accessibility is easiest when it begins with chart selection and data structure. Adding alt text after an overloaded, poorly labeled visual will not repair the analytical problem. Choose a clear format, reduce unnecessary series, establish a reading order, and preserve the data before styling.

Normal-size chart text should generally reach a contrast ratio of at least 4.5:1 against its background. Large text can qualify at 3:1 under WCAG’s size and weight definitions, but chart labels are often small after export, so 4.5:1 is the safer working target. Check titles, axes, tick labels, annotations, legends, and source lines—not only the headline.

Essential graphical objects and states generally need 3:1 contrast against adjacent colors. For a line on a white plot area, compare the line with white. For a bar separated by a dark border, the boundary may provide the needed distinction. Decorative grid lines do not need to dominate, but the marks required to understand the data must remain perceivable.

Contrast is contextual. A color that passes on white may fail on a cream, gray, or dark theme. Semi-transparent marks can also produce a different final color after blending. Test the actual foreground and background used in the exported chart rather than checking palette hex values in isolation.

Two series can have adequate contrast against the background and still be difficult to tell apart. Red and green lines may each be dark enough on white while appearing similar to a reader with a color-vision deficiency. A grayscale printout, dim projector, or compressed screenshot can create the same problem for any reader.

Reinforce color with direct labels, point shapes, dash patterns, line weight, borders, or position. A highlighted series can be solid and labeled while context series are thin and muted. Positive and negative bars can sit on opposite sides of a zero baseline rather than relying only on green and red. Survey categories can use a consistent ordered position and labels.

Direct labeling is usually stronger than a distant legend because it reduces eye travel and works even when the palette is hard to distinguish. If a legend is necessary, use the exact series names and keep its order consistent with the visual. Avoid instructions such as “see the blue line” when the label itself can name the measure.

A chart can look readable at 1,400 pixels wide in an editor and become inaccessible when an email client scales it to a narrow column. Review the final exported asset at the size and resolution readers will encounter. Source lines, axes, and annotations deserve the same attention as the headline.

Use a clear typeface, adequate line height, and sentence case for longer labels. Avoid rotated category text when horizontal bars or direct labels would fit better. Remove low-value decimals, minor ticks, and redundant legends before shrinking the entire composition. A simpler chart with larger type is usually more useful than a complete chart nobody can read.

Responsive web charts need a logical reflow strategy. Labels may move, annotations may shorten, and a multi-series view may become small multiples or a focused subset. Do not preserve a desktop composition by making every element proportionally tiny.

Useful chart alt text identifies the chart type and subject, then communicates the most important pattern, comparison, or outlier. The surrounding headline and article may already state some context, so avoid repeating the same sentence several times. The text alternative should let a reader understand why the chart is present.

For a simple chart, one or two sentences may be enough: “Line chart showing U.S. mortgage rates from 2020 to 2026. Rates rose sharply after 2021, peaked near 8% in 2023, and remained above their pre-2022 level.” This gives the structure, scope, and takeaway without transcribing every monthly observation.

Complex charts may need a short alt attribute that points to a longer description or adjacent table. Mention uncertainty, missing values, or estimates when they materially affect the conclusion. Do not hide the data source only inside alt text; provenance should remain available to all readers.

Alt text is a summary, not a substitute for the complete dataset. When exact values matter, provide an accessible table, CSV download, or both. This supports screen-reader users, readers with low vision, people checking a quotation, and anyone who wants to reuse or verify the data.

A table should have a descriptive caption, clear column headers, logical row order, and units in headers or cells. Avoid merged cells and visual formatting that changes the meaning without a text equivalent. For large datasets, a downloadable CSV can complement a focused HTML table containing the values most relevant to the published chart.

Keep the table and visual generated from the same verified data. When the chart updates automatically, the alternative must update too. A stale table can be more misleading than no table because it appears authoritative while disagreeing with the image.

Interactive charts add requirements that a static contrast checker cannot evaluate. Every control should be reachable and operable by keyboard, focus should be visible, and tooltips should not require a precise mouse hover. Screen-reader users need a meaningful name, description, and way to reach the data or an equivalent exploration path.

Do not trap essential values inside hover states. A selected filter, time range, or highlighted series should be announced programmatically and remain visible. Animation should respect reduced-motion preferences, avoid flashing, and never be the only way a change is communicated.

Automated tools catch only part of the problem. Combine them with keyboard testing, browser zoom, high-contrast or forced-color modes where relevant, screen-reader review, grayscale printing, and feedback from disabled users when the chart has high public or operational impact.

A short, repeatable preflight catches more issues than relying on individual memory. Assign responsibility for the check and review the final export, not only the editable source. Record any intentional exception and the alternative provided to readers.