skip to content
Primary navigation

Data Visualization Basics

Use color carefully.

Check color contrast. Use labels, size, shape or graph position in addition to color. Remember to not use color alone to convey information. See the testing guide for guidance on colors.

Graphs and charts: Keep them simple and limit the number of colors used.

Position labels for easy viewing. Consider using borders or space around elements to achieve better separation and increased contrast.

Provide a text summary of the visualization

Providing a text summary of the visualization can provide an alternate format for consuming the data and will provide non-visual users a description of trends and patterns. An added benefit is text descriptions can easily be picked up by search engines.

Dashboard, worksheet, filters and legends should always be shown.

Ensure the title text is meaningful and programmatically available with <h1>, <h2>, etc.

Fonts

When possible, avoid using small text and use sans serif fonts. Line spacing and word spacing can also affect font readability.

Provide alternate format for tooltips

Tooltips cannot be read by screen readers or users of touch screens. If tooltips are not turned off, provide the same information in the tooltip in an accessible format.

Verify tab order

Different visualization layouts and tools can create difficulties with tab order. Test the order by using the “Tab” key to move through the dashboard without using a mouse.

Form control labels

Make sure the form control labels and filters are accurate and describe the information or user interaction.

Provide the data in an alternate accessible format

Some users consume data in alternate ways such as data table and may find it easier to navigate.

back to top