How do I check/pick a font color for good contrast against gradients on a webpage?

Question

So I have, say a button with a gradient from one arbitrary color to another. Is there a systematic way to with code (a) check if the current text color will or will not work and (b) if the current text color doesn't work, is there a way to generate a text color that will work over the gradient? I am changing the gradients of certain buttons, based on user input, and need to update the font color if necessary.

Note, I recognize that this is a fairly well solved problem for solid color backgrounds (for instance, see here: http://www.particletree.com/notebook/calculating-color-contrast-for-legible-text/).

Answer 1

If you're looking for automatic detection, I would maybe start here:

http://khan.github.io/tota11y/

This is a jQuery plug-in that checks background/foreground color for accessibility, on the example if you click the bottom left icon and then click "Contrast" it will point out the issues on your page. It looks like it works with gradients, so perhaps you can modify this in a way that helps you choose your colors.

For more manual approaches:

This chrome plugin says it works with gradients:

https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll

Wave:

http://wave.webaim.org