Color management/generation and themes

[JayPanoz]

Right now our primary color is #4d4d4d. To have a contrast that passes WCAG AA for graphical objects and UI Components, it needs to be at least 60% opacity, which makes the difference between normal and immersive modes kinda difficult to notice.

[HadrienGardeur]

I guess that the implementation of themes could also affect this value. Is there any way to dynamically calculate this contrast ratio as well?

[JayPanoz]

I know they have had issues specc’ing this in CSS as it’s a pretty popular issue but that means lots of options exist in JS/TS-land. Even React actually – with an explainer in the ReadMe.

I guess the main challenge may be building upon the known solutions to find the nearest match with good enough contrast in a dynamic manner, and reliably. But in theory it should be feasible.

[JayPanoz]

Took a deeper look at MUI, which has some world-class and extensive color manipulation utility to achieve some accessibility in their theming.

• utils can be found in colorManipulator – I’m legit sad it doesn’t exist as a standalone package tbh, especially as there is a common approach across contrast utilities so you’re pretty much reimplementing the same functions everywhere;
• they have a contrastThreshold you can set in palette/themes but it’s just a number for comparison (if/else) in order to pick between light and dark text depending on the background color;
• they made it clear it’s the same logic as Bootstrap in a comment;
• this means their theme provider won’t automagically pick a color for you;
• very few utilities go the extra mile to provide values that match the contrast criteria, but they do exist, albeit in a complex form.

[danielweck]

have you looked into https://www.radix-ui.com/colors ?

[JayPanoz]

@danielweck Not yet but thanks for the reminder as I’ve been looking into Libraries and how they manage theming in general 🙏

[JayPanoz]

For reference, how colors are generated in Radix. Couldn’t take an extensive look yet though, so can’t describe what is happening, I’m just logging the URL so that I remember.

[JayPanoz]

Rename the issue given the scope has changed, and will not be limited to immersive mode (and its opacity/alpha).

In the future we may want to provide with automatic generation of palettes, etc. But also helpers that can be used when creating a theme, as can be seen in MUI for instance.

[JayPanoz]

After extending themes properties in the Playground preferences, I guess a sensible first implementation could be to create tonal palettes from main colors e.g. background can be used for hover for instance, text for subdue or disable etc. and pick the first color in the tonal palette that meets a given/preset contrast ratio.

In that case it could either be automatic when a theme property is null or opt-in (an helper function). Results are not going to be necessarily perfect every time but that should at least help get a starting point you can fine-tune if you're not happy with the result.

That said, I’d be happy to hear how others would approach this issue.