Automatically adjusting text color

ArcadiaCharts includes an automatic color recognition engine which chooses the color of an element depending on the color of the surrounding or underlying element. If, for example, you define your own chart-background color, the color recognition engine will set the colors of all other chart elements automatically to values fitting the new background.

In this interactive HTML5 / JavaScript chart – where we didnĀ“t predefine any text color at all – you can see how text colors adapt to their background for best contrast and readability:

  • The title is drawn white on the dark grey gradient background

  • The labels "first" and "second" within the big slices are drawn black because of the bright slice colors

  • The labels "third" and "fourth" have not enough place within the corresponding value slices, so they are drawn outside. The algorithm decides to color them according to the chart title because of the similar background.

  • The legend background has been user-defined as "light gray". The algorithm decided automatically to set the font color of the legend labels to black.

Home | Features | Demos | Support | Company

© Arcadia Software GmbH i.L. | Heinestrasse 21 | 50931 Cologne | Germany