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

[Former Member]

Hi,

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?

Thanks!

Bernard

[Ivan-Mirisola]

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.

Regards,
Ivan