{"id":318216,"date":"2020-08-07T14:48:37","date_gmt":"2020-08-07T21:48:37","guid":{"rendered":"https:\/\/css-tricks.com\/?p=318216"},"modified":"2020-08-10T11:50:42","modified_gmt":"2020-08-10T18:50:42","slug":"nailing-the-perfect-contrast-between-light-text-and-a-background-image","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/nailing-the-perfect-contrast-between-light-text-and-a-background-image\/","title":{"rendered":"Nailing the Perfect Contrast Between Light Text and a Background Image"},"content":{"rendered":"\n<p>Have you ever come across a site where light text is sitting on a light background image? If you have, you&#8217;ll know how difficult that is to read. A popular way to avoid that is to use a <a href=\"https:\/\/css-tricks.com\/design-considerations-text-images\/\">transparent overlay<\/a>. But this leads to an important question: Just how transparent <em>should<\/em> that overlay be? It\u2019s not like we\u2019re always dealing with the same font sizes, weights, and colors, and, of course, different images will result in different contrasts.<\/p>\n\n\n\n<p>Trying to stamp out poor text contrast on background images is a lot like playing Whac-a-Mole. Instead of guessing, we can solve this problem with HTML <code>&lt;canvas&gt;<\/code> and a little bit of math.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Like this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNbEqGV\" src=\"\/\/codepen.io\/anon\/embed\/oNbEqGV?height=625&amp;theme-id=1&amp;slug-hash=oNbEqGV&amp;default-tab=result\" height=\"625\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNbEqGV\" title=\"CodePen Embed oNbEqGV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>We could say \u201cProblem solved!\u201d and simply end this article here. But where\u2019s the fun in that? What I want to show you is <em>how<\/em> this tool works so you have a new way to handle this all-too-common problem.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"heres-the-plan\">Here\u2019s the plan<\/h3>\n\n\n<p>First, let\u2019s get specific about our goals. We\u2019ve said we want readable text on top of a background image, but what does \u201creadable\u201d even mean? For our purposes, we\u2019ll use the <a href=\"https:\/\/www.w3.org\/TR\/2016\/NOTE-WCAG20-TECHS-20161007\/G18\" rel=\"noopener\">WCAG definition of AA-level readability<\/a>, which says text and background colors need enough contrast between them such that that one color is 4.5 times lighter than the other.<\/p>\n\n\n\n<p>Let\u2019s pick a text color, a background image, and an overlay color as a starting point. 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. To complicate things a bit, we\u2019ll use an image with both dark and light space and make sure the overlay takes that into account.<\/p>\n\n\n\n<p>Our final result will be a value we can apply to the CSS <code>opacity<\/code> property of the overlay that gives us the right amount of transparency that makes the text 4.5 times lighter than the background.<\/p>\n\n\n\n<figure class=\"wp-block-jetpack-image-compare\"><div class=\"juxtapose\" data-mode=\"horizontal\"><img loading=\"lazy\" decoding=\"async\" id=\"318220\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/Screen-Shot-2020-07-29-at-10.05.42-AM.png?resize=964%2C642&#038;ssl=1\" alt=\"\" width=\"964\" height=\"642\" class=\"image-compare__image-before\" data-recalc-dims=\"1\"\/><img loading=\"lazy\" decoding=\"async\" id=\"318221\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/Screen-Shot-2020-07-29-at-10.06.17-AM.png?resize=964%2C642&#038;ssl=1\" alt=\"\" width=\"964\" height=\"642\" class=\"image-compare__image-after\" data-recalc-dims=\"1\"\/><\/div><figcaption>Optimal overlay opacity: <code>0.521<\/code><\/figcaption><\/figure>\n\n\n\n<p>To find the optimal overlay opacity we\u2019ll go through four steps:<\/p>\n\n\n\n<ol><li>We\u2019ll put the image in an HTML <code>&lt;canvas&gt;<\/code>, which will let us read the colors of each pixel in the image.<\/li><li>We\u2019ll find the pixel in the image that has the least contrast with the text.<\/li><li>Next, we\u2019ll prepare a color-mixing formula we can use to test different opacity levels on top of that pixel\u2019s color.<\/li><li>Finally, we\u2019ll adjust the opacity of our overlay until the text contrast hits the readability goal. And these won\u2019t just be random guesses \u2014 we\u2019ll use binary search techniques to make this process quick.<\/li><\/ol>\n\n\n\n<p>Let\u2019s get started!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"step-1-read-image-colors-from-the-canvas\">Step 1: Read image colors from the canvas<\/h3>\n\n\n<p>Canvas lets us \u201cread\u201d the colors contained in an image. To do that, we need to \u201cdraw\u201d the image onto a <code>&lt;canvas&gt;<\/code> element and then use the canvas context (<code>ctx<\/code>) <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CanvasRenderingContext2D\/getImageData\" rel=\"noopener\">getImageData()<\/a><\/code> method to produce a list of the image\u2019s colors.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">function getImagePixelColorsUsingCanvas(image, canvas) {\n\u00a0 \/\/ The canvas's context (often abbreviated as ctx) is an object\n\u00a0 \/\/ that contains a bunch of functions to control your canvas\n\u00a0 const ctx = canvas.getContext('2d');\n\u2028\n\u00a0 \/\/ The width can be anything, so I picked 500 because it's large\n\u00a0 \/\/ enough to catch details but small enough to keep the\n\u00a0 \/\/ calculations quick.\n\u00a0 canvas.width = 500;\n\u2028\n\u00a0 \/\/ Make sure the canvas matches proportions of our image\n\u00a0 canvas.height = (image.height \/ image.width) * canvas.width;\n\u2028\n\u00a0 \/\/ Grab the image and canvas measurements so we can use them in the next step\n\u00a0 const sourceImageCoordinates = [0, 0, image.width, image.height];\n\u00a0 const destinationCanvasCoordinates = [0, 0, canvas.width, canvas.height];\n\u2028\n\u00a0 \/\/ Canvas's drawImage() works by mapping our image's measurements onto\n\u00a0 \/\/ the canvas where we want to draw it\n\u00a0 ctx.drawImage(\n\u00a0 \u00a0 image,\n\u00a0 \u00a0 ...sourceImageCoordinates,\n\u00a0 \u00a0 ...destinationCanvasCoordinates\n\u00a0 );\n\u2028\n\u00a0 \/\/ Remember that getImageData only works for same-origin or\u00a0\n\u00a0 \/\/ cross-origin-enabled images.\n\u00a0 \/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/CORS_enabled_image\n\u00a0 const imagePixelColors = ctx.getImageData(...destinationCanvasCoordinates);\n\u00a0 return imagePixelColors;\n}<\/code><\/pre>\n\n\n\n<p>The <code>getImageData()<\/code> method gives us a list of numbers representing the colors in each pixel. Each pixel is represented by four numbers: red, green, blue, and opacity (also called \u201calpha\u201d). Knowing this, we can loop through the list of pixels and find whatever info we need. This will be useful in the next step.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"851\" height=\"561\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/image-35.png?resize=851%2C561&#038;ssl=1\" alt=\"Image of a blue and purple rose on a light pink background. A section of the rose is magnified to reveal the RGBA values of a specific pixel.\" class=\"wp-image-318222\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/image-35.png?w=851&amp;ssl=1 851w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/image-35.png?resize=300%2C198&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/image-35.png?resize=768%2C506&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n<h2 class=\"wp-block-heading\" id=\"step-2-find-the-pixel-with-the-least-contrast\">Step 2: Find the pixel with the least contrast<\/h2>\n\n\n<p>Before we do this, we need to know how to calculate contrast. We\u2019ll write a function called <code>getContrast()<\/code> that takes in two colors and spits out a number representing the level of contrast between the two. The higher the number, the better the contrast for legibility.<\/p>\n\n\n\n<p>When I started researching colors for this project, I was expecting to find a simple formula. It turned out there were multiple steps.<\/p>\n\n\n\n<p>To calculate the contrast between two colors, we need to know their luminance levels, which is essentially the brightness (Stacie Arellano does a deep <a href=\"https:\/\/css-tricks.com\/understanding-web-accessibility-color-contrast-guidelines-and-ratios\/#ok-back-to-relative-luminance\">dive on luminance<\/a> that\u2019s worth checking out.)<\/p>\n\n\n\n<p>Thanks to the W3C, we know <a href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/G18.html#G18-procedure\" rel=\"noopener\">the formula<\/a> for calculating contrast using luminance:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const contrast = (lighterColorLuminance + 0.05) \/ (darkerColorLuminance + 0.05);<\/code><\/pre>\n\n\n\n<p>Getting the luminance of a color means we have to convert the color from the regular 8-bit RGB value used on the web (where each color is 0-255) to what\u2019s called <em>linear<\/em> RGB. The reason we need to do this is that brightness doesn\u2019t increase evenly as colors change. We need to convert our colors into a format where the brightness does vary evenly with color changes. That allows us to properly calculate luminance. Again, the <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#relativeluminancedef\" rel=\"noopener\">W3C is a help<\/a> here:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const luminance = (0.2126 * getLinearRGB(r) + 0.7152 * getLinearRGB(g) + 0.0722 * getLinearRGB(b));<\/code><\/pre>\n\n\n\n<p>But wait, there\u2019s more! In order to convert 8-bit RGB (0 to 255) to linear RGB, we need to go through what\u2019s called standard RGB (also called sRGB), which is on a scale from 0 to 1.<\/p>\n\n\n\n<p>So the process goes:&nbsp;<\/p>\n\n\n\n<pre rel=\"\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">8-bit RGB \u2192 standard RGB &nbsp;\u2192 linear RGB \u2192 luminance<\/code><\/pre>\n\n\n\n<p>And once we have the luminance of both colors we want to compare, we can plug in the luminance values to get the contrast between their respective colors.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ getContrast is the only function we need to interact with directly.\n\/\/ The rest of the functions are intermediate helper steps.\nfunction getContrast(color1, color2) {\n\u00a0 const color1_luminance = getLuminance(color1);\n\u00a0 const color2_luminance = getLuminance(color2);\n\u00a0 const lighterColorLuminance = Math.max(color1_luminance, color2_luminance);\n\u00a0 const darkerColorLuminance = Math.min(color1_luminance, color2_luminance);\n\u00a0 const contrast = (lighterColorLuminance + 0.05) \/ (darkerColorLuminance + 0.05);\n\u00a0 return contrast;\n}\n\u2028\nfunction getLuminance({r,g,b}) {\n\u00a0 return (0.2126 * getLinearRGB(r) + 0.7152 * getLinearRGB(g) + 0.0722 * getLinearRGB(b));\n}\nfunction getLinearRGB(primaryColor_8bit) {\n\u00a0 \/\/ First convert from 8-bit rbg (0-255) to standard RGB (0-1)\n\u00a0 const primaryColor_sRGB = convert_8bit_RGB_to_standard_RGB(primaryColor_8bit);\n\u2028\n\u00a0 \/\/ Then convert from sRGB to linear RGB so we can use it to calculate luminance\n\u00a0 const primaryColor_RGB_linear = convert_standard_RGB_to_linear_RGB(primaryColor_sRGB);\n\u00a0 return primaryColor_RGB_linear;\n}\nfunction convert_8bit_RGB_to_standard_RGB(primaryColor_8bit) {\n\u00a0 return primaryColor_8bit \/ 255;\n}\nfunction convert_standard_RGB_to_linear_RGB(primaryColor_sRGB) {\n\u00a0 const primaryColor_linear = primaryColor_sRGB &lt; 0.03928 ?\n\u00a0 \u00a0 primaryColor_sRGB\/12.92 :\n\u00a0 \u00a0 Math.pow((primaryColor_sRGB + 0.055) \/ 1.055, 2.4);\n\u00a0 return primaryColor_linear;\n}<\/code><\/pre>\n\n\n\n<p>Now that we can calculate contrast, we\u2019ll need to look at our image from the previous step and loop through each pixel, comparing the contrast between that pixel\u2019s color and the foreground text color. As we loop through the image\u2019s pixels, we\u2019ll keep track of the worst (lowest) contrast so far, and when we reach the end of the loop, we\u2019ll know the worst-contrast color in the image.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">function getWorstContrastColorInImage(textColor, imagePixelColors) {\n\u00a0 let worstContrastColorInImage;\n\u00a0 let worstContrast = Infinity; \/\/ This guarantees we won't start too low\n\u00a0 for (let i = 0; i &lt; imagePixelColors.data.length; i += 4) {\n\u00a0 \u00a0 let pixelColor = {\n\u00a0 \u00a0 \u00a0 r: imagePixelColors.data[i],\n\u00a0 \u00a0 \u00a0 g: imagePixelColors.data[i + 1],\n\u00a0 \u00a0 \u00a0 b: imagePixelColors.data[i + 2],\n\u00a0 \u00a0 };\n\u00a0 \u00a0 let contrast = getContrast(textColor, pixelColor);\n\u00a0 \u00a0 if(contrast &lt; worstContrast) {\n\u00a0 \u00a0 \u00a0 worstContrast = contrast;\n\u00a0 \u00a0 \u00a0 worstContrastColorInImage = pixelColor;\n\u00a0 \u00a0 }\n\u00a0 }\n\u00a0 return worstContrastColorInImage;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"step-3-prepare-a-colormixing-formula-to-test-overlay-opacity-levels\">Step 3: Prepare a color-mixing formula to test overlay opacity levels<\/h3>\n\n\n<p>Now that we know the worst-contrast color in our image, the next step is to establish how transparent the overlay should be and see how that changes the contrast with the text.<\/p>\n\n\n\n<p>When I first implemented this, I used a separate canvas to mix colors and read the results. However, thanks to Ana Tudor\u2019s <a href=\"https:\/\/css-tricks.com\/adventures-in-css-semi-transparency-land\/\">article about transparency<\/a>, I now know there\u2019s a convenient formula to calculate the resulting color from mixing a base color with a transparent overlay.<\/p>\n\n\n\n<p>For each color channel (red, green, and blue), we\u2019d apply this formula to get the mixed color:<\/p>\n\n\n\n<pre rel=\"\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">mixedColor = baseColor + (overlayColor - baseColor) * overlayOpacity<\/code><\/pre>\n\n\n\n<p>So, in code, that would look like this:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">function mixColors(baseColor, overlayColor, overlayOpacity) {\n\u00a0 const mixedColor = {\n\u00a0 \u00a0 r: baseColor.r + (overlayColor.r - baseColor.r) * overlayOpacity,\n\u00a0 \u00a0 g: baseColor.g + (overlayColor.g - baseColor.g) * overlayOpacity,\n\u00a0 \u00a0 b: baseColor.b + (overlayColor.b - baseColor.b) * overlayOpacity,\n\u00a0 }\n\u00a0 return mixedColor;\n}<\/code><\/pre>\n\n\n\n<p>Now that we\u2019re able to mix colors, we can test the contrast when the overlay opacity value is applied.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">function getTextContrastWithImagePlusOverlay({textColor, overlayColor, imagePixelColor, overlayOpacity}) {\n\u00a0 const colorOfImagePixelPlusOverlay = mixColors(imagePixelColor, overlayColor, overlayOpacity);\n\u00a0 const contrast = getContrast(textColor, colorOfImagePixelPlusOverlay);\n\u00a0 return contrast;\n}<\/code><\/pre>\n\n\n\n<p>With that, we have all the tools we need to find the optimal overlay opacity!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"step-4-find-the-overlay-opacity-that-hits-our-contrast-goal\">Step 4: Find the overlay opacity that hits our contrast goal<\/h3>\n\n\n<p>We can test an overlay\u2019s opacity and see how that affects the contrast between the text and image. We\u2019re going to try a bunch of different opacity levels until we find the contrast that hits our mark where the text is 4.5 times lighter than the background. That may sound crazy, but don\u2019t worry; we\u2019re not going to guess randomly. We\u2019ll use a binary search, which is a process that lets us quickly narrow down the possible set of answers until we get a precise result.<\/p>\n\n\n\n<p>Here\u2019s how a binary search works:<\/p>\n\n\n\n<ul><li>Guess in the middle.<\/li><li>If the guess is too high, we eliminate the top half of the answers. Too low? We eliminate the bottom half instead.<\/li><li>Guess in the middle of that new range.<\/li><li>Repeat this process until we get a value.<\/li><\/ul>\n\n\n\n<p>I just so happen to have a tool to show how this works:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ExPpBJW\" src=\"\/\/codepen.io\/anon\/embed\/ExPpBJW?height=650&amp;theme-id=1&amp;slug-hash=ExPpBJW&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ExPpBJW\" title=\"CodePen Embed ExPpBJW\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>In this case, we\u2019re trying to guess an opacity value that\u2019s between 0 and 1. So, we\u2019ll guess in the middle, test whether the resulting contrast is too high or too low, eliminate half the options, and guess again. If we limit the binary search to eight guesses, we\u2019ll get a precise answer in a snap.<\/p>\n\n\n\n<p>Before we start searching, we\u2019ll need a way to check if an overlay is even necessary in the first place. There\u2019s no point optimizing an overlay we don\u2019t even need!<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">function isOverlayNecessary(textColor, worstContrastColorInImage, desiredContrast) {\n\u00a0 const contrastWithoutOverlay = getContrast(textColor, worstContrastColorInImage);\n\u00a0 return contrastWithoutOverlay &lt; desiredContrast;\n}<\/code><\/pre>\n\n\n\n<p>Now we can use our binary search to look for the optimal overlay opacity:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">function findOptimalOverlayOpacity(textColor, overlayColor, worstContrastColorInImage, desiredContrast) {\n\u00a0 \/\/ If the contrast is already fine, we don't need the overlay,\n\u00a0 \/\/ so we can skip the rest.\n\u00a0 const isOverlayNecessary = isOverlayNecessary(textColor, worstContrastColorInImage, desiredContrast);\n\u00a0 if (!isOverlayNecessary) {\n\u00a0 \u00a0 return 0;\n\u00a0 }\n\u2028\n\u00a0 const opacityGuessRange = {\n\u00a0 \u00a0 lowerBound: 0,\n\u00a0 \u00a0 midpoint: 0.5,\n\u00a0 \u00a0 upperBound: 1,\n\u00a0 };\n\u00a0 let numberOfGuesses = 0;\n\u00a0 const maxGuesses = 8;\n\u2028\n\u00a0 \/\/ If there's no solution, the opacity guesses will approach 1,\n\u00a0 \/\/ so we can hold onto this as an upper limit to check for the no-solution case.\n\u00a0 const opacityLimit = 0.99;\n\u2028\n\u00a0 \/\/ This loop repeatedly narrows down our guesses until we get a result\n\u00a0 while (numberOfGuesses &lt; maxGuesses) {\n\u00a0 \u00a0 numberOfGuesses++;\n\u2028\n\u00a0 \u00a0 const currentGuess = opacityGuessRange.midpoint;\n\u00a0 \u00a0 const contrastOfGuess = getTextContrastWithImagePlusOverlay({\n\u00a0 \u00a0 \u00a0 textColor,\n\u00a0 \u00a0 \u00a0 overlayColor,\n\u00a0 \u00a0 \u00a0 imagePixelColor: worstContrastColorInImage,\n\u00a0 \u00a0 \u00a0 overlayOpacity: currentGuess,\n\u00a0 \u00a0 });\n\u2028\n\u00a0 \u00a0 const isGuessTooLow = contrastOfGuess &lt; desiredContrast;\n\u00a0 \u00a0 const isGuessTooHigh = contrastOfGuess > desiredContrast;\n\u00a0 \u00a0 if (isGuessTooLow) {\n\u00a0 \u00a0 \u00a0 opacityGuessRange.lowerBound = currentGuess;\n\u00a0 \u00a0 }\n\u00a0 \u00a0 else if (isGuessTooHigh) {\n\u00a0 \u00a0 \u00a0 opacityGuessRange.upperBound = currentGuess;\n\u00a0 \u00a0 }\n\u2028\n\u00a0 \u00a0 const newMidpoint = ((opacityGuessRange.upperBound - opacityGuessRange.lowerBound) \/ 2) + opacityGuessRange.lowerBound;\n\u00a0 \u00a0 opacityGuessRange.midpoint = newMidpoint;\n\u00a0 }\n\u2028\n\u00a0 const optimalOpacity = opacityGuessRange.midpoint;\n\u00a0 const hasNoSolution = optimalOpacity > opacityLimit;\n\u2028\n\u00a0 if (hasNoSolution) {\n\u00a0 \u00a0 console.log('No solution'); \/\/ Handle the no-solution case however you'd like\n\u00a0 \u00a0 return opacityLimit;\n\u00a0 }\n\u00a0 return optimalOpacity;\n}<\/code><\/pre>\n\n\n\n<p>With our experiment complete, we now know exactly how transparent our overlay needs to be to keep our text readable without hiding the background image too much.<\/p>\n\n\n\n<p>We did it!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"improvements-and-limitations\">Improvements and limitations<\/h3>\n\n\n<p>The methods we\u2019ve covered only work if the text color and the overlay color have enough contrast to begin with. For example, if you were to choose a text color that\u2019s the same as your overlay, there won\u2019t be an optimal solution unless the image doesn\u2019t need an overlay at all.<\/p>\n\n\n\n<p>In addition, even if the contrast is mathematically acceptable, that doesn&#8217;t always guarantee it&#8217;ll look great. This is especially true for dark text with a light overlay and a busy background image. Various parts of the image may distract from the text, making it difficult to read even when the contrast is numerically fine. That&#8217;s why the <a href=\"https:\/\/css-tricks.com\/design-considerations-text-images\/\">popular recommendation<\/a> is to use light text on a dark background.<\/p>\n\n\n\n<p>We also haven\u2019t taken where the pixels are located into account or how many there are of each color. One drawback of that is that a pixel in the corner could possibly exert too much influence on the result. The benefit, however, is that we don\u2019t have to worry about how the image\u2019s colors are distributed or where the text is because, as long as we\u2019ve handled where the least amount of contrast is, we\u2019re safe everywhere else.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"i-learned-a-few-things-along-the-way\">I learned a few things along the way<\/h3>\n\n\n<p>There are some things I walked away with after this experiment, and I&#8217;d like to share them with you:<\/p>\n\n\n\n<ul><li><strong>Getting specific about a goal really helps! <\/strong>We started with a vague goal of wanting readable text on an image, and we ended up with a specific contrast level we could strive for.<\/li><li><strong>It\u2019s so important to be clear about the terms. <\/strong>For example, standard RGB wasn\u2019t what I expected. I learned that what I thought of as \u201cregular\u201d RGB (0 to 255) is formally called 8-bit RGB. Also, I thought the \u201cL\u201d in the equations I researched meant \u201clightness,\u201d but it actually means \u201cluminance,\u201d which is not to be confused with \u201cluminosity.\u201d Clearing up terms helps how we code as well as how we discuss the end result.<\/li><li><strong>Complex doesn\u2019t mean unsolvable. <\/strong>Problems that sound hard can be broken into smaller, more manageable pieces.<\/li><li><strong>When you walk the path, you spot the shortcuts.<\/strong> For the common case of white text on a black transparent overlay, you\u2019ll never need an opacity over 0.54 to achieve WCAG AA-level readability.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"in-summary\">In summary\u2026<\/h3>\n\n\n<p>You now have a way to <a href=\"https:\/\/codepen.io\/yaphi1\/live\/oNbEqGV\" rel=\"noopener\">make your text readable on a background image<\/a> without sacrificing too much of the image. If you\u2019ve gotten this far, I hope I\u2019ve been able to give you a general idea of how it all works.<\/p>\n\n\n\n<p>I originally started this project because I saw (and made) too many website banners where the text was tough to read against a background image or the background image was overly obscured by the overlay. I wanted to do something about it, and I wanted to give others a way to do the same. I wrote this article in hopes that you\u2019d come away with a better understanding of readability on the web. I hope you\u2019ve learned some neat canvas tricks too.<\/p>\n\n\n\n<p>If you\u2019ve done something interesting with readability or canvas, I\u2019d love to hear about it in the comments!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever come across a site where light text is sitting on a light background image? If you have, you&#8217;ll know how difficult that is to read. A popular way to avoid that is to use a transparent overlay. But this leads to an important question: Just how transparent should that overlay be? It\u2019s [&hellip;]<\/p>\n","protected":false},"author":224336,"featured_media":318310,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[466,707,432],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/contrast-bg.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":190610,"url":"https:\/\/css-tricks.com\/design-considerations-text-images\/","url_meta":{"origin":318216,"position":0},"title":"Design Considerations: Text on Images","date":"December 12, 2014","format":false,"excerpt":"I enjoyed Erik D. Kennedy's post 7 Rules for Creating Gorgeous UI (Part 2). In it, his Rule 4 is: Learn the methods of overlaying text on images. I thought we could take a look at all his points, code them up, and note anything that comes up technically. Tinting\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":360899,"url":"https:\/\/css-tricks.com\/css-dappled-light-effect\/","url_meta":{"origin":318216,"position":1},"title":"A Serene CSS Dappled Light Effect","date":"January 19, 2022","format":false,"excerpt":"There\u2019s a serene warmth to the early evening sunlight peaking through rustling leaves. Artists use dappled light to create a soft, hypnotic effect. Bedford Dwellings by Ron Donoughe (2013) We can create the same sort of dappled light effect in web design, using it on photos and illustrations to add\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/dappled-light.-featuredjpg.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":167745,"url":"https:\/\/css-tricks.com\/frosting-glass-css-filters\/","url_meta":{"origin":318216,"position":2},"title":"Frosting Glass with CSS Filters","date":"April 7, 2014","format":false,"excerpt":"While filters such as contrast, saturate, and blur have existed in image editors for some time, delivering them on the web has historically required serving images with those filters already applied. As browsers begin to incorporate filters as part of the web platform, we can begin breaking down complex visual\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":351302,"url":"https:\/\/css-tricks.com\/grainy-gradients\/","url_meta":{"origin":318216,"position":3},"title":"Grainy Gradients","date":"September 13, 2021","format":false,"excerpt":"Browse through Dribbble or Behance, and you\u2019ll find designers using a simple technique to add texture to an image: noise. Adding noise makes otherwise solid colors or smooth gradients, such as shadows, more realistic. But despite designers\u2019 affinity for texture, noise is rarely used in web design. In this article,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/noisy-gradient.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":354804,"url":"https:\/\/css-tricks.com\/css-ing-candy-ghost-buttons\/","url_meta":{"origin":318216,"position":4},"title":"CSS-ing Candy Ghost Buttons","date":"October 31, 2021","format":false,"excerpt":"Recently, while looking for some ideas on what to code as I have zero artistic sense so the only thing I can do is find pretty things that other people have come up with and remake them with clean and compact code... I came across these candy ghost buttons! They\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/target_candy_boo_result-1.png?fit=799%2C279&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":336679,"url":"https:\/\/css-tricks.com\/platform-news-prefers-contrast-mathml-is-and-css-background-initial-values\/","url_meta":{"origin":318216,"position":5},"title":"Platform News: Prefers Contrast, MathML, :is(), and CSS Background Initial Values","date":"March 19, 2021","format":false,"excerpt":"In this week\u2019s round-up, prefers-contrast lands in Safari, MathML gets some attention, :is() is actually quite forgiving, more ADA-related lawsuits, inconsistent initial values for CSS Backgrounds properties can lead to unwanted \u2014 but sorta neat \u2014 patterns. The prefers-contrast: more media query is supported in Safari Preview After prefers-reduced-motion in\u2026","rel":"","context":"In &quot;Weekly Platform News&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/wpn-20210319.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/contrast-bg.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/318216"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/224336"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=318216"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/318216\/revisions"}],"predecessor-version":[{"id":319001,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/318216\/revisions\/319001"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/318310"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=318216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=318216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=318216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}