Skip to Content
avatar image
Former Member

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


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?



Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • 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.


    Add comment
    10|10000 characters needed characters exceeded