Highcharts

Start your Highcharts journey today

立即试用
立即购买
Skip to Content
文档无障碍支持图案与对比度

Patterns and contrast

The default palette of Highcharts is designed with accessibility in mind, so that any two neighbor colors are tested for different types of color blindness. In addition to that, there are a few ways to increase contrast, both for the visually impaired or for grayscale prints, but also for the charts to be more readable in general.

Keep in mind that you should not rely on color alone to provide information in the chart. Consider using data labels and/or the series-label module in addition.

Examples

Below you will see some examples of different ways to increase contrast.

Monochrome color palettes

Consider using monochrome color palettes .

View demo code 

High contrast theme

Consider using a high contrast theme .

View demo code 

Dash styles

Consider applying dash styles  to line series. This will make lines distinguishable even on poor black/white prints. See the live demo of dash styles .

View demo code 

For more examples of dash styles, you can take a look at this demo showing the name of different dash styles:

View demo code 

Pattern fill

Consider applying a pattern fill to areas, columns or plot bands. This can be accomplished through the pattern fill module. Pattern fills can be very useful for distinguishing series visually, if correctly used. For more information, see our documentation on pattern fills .

<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>

View demo code 

Keep in mind that pattern fills and dash styles could make your charts visually confusing and less accessible to some users, and that not all charts will be improved by adding these features. Subtle patterns are often preferred.

Read more about themes  or pattern fills .