Color is a powerful tool in data visualization, but it must be used carefully to ensure accessibility and should not be the sole method to convey meaning.
Sufficient contrast between colors allows users to distinguish text, shapes, and data elements. Poor color choices can make content difficult or impossible to interpret, particularly for users with low vision or color vision deficiencies. Always reinforce color with additional visual or textual cues (such as labels, patterns, shapes, or descriptive text) so that information remains understandable regardless of how it is perceived.
Note: The Public Box folder contains icons for the Tableau Server templates. All icons meet the color contrast requirements. Ensure the icons in your Tableau workbooks match those in the Box folder.
Text Contrast Ratio
Text and its background must meet the following contrast requirements:
Color contrast requirements for normal and large text based on size.
| Text Type |
Minimum Size |
Contrast Requirement |
| Normal text |
Under 18 pt regular OR under 14 pt bold |
4.5:1 |
| Large text |
18 pt regular OR 14 pt bold |
3:1 |
Use the WebAIM Contrast Checker to evaluate foreground and background color combinations.
Non-Text Contrast Ratio
Non-text contrast ensures that visual elements in a chart or interface can be distinguished from one another and from their background.
A minimum contrast ratio of 3:1 is required when color is necessary to understand content. This applies to:
-
Adjacent elements (e.g., bars, stacked segments, pie chart slices).
-
Elements against a background.
How to Evaluate Contrast
Contrast should be evaluated between colors that users must distinguish, including adjacent elements or colors used to convey meaning. WCAG does not require every color in a palette to meet contrast requirements with every other color. Instead, evaluate contrast pairwise between relevant combinations (
WCAG Technique G209).
When Contrast Cannot Be Met
If a 3:1 contrast ratio cannot be achieved, additional visual cues must be used to ensure the content remains understandable. These may include labels, direct annotations, tooltips, borders, patterns, textures, icons, or shapes. Color must not be the only way information is communicated.
Diverging and Sequential Color Scales
UW diverging and sequential color palettes do not meet 3:1 contrast requirements due to gradual color transitions. When using these scales, ensure values remain interpretable without relying on color alone by providing supporting context.
UW-Madison Color Resources
For quick evaluation of non-text contrast within the UW-Madison categorical palette, refer to the resource below. Color pairings are labeled as pass or fail:
UW Categorical Color Contrast Chart (download)
Color Vision Deficiencies
Designers must consider users with color vision deficiencies when selecting and applying color. Even when contrast requirements are met, some color combinations (such as red and green) are not distinguishable for all users.
Avoid relying on color alone to differentiate data. Use additional visual cues such as labels, patterns, shapes, or icons to support interpretation. Instructions should also not rely on sensory characteristics such as color, location, or shape (e.g., “click the red circle button” or “see the chart on the right”). Instead, use clear and explicit language that remains meaningful regardless of how the content is perceived.
Validate color choices using tools such as the Coblis Color Blindness Simulator to ensure visualizations remain interpretable across different types of color vision.
WCAG considers charts and graphs to be complex images and require a two-part text alternative so assistive technologies (such as screen readers) can interpret the information. The goal is to ensure that users who are blind or have low vision can access and understand the content in a way that is comparable to the visual experience.
Short Alternative Text Description (Required)
Tableau automatically generates short alternative text for chart elements. However, the default text often includes technical field names that may not be meaningful to end users. Developers should review and update this text to provide a brief, clear summary of what the visualization shows, including its purpose and, when possible, a key takeaway. See instructions below for how to edit alternative text.
How to Edit Short Alternative Text
- Open the worksheet that contains the graph.
- In the menu bar, select Worksheet.
- Choose Accessibility from the drop-down menu.
- In the description field, enter a short, clear summary of what the graph shows, including its purpose and key takeway (e.g., "Bar chart showing count of enrollment by major").
Alternative Text Data Table (Required)
A visible, well-structured data table must be included in addition to the visualization to provide access to exact values in a structured, accessible format. Because tables are organized into rows and columns, they are easier to interpret for users with low vision who may have difficulty distinguishing overlapping marks, colors, or fine details. They are also more accessible for screen reader users, who rely on table structure to understand relationships in the data. Given this, tables serve as a reliable text alternative, especially for interactive or filterable dashboards.
How to Quickly Create a Text Table
- Open the worksheet that contains the graph.
- In the sheet tabs, right-click the worksheet.
- Select Duplicate as Crosstab from the pop-up menu.
Placement of the text data table is flexible and may vary based on the developer's preference for the design of the dashboard. It may be positioned above, below, or beside the chart or graph. If a visible table is not ideal for the layout, alternative approaches can be used to make it accessible. For example, a parameter can allow users to toggle between the visualization and a text table.
Tableau Feature/Limitation Note
In Tableau Server, users can access a table view through the View Data window, which displays underlying or summary data in an accessible, in-browser format. Screen readers can guide users to this view using keyboard interactions (such as Shift + Enter, depending on configuration). The UW-Madison Tableau User Guide (linked throughout all workbooks) also includes instructions for accessing both the Crosstab (downloadable) and View Data (in-browser) options. However, this functionality may not be obvious to all users and often requires prior knowledge or reference to documentation, especially for those not using screen readers. Additionally, the View Data window reflects the raw data used to build the visualization, which may include formatting or structure that is not intuitive to end users. For this reason, it should not be relied on as the only accessible option.
Additional Description (Recommended, When Helpful)
When meaningful insights or trends are present, include a description in the short alternative text or in nearby text (such as a caption) that summarizes key takeaways. This helps communicate insights that may not be immediately clear when reading or hearing the data in a text table.
For example, in a bar chart showing enrollment by major, it may not be obvious that Accounting and Marketing have similar enrollment while Finance has the highest. Including a brief summary of this takeaway helps users quickly understand the key insight.
This may not be necessary for every visualization. For highly dynamic or exploratory dashboards, it may not be practical to define a single takeaway. In those cases, developers should use judgement and focus on ensuring the data table and short alternative text provide sufficient context.
How to Enable and Edit Captions
Tableau automatically generates Captions. However, the default text often includes technical field names that may not be meaningful to end users. Developers should review and update captions to ensure they clearly describes the visualization and key takeaways. See instructions below for how to enable and edit Captions.
- Open the worksheet that contains the graph.
- In the menu bar, select Worksheet.
- Choose Caption from the drop down menu.
- Right-click the Caption text and enter an accurate, concise summary of the graph's purpose and key insights (e.g., "Count of enrollment by major, showing similar enrollment levels for Accounting and Marketing, with Finance having the highest enrollment").
- Note: Developers can configure Captions to update dynamically based on filter and parameter selections.
Tableau Limitation Note: Tableau documentation indicates that worksheet Captions can be read by screen readers as part of dashboard content (Author Views for Accessibility). However, in testing, Captions are not consistently announced when navigating via keyboard and should not be relied on as the sole method for conveying information.
Tooltips provide supplemental context when users hover over marks (or navigate to marks using keyboard navigation) in a visualization. All tooltip content should use clear, user-friendly language. Avoid standard Tableau terminology (e.g., “SUM(Sales)”) and technical field names. Instead, use meaningful, descriptive labels that reflect how users interpret the data.
The purpose of a link must be clear from the link text itself or from the surrounding context. In Tableau dashboards, hyperlinks created through URL actions, navigation objects, or image objects should use alternative text or tooltips to provide a clear, descriptive label.
Note: Tableau Server templates include default alt text where applicable. Update the Navigation Arrows and Data Classification Icons alt text accordingly.
Tableau Template Homepage Link Instructions
- Update the tooltip for each navigation object to include the dashboard view name.
- Update alt text for each image object (Technical Notes, Tips on Using Tableau, Support Email, UW-Madison Logo, Data Classification Icon).
- For the Support Email image object, update the email URL to match the email listed in the footer.
- For the Data Classification Icon image object, update the URL to the proper data classification.
Alternative text descriptions for common Tableau dashboard icons
| Icon |
Alternative Text |
| Navigation Arrow |
Go to [Dasboard 1 Title] dashboard |
| Technical Notes |
View the technical notes |
| Tips on Using Tableau |
View the UW-Madison Tableau User Guide |
| Support Email [NEW ICON as of 2026] |
Email the Tableau workbook contact |
| UW-Madison Logo |
UW-Madison Homepage |
| Data Classification Icon |
Learn more about [insert classification here] data classification |
Tableau Template Dashboard View Link Instructions
- Update alt text for each image object (Technical Notes, Tips on Using Tableau, Support Email, UW-Madison Logo, Data Classification Icon)
- See Tableau Template Homepage Link Instructions section for UW-Madison Logo and Data Classification Icon
Alternative text descriptions for common Tableau dashboard icons
| Icon |
Alternative Text |
| Technical Notes |
View the technical notes |
| Tips on Using Tableau |
View the UW-Madison Tableau User Guide |
| Support Email [NEW ICON as of 2026] |
Email the Tableau workbook contact |
Headings, lists, table structures, labels, and grouped elements must be properly tagged so screen readers can interpret their hierarchy and relationships. Titles, section headers, filter labels, and axis labels should also be clear and descriptive.
Axis labels must specify what is being measured and include units when relevant (e.g., USD, %, counts, time). Avoid vague terms such as “value” or “measure.” Axis labels may be removed only when the same information is communicated unambiguously elsewhere—such as in the chart title or data labels—without creating confusion.
Fail vs. Pass Example
Fail Example
A screen reader would announce the items “Furniture, Office Supplies, Technology” without any context. The user would not know that these are product categories, that they represent sales, or how they relate to one another.
Pass Example
For screen reader users, all elements of the graph are structured and labeled so the information is conveyed in context. The chart title, category labels, axis labels (including units of measure where applicable), measure (sales) and data values work together to clearly communicate that this is a comparison of sales by product category. Axis labels should only be removed if their absence does not introduce ambiguity and the same information is clearly communicated elsewhere in the visualization.
When navigating a dashboard using the keyboard (tab key), the focus order should follow a clear, logical, and predictable sequence.
In Tableau, tab order is determined based on the order in which objects were added to the dashboard. With a Tableau 2021.3 release, Tableau updated navigation to generally move in a top-to-bottom, left-to-right pattern regardless of drag and drop order. However, this behavior is not guaranteed and may still reflect underlying object creation order, especially in more complex layouts or in workbooks created before the release. In those cases, tabbing follows the original object creation order. At this time, there is no reliable way to fully correct tab order in older workbooks without rebuilding.
To review the navigation structure, open Layout → Item Hierarchy in Tableau Desktop. In theory, this panel reflects the order in which users will navigate using the keyboard. If the resulting order is not intuitive, objects may need to be removed and re-added in a sequence that produces a more logical and user-friendly navigation flow. Tab order should be tested after publishing to the Tableau Server, as Tableau Desktop does not support keyboard tab navigation.
Tableau Limitation Note: Tableau does not provide a flexible way to reorder tab navigation manually. Adjusting focus order often requires rebuilding parts of the layout, and even then, the keyboard order may not perfectly match the intended keyboard navigation flow.
For a full list of supported interactions, refer to Tableau’s keyboard navigation and shortcut documentation.
