Embedded Files
Grand Challenges Home > Drive Innovation > Data Visualization Toolkit > Accessibility > Perceivable
Perceivable
Perceivable
Ensure users can access the information and insights contained in your visualizations.
For a visualization to be effective, users must be able to perceive the information it conveys. This includes distinguishing colors and visual elements, reading text and labels, and understanding how data points relate to one another. Thoughtful use of contrast, color, and labeling helps ensure that visualizations remain accessible and meaningful to people with diverse visual abilities and viewing conditions.
The guidance in this section focuses on two key aspects of perceivability: Colors & Contrast and Text & Labels. Together, these elements help users identify patterns, distinguish categories, read information accurately, and interpret data with confidence. By designing with perceivability in mind, you can create charts and dashboards that communicate insights more clearly and effectively for all audiences.
Page Contents
Colors & Contrast
Colors & Contrast
Why It Matters
Why It Matters
Color‑only cues and low contrast are common barriers, especially for color vision deficiency (CVD) and low‑vision users. Use high‑contrast palettes and redundant encodings (shape, pattern, labels).
What to Avoid
What to Avoid
Relying on color alone to convey meaning
Using low-contrast text or chart elements
Requiring users to rely on distant legends
What Good Looks Like
What Good Looks Like
Meet or exceed WCAG contrast ratios for text (normal ≥ 4.5:1; large ≥ 3:1 ) and non‑text elements (≥ 3:1).
Use color‑blind‑friendly palettes and verify them with contrast checkers and color blindness simulators.
Provide redundant cues such as labels, patterns, or shapes so meaning is not conveyed by color alone.
Example: Improving Color & Constrast
Example: Improving Color & Constrast
The example below demonstrates how improvements to color, contrast, labeling, and redundant visual cues can make a visualization easier to interpret.
Before: Less Accessible
Before: Less Accessible
Accessibility Challenges
Low-contrast bars on a light background reduce visual distinction.
Users must rely primarily on color and a distant legend to distinguish data series.
Light text and thin chart elements are difficult to see.
Similar colors may be difficult to distinguish for users with color vision deficiencies.
After: More Accessible
After: More Accessible
Accessibility Improvements
Higher-contrast colors improve visibility and differentiation.
A color-blind-friendly palette makes the chart easier to interpret.
Direct labels reduce the need to reference a legend.
Marker shapes provide redundant visual cues in addition to color.
Quick Test: If your chart were viewed in grayscale, could users still distinguish categories and understand the message?
Resources: Colors & Contrast
Resources: Colors & Contrast
These tools and resources can help you select accessible colors, verify contrast, test for color-vision deficiencies, and evaluate overall accessibility.
Tools
Palette Creation
Coolors (Contrast-Friendly Palettes): Generates accessible, high‑contrast color palettes.
Venngage Accessible Color Palette Generator: Creates palettes that meet accessibility contrast requirements.
David Math Logic Colorblind‑Safe Palettes: Generates and tests palettes designed specifically for color‑vision accessibility.
Contrast Testing
WebAIM Contrast Checker: Provides WCAG‑based evaluations for text/background color contrast.
TPGi Color Contrast Analyser (CCA): Tests real-time contrast ratios for WCAG compliance.
Color Vision Simulation
Color Oracle: Desktop simulator showing how designs appear under different color‑vision deficiencies.
Coblis Colorblind Simulator: Web-based tool for previewing images under multiple types of color blindness.
General Accessibility Testing
WAVE Evaluation Tool (Chrome Extension): Identifies accessibility issues such as low contrast, missing alt text, and structural problems.
Additional Guidance
WCAG (Web Content Accessibility Guidelines): Internationally recognized standards defining how to make digital content perceivable, operable, understandable, and robust.
10 Guidelines for Data Visualization Accessibility (Highcharts): Practical guidance outlining ten core strategies for accessible charts, including color use, alt text, keyboard navigation, and clarity.
Boise State: Creating More Accessible Data Visualizations and Dashboards: A focused guide on improving dashboard accessibility through better reading order, color choices, alt text, and keyboard‑friendly design.
Text & Labels
Text & Labels
Why It Matters
Why It Matters
Text plays a central role in helping users understand and navigate data visualizations. Small, low-contrast, overly stylized, or poorly placed text can make charts difficult to read, particularly for users with low vision, dyslexia, cognitive disabilities, screen magnification needs, or lower literacy levels. Clear labels and descriptive titles reduce effort and help users focus on the insights rather than decoding the visualization.
What to Avoid
What to Avoid
Using small, decorative, italicized, or all-caps text.
Relying on distant legends instead of direct labels.
Using unexplained acronyms, abbreviations, or jargon.
Truncating titles, labels, or axis text on smaller screens.
Placing text so close to chart elements that it becomes difficult to read.
What Good Looks Like
What Good Looks Like
Use readable sans-serif fonts and adequate font sizes.
Place labels adjacent to the data whenever possible.
Use descriptive chart titles that communicate the purpose or takeaway of the visualization.
Favor plain language and explain acronyms when needed.
Ensure text has sufficient contrast and remains readable when zoomed.
Example: Improving Text & Labels
Example: Improving Text & Labels
The example below demonstrates how improvements to text size, placement, wording, and labeling can make a visualization easier to read and interpret.
Before: Less Accessible
Before: Less Accessible
Accessibility Challenges
Abbreviated title and decorative font reduce readability.
Unexplained acronyms may be unfamiliar to some users.
Small, low-contrast text is difficult to read.
Rotated labels are harder to scan and compare.
Values are not labeled directly.
Reliance on a legend increases effort.
After: More Accessible
After: More Accessible
Accessibility Improvements
Descriptive title provides clear context.
Readable fonts improve legibility.
Full category names improve clarity.
Horizontal bars eliminate rotated labels.
Direct labels reduce axis interpretation.
Consistent spacing improves scanability.
High-contrast text remains readable when zoomed..
Quick Test: Could someone unfamiliar with your institution's acronyms and terminology understand what the chart measures and what each category represents? If not, consider revising titles and labels using clearer, more descriptive language.
Resources: Text & Labels
Resources: Text & Labels
These resources can help you create clear, readable titles, labels, annotations, and supporting text for data visualizations..
Readability & Plain Language
PlainLanguage.gov: Federal guidance on writing clear, concise, and user-friendly content.
Center for Plain Language: Resources and examples for improving clarity and reducing jargon in written communication.
Data Visualization Guidance
UW–Madison: Accessible Data Visualizations: Practical guidance on chart titles, labels, alternative text, and accessible data presentation.
Harvard Accessibility: Data Visualizations, Charts, and Graphs: Recommendations for creating accessible charts through better labels, text descriptions, and chart organization.
Highcharts: 10 Guidelines for Data Visualization Accessibility: Includes guidance on direct labeling, reducing reliance on legends, and improving readability.
Accessibility Review & Testing
WAVE Evaluation Tool: Helps identify accessibility issues related to text, structure, and readability.
Accessibility Insights: Accessibility testing tools that can help evaluate digital content and user experiences.
Additional Guidance
Boise State: Creating More Accessible Data Visualizations and Dashboards: Covers labels, reading order, chart descriptions, and other dashboard accessibility considerations.
The Ultimate Checklist for Accessible Data Visualizations (A11Y Collective): Practical checklist including labeling, text alternatives, chart design, and accessibility review considerations.
Page updated
Google Sites
Report abuse