search

VEuPathDB / CoreUI

Core UI for VeuPathDB applications. Provides components, style definitions, and utilities to enable developers to rapidly assemble complex applications with consistent UI and UX across our portfolio of sites.
1 stars 0 forks source link

Make components smarter by adding a contrast-checking function #87

Open asizemore opened 2 years ago

asizemore commented 2 years ago

Currently components assume that text or background will be white. Depending on the theme color, this assumption does not always produce accessible results. It would be helpful to add a color-contrast-checking function that can help the component itself decide whether to render white or black (dark gray probably) text in the component.

Since we have such a strong default of white as the non-theme color in components, i might even suggest something like checkContrastWithWhite(themeColor, textSize) and then reports back 'pass' or 'fail'. If the check fails, then the white in the component is replaced with dark gray.

I found two examples here and here so far, but i don't have any real implementation preference at this point. Curious what others think!

dmfalke commented 2 years ago

This is an interesting idea, but I'm wary of automatically changing the color. Maybe an alternative approach would be to do add a warning to the developer console and to allow the user to specify an alternative text color in the theme?

asizemore commented 2 years ago

Ooh i like that idea. I've also learned we don't have to make absolutely everything meet the guidelines, just those that are actionable or crucial to site understanding. For example if an icon is supporting text, the icon doesn't have to meet the guidelines as long as the text does. Long story short this is another reason to have the components add a warning to the console instead of automatically changing the color.