Dashboard selector color tied to element focus color

[andeb31]

I would like to change the color of the buttons in a Category Selector without also changing the "focus" indicator color when utilizing keyboard navigation. Currently, both the Selector color and focus color are linked to the "Accent color" in the custom theme settings. This is very restricting when it comes to applying an organization theme and ensuring color contrast meets WCAG compliance. Can we get a color setting directly in the Selector widget? In my example, the accent color is set to black to stand out against the white background, however that makes the black text on the red background non-compliant.

[JessicaMccall]

Hi @andeb31 

I found a couple resources that may help you and you may want to consider cross posting on the ArcGIS Dashboards board too. But I would encourage you to select a different combination of colors that will provide better contrast. The dark red and black will be challenging to meet the appropriate WCAG ratios unless they are kept completely separate in the design of the dashboard. 

Change the theme—ArcGIS Dashboards | Documentation

Dashboards That Pop: Themes - Esri Community - This article talks a bit about choosing colors that meet accessibility criteria. 

[andeb31]

I'm aware of the WCAG ratios for text contrast. Unfortunately, the header of the dashboard has to be the red color in my screenshots. It is frustrating that the button options in the Category Selector cannot be independently symbolized without being connected to the "focus" accent color for keyboard navigation. Almost any color I choose for "Accent color" causes ratio issues either with the text or with the focus color. My request is that these colors be linked to separate settings in the future, not the "Accent color."

[KlaraSchmitt · Accepted solution]

Hello @andeb31 

I understand why you are frustrated and while I cannot immediately solve your issue, I thought I might be able to explain why it's happening.

ArcGIS Dashboards uses the Calcite Design System, which means that when an app offers color customization, they still have to map the value you enter to an existing color value in the design system. This ensures that any color you select carries across all the design system components in a way that won't result in unexpected contrast failures down the line. The design system color palette has a limited number of color variables available to make sure all their components interconnect and work in both light and dark modes. This is why accent color is controlling both focus state and selection state. Typically, it is assumed that link color will pass against the fill color and therefore it is also safe for the focus color and selection to use link color.

Dashboards also ties these two values tied together. Set accent color and the link color uses a similar shade that is automatically darkened a bit. But that does not help you with the header. What you might be able to do is make an enhancement request to them that all elements and states within the header only use the values of 'header text color' and 'header foreground color.' They might be able to overwrite the default color values of that component easier than they can separate out focus and selection color variables.

[andeb31]

Thank you for that explanation. I agree that the most logical solution for this is to have the Header text and foreground color overwrite all colors in the Selector widget. I posted this to ArcGIS Ideas https://community.esri.com/t5/arcgis-dashboards-ideas/accent-color-category-selector-independent/idi...