Charts, graphs, maps and dashboards are some of the most common barriers in research and administration. A chart that is clear to one reader can be unreadable to someone who is blind, has low vision or color blindness, or navigates by keyboard. These steps make the information available to everyone.
1. Say what the chart shows, in text
- Give the chart a clear title and state the main takeaway in the text around it, for example “Enrollment rose 12% between 2022 and 2025.”
- Add short alt text that names the chart type and its point. Put the detail in the nearby text or a linked description, not in the alt text.
- Provide the data as an accessible table, or as a downloadable spreadsheet, so people can explore the numbers themselves.
The W3C’s Complex Images tutorial shows several ways to do this.
2. Never rely on color alone
If a reader cannot tell the colors apart, the chart must still make sense (WCAG 1.4.1 Use of Color).
- Label lines and bars directly instead of, or as well as, using a legend.
- Use different marker shapes, line styles (solid, dashed, dotted) or patterns.
- Keep the number of colors small.
3. Check contrast
- Text and labels need at least 4.5:1 against the background (3:1 for large text).
- Lines, bars, markers and other graphics that people need in order to understand the chart need at least 3:1 against the background (WCAG 1.4.11 Non-text Contrast).
- Neighboring colors do not need 3:1 against each other if you separate them with a white gap or border, or label them directly. For example, Arizona Red next to Arizona Blue is only about 2:1, so give adjacent bars a gap or a label.
A contrast-checked University palette
Contrast of the University’s brand colors against white, calculated with the WCAG formula. Names and the full palette are on the University’s Colors page.
| Color | Hex | Contrast on white | Safe for |
|---|---|---|---|
| Arizona Red | #AB0520 | 7.57:1 | Lines, bars, markers and text |
| Arizona Blue | #0C234B | 15.47:1 | Lines, bars, markers and text |
| Brand color | #03132E | 18.48:1 | Lines, bars, markers and text |
| Brand color | #850000 | 10.51:1 | Lines, bars, markers and text |
| Brand color | #85372B | 8.14:1 | Lines, bars, markers and text |
| Brand color | #1E5288 | 8.02:1 | Lines, bars, markers and text |
| Brand color | #106AB1 | 5.65:1 | Lines, bars, markers and text |
| Brand color | #C62840 | 5.56:1 | Lines, bars, markers and text |
| Brand color | #3F7A7A | 4.91:1 | Lines, bars, markers and text |
| Brand color | #7F8B5A | 3.66:1 | Lines, bars and markers (not small text) |
| Brand color | #81CEEB | 1.76:1 | Backgrounds and highlights only |
| Brand color | #E5EFF7 | 1.17:1 | Backgrounds only |
| Brand color | #F2EFEA | 1.15:1 | Backgrounds only |
4. Make interactive charts work by keyboard and screen reader
- Every filter, tab and data point people can select must also work with the keyboard, with a visible focus indicator.
- Information that appears on hover, such as tooltips, must also appear on keyboard focus.
- Offer the table or spreadsheet version for anyone who cannot use the interactive version.
Tool tips
- Excel, PowerPoint and Word: Add alternative text to a shape, picture, chart, SmartArt graphic or other object (Microsoft Support).
- Power BI: Overview of accessibility in Power BI (Microsoft Learn).
- Tableau: Best Practices for Designing Accessible Views (Tableau Help).
Quick checklist
- The main point is stated in text.
- The chart has short alt text and a longer description or data table.
- Nothing depends on color alone.
- Text meets 4.5:1 and graphics meet 3:1.
- Interactive features work by keyboard, and hover information also appears on focus.