To do that, we need to “draw” the image onto a element and then use the canvas context ( ctx) getImageData() method to produce a list of the image’s colors. Let’s get started! Step 1: Read image colors from the canvasĬanvas lets us “read” the colors contained in an image. And these won’t just be random guesses - we’ll use binary search techniques to make this process quick. Finally, we’ll adjust the opacity of our overlay until the text contrast hits the readability goal.Next, we’ll prepare a color-mixing formula we can use to test different opacity levels on top of that pixel’s color.We’ll find the pixel in the image that has the least contrast with the text.We’ll put the image in an HTML, which will let us read the colors of each pixel in the image.To find the optimal overlay opacity we’ll go through four steps: The overflow is hidden to prevent scrolling and to clip the effect to the. Then, we overlay a blurred version of the background on top of the original background. Our final result will be a value we can apply to the CSS opacity property of the overlay that gives us the right amount of transparency that makes the text 4.5 times lighter than the background. The CSS We first size everything to the viewport. To complicate things a bit, we’ll use an image with both dark and light space and make sure the overlay takes that into account. Given those inputs, we want to find the overlay opacity level that makes the text readable without hiding the image so much that it, too, is difficult to see. Let’s pick a text color, a background image, and an overlay color as a starting point. We’ve said we want readable text on top of a background image, but what does “readable” even mean? For our purposes, we’ll use the WCAG definition of AA-level readability, which says text and background colors need enough contrast between them such that that one color is 4.5 times lighter than the other. Here’s the planįirst, let’s get specific about our goals. But where’s the fun in that? What I want to show you is how this tool works so you have a new way to handle this all-too-common problem. darken The final color is composed of the darkest values of each color channel. This blend mode is equivalent to hard-light but with the layers swapped. We could say “Problem solved!” and simply end this article here. overlay The final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |