Color contrast checker filter #1971
tbb2
started this conversation in
Requests for improvements
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
It would be nice to have a liquid filter that could check the contrast of 2 colors and return the number for the contrast. Then the themes could show an error in the OSE when a content editor chooses a background color and text color that are too close. By just returning the number, it's up to the theme developer to tell if the colors are WCAG compliant or not (for instance the contrast of areas with large text doesn't have to be as big as the contrast of areas with smaller text)
something like this, but with smarter/shorter names than what I have:
assign color_contrast = color_scheme.settings.text | contrast_ratio: color_scheme.settings.background;It would also be awesome with built-in options for checking contrast in color schemes: if theme developers could setup that pairs of colors in a color scheme should be checked together, and then the user could see immediately if their colors do not have enough contrast. For instance, if the theme developer could tell Shopify that
color_scheme.settings.textandcolor_scheme.settings.backgroundshould be matched against each other - then if the color scheme picker could show if the contrast is ok for small test, ok for big text or not ok at all. Some colors would have to be matched in multiple pairs, for instance a background would have to be matched against both the regular text color and the link text color.Beta Was this translation helpful? Give feedback.
All reactions