chroma.js

chroma.js copied to clipboard

Like this: https://github.com/bgrins/TinyColor#readability

Specifically the functionality would be useful for automated checking of readability. I assume there are other ways to achieve this with Chroma, however it would be nice to have semantic methods/properties that convey the intent of the functionality.

In addition:

• https://github.com/bgrins/TinyColor#islight
• https://github.com/bgrins/TinyColor#isdark

doesn't this cover it? https://vis4.net/chromajs/#chroma-contrast

@danfitz36 I mentioned using the chroma in OP, but for me the main issue is that the code would be somewhat opaque; there's a strong chance that magic numbers will appear as developers have to do the extra leg work to get the true/false type of responses that the TinyColor library provides.

@aubergine10 Sounds like a pretty easy patch to me ; )

I was interested in this feature as well, but in my opinion it doesn't need to be added. You can create a wrapper with lodash.maxBy or similar:

(demo)

const background = "black";
const options = ["red", "yellow", "pink", "blue", "green"];
// add 'black', 'white' to array to get the same result as tinycolor.mostReadable
const highestContrast = _.maxBy([...options, "black", "white"], x =>
  chroma.contrast(background, x)
);

@haywirez that is interesting. Maybe we can enhance it further with more fallback situation incase we do not find if it is matching Accessibility readability contrast statistic.

so if there is no color that the contrast matching standard readability the function can suggest the closest on that?

any help appreciated.