> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Accessibility

> It is of utmost importance to create an accessible experience for all. This guide shows you how.

## Background Tone for Totals

When a chart includes a background neutral tone to indicate the total of a field, such as in a progress bar, but does not need to represent a specific data set, use Blue-Grey 100.

![blue-gray 100](https://mintcdn.com/servicetitan/eSZwLejs8pME2ERY/images/docs/web/data-visualization/accessibility/accessibility-totals-light.png?fit=max\&auto=format\&n=eSZwLejs8pME2ERY\&q=85\&s=0fb18e7fd3e457cccece34376b993f00)

## Contrast

Our monochrome color palette adheres to the 3:1 AA contrast standard for
graphical objects. This references the color to the chart background (white) as
well as a 3:1 contrast between the colors. This is why we recommend 4px spacing
between spacing on charts.

![the default data viz color palette](https://mintcdn.com/servicetitan/LXKsjszJQqtNIgup/images/docs/web/data-visualization/accessibility/accessibility-shades-light.png?fit=max\&auto=format\&n=LXKsjszJQqtNIgup\&q=85\&s=1fba44cc3e3cb8eb322a6baafe7f15d3)

Our categorical color palette meets 3:1 against our chart background, but since
they do not all meet 3:1 against each other, we require direct labeling and 4px
spacing between colors.

![the categorical data viz color palette](https://mintcdn.com/servicetitan/LXKsjszJQqtNIgup/images/docs/web/data-visualization/accessibility/accessibility-categorical-shades-light.png?fit=max\&auto=format\&n=LXKsjszJQqtNIgup\&q=85\&s=1cb553f21fb0244051de317c3e9fb83b)

## Direct Labeling

There are three primary approaches for applying direct labeling in charts, each
offering varying levels of visibility and user interaction depending on the
complexity of the data.

1. Direct labeling on values places the label directly on or adjacent to each
   data point. This approach provides immediate visibility and quick
   readability, making it ideal for dense datasets where users need to interpret
   values at a glance without additional interaction.
2. Above labeling positions labels around the chart rather than directly on the
   data points. This method is useful when visual clarity or spacing is a
   concern, such as in cases where labels may overlap or obscure the chart
   elements. Above labeling maintains legibility while preserving the visual
   integrity of the chart.

![A bar chart with direct labeling (#1)](https://mintcdn.com/servicetitan/X7UCc5xRXSxfS9Y-/images/docs/web/data-visualization/accessibility/accessibility-direct-labeling.png?fit=max\&auto=format\&n=X7UCc5xRXSxfS9Y-\&q=85\&s=5d7d19cd98e9a892e1e90b530b1c0d35)

![A bar chart with above labeling (#2)](https://mintcdn.com/servicetitan/X7UCc5xRXSxfS9Y-/images/docs/web/data-visualization/accessibility/accessibility-above-labeling.png?fit=max\&auto=format\&n=X7UCc5xRXSxfS9Y-\&q=85\&s=6cd3f3a0188c315b96a20eaa3b5a2542)

> **[Questions? Challenges?](https://servicetitan.enterprise.slack.com/archives/C0881LFTGDR)**
>
> Contact the Visual Design team on the #ask-vizd channel

## Hover states

**Hover State Tooltip**: hows additional or detailed information only when a user hovers or focuses on a specific element. It helps keep the visualization clean and uncluttered while still providing access to precise data on demand.

### Hover State Tooltip

![Example of a tooltip](https://mintcdn.com/servicetitan/UjzR2VvA6ZE_Niqw/images/docs/web/data-visualization/accessibility/accessibility-tooltip.png?fit=max\&auto=format\&n=UjzR2VvA6ZE_Niqw\&q=85\&s=f28678d74fe175cd344916395b8de65f)

A tooltip is a brief, informative message that appears when a user interacts with an element in a graphical user interface. [Tooltips](https://anvil.servicetitan.com/docs/components/tooltip/design) are small containers that appear on hover, showing extra details like values or labels for specific chart elements. They help reveal data insights without cluttering the visualization. ([Anvil tooltip](https://anvil.servicetitan.com/docs/components/tooltip/design)).

**Tooltips are the default overlay for data visualization messaging. They are used to show hover-based, non-interactive information. If you need interactive elements (e.g., buttons) or custom-styled content with colors or visuals, use a popover instead. Always be consistent by using the same overlay component throughout a given data set rather than mixing tooltips and popovers.**

> [!NOTE]
>
> Note: When hovering over a data point, all other colors (besides the hovered one) should have 20% opacity to keep the focus on the selected element.

![A donut chart with a hover state](https://mintcdn.com/servicetitan/eSZwLejs8pME2ERY/images/docs/web/data-visualization/accessibility/accessibility-donut-example.png?fit=max\&auto=format\&n=eSZwLejs8pME2ERY\&q=85\&s=52219bc1a15d9acb96638145c3be8754)

![A bar chart with a hover state](https://mintcdn.com/servicetitan/eSZwLejs8pME2ERY/images/docs/web/data-visualization/accessibility/accessibility-hover.png?fit=max\&auto=format\&n=eSZwLejs8pME2ERY\&q=85\&s=360fbd08d59adf1e18ab2ad640f7680e)

![A line chart with a hover state](https://mintcdn.com/servicetitan/eSZwLejs8pME2ERY/images/docs/web/data-visualization/accessibility/accessibility-progress-over-time.png?fit=max\&auto=format\&n=eSZwLejs8pME2ERY\&q=85\&s=4cf49c4f42bee71b3f1aa18af6cca799)

> **[Questions? Challenges?](https://servicetitan.enterprise.slack.com/archives/C0881LFTGDR)**
>
> Contact the Visual Design team on the #ask-vizd channel


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.