Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support gradient backgrounds #34

Open
chris-morgan opened this issue Nov 28, 2019 · 2 comments
Open

Support gradient backgrounds #34

chris-morgan opened this issue Nov 28, 2019 · 2 comments

Comments

@chris-morgan
Copy link

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
Copy link

thedamon commented May 5, 2020

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

@LeaVerou
Copy link
Collaborator

LeaVerou commented May 5, 2020

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

@siege-media siege-media deleted a comment from whiteslack Dec 12, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants