search

omgovich / react-colorful

🎨 A tiny (2,8 KB) color picker component for React and Preact apps
https://omgovich.github.io/react-colorful
MIT License
3.19k stars 100 forks source link

Restrict color choice to accessible colors #169

Closed joachimesque closed 2 years ago

joachimesque commented 2 years ago

Hi!

Your library looks like the perfect candidate for a project I'm building. I'd love to know if it's feasible to restrict the color selector to colors with a minimal contrast with a given base color. For example, I want the color selection to be restricted to colors with a 1:4.5 contrast against white, and colors below that threshold to be impossible to select. A bit like that:

Sans titre

omgovich commented 2 years ago

Hi! Unfortunately, there are no options to do that at the moment and I doubt we are going to add something like that since the library aims to be super small and support the most popular scenarios only.

joachimesque commented 2 years ago

Thank you for your answer! In the end I could hack it together, here are the links in case someone's got the same use case as mine: https://kitten-git-color-selector-add-component-kisskissbankbank.vercel.app/?path=/story/form-colorselect--default

It's using two external libs (one for checking the color contrast, and one that's only providing Hex <-> HSV conversion, which I could do without): https://github.com/KissKissBankBank/kitten/pull/2961/files#diff-6623f6cc65d1955168b649467b3c395f546383b91280ef962a83db016a192dcd

omgovich commented 2 years ago

Wow! Looks nice, great job!

P.S. You can also replace color-convert and wcag-color with my colord package to convert colors and calculate a11y values: https://colord.omgovich.ru/

joachimesque commented 2 years ago

Thank you, that should be simpler to use!

Edit: The switch to colord was easy!

joachimesque commented 2 years ago

A small update, the component now lives in our design system, here: https://kitten.vercel.app/?path=/docs/form-colorselect--default