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: 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. 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. 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. 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. overlay The final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter. 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. I am trying to add opacity on top of the image so that the < h1 > tag is easier to read. What I am trying to achieve sounds very simple but I can't get it to work. We could say “Problem solved!” and simply end this article here. 1 This question already has answers here : Set opacity of background image without affecting child elements (15 answers) CSS background-image-opacity (13 answers) Closed 5 years ago.
0 kommentar(er)
