Support gradient backgrounds

[chris-morgan]

If you enter linear-gradient(lime, green) as the value for the background, it’ll render it, but its calculations are off, because it’s interpreting it as a semi-transparent background.

It should instead calculate the range of contrast ratios, probably by sampling a bunch of colours on the gradient and considering them individually.

(Pathological example: grey on linear-gradient(white, black) has contrast ratios in the range 1–5.31, but if you only sampled the two ends of the gradient you’d get the answer 3.94–5.31.)

[thedamon]

This might be tricky but quite valuable! I can't actually find anywhere online that checks this...

[LeaVerou]

This is not hard for simple cases (you just calculate gradient for all colors, present min and max) but can very tricky in the general case. FWIW right now gradients are not handled at all, what you're seeing is just the browser rendering the gradient because we also feed the input in element.style.background