Skip to Content

How can I automatically set a label color based on contrast in a chart?

Oct 31, 2017 at 05:00 PM


avatar image


I am using the UI5 theme parameters for Belize and I am wondering if there is a UI5 mechanism to determine whether a text color offers enough contrast on a certain background.

As an example, we have a gantt chart with labeled shapes using themes from the Fiori palette. If the Fiori palette changes tomorrow, we would like our labels to still be readable. Ideally, I would like something like this:

var myTextColor = @sapUiBaseText;
if (contrastAnalyzer(myTextColor, @sapUiChartPaletteQualitativeHue1) < @sapUiContentContrastTextThreshold) {
    myTextColor = @sapUiContentContrastTextColor;

where @... parameters are retrieved using sap/ui/core/theming/Parameters.

Has anyone else encountered this situation and if so, would you share some example source code? Or would you suggest a different approach?



10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Ivan Mirisola
Dec 21, 2017 at 06:14 PM

Hi Bernanrd,

Doesn't the mix-blend-mode of CSS already does this for you?

If browser support is a must, please check this page as well for other techniques.


10 |10000 characters needed characters left characters exceeded