[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Farticles\u002Fmake-text-more-readable-on-background-images":3},{"id":4,"title":5,"body":6,"date":616,"description":617,"extension":618,"head":619,"imageUrl":620,"meta":621,"navigation":622,"ogImage":619,"path":623,"robots":619,"schemaOrg":619,"seo":624,"sitemap":625,"stem":626,"__hash__":627},"articles\u002Farticles\u002F08.Make text more readable on background images.md","How to make text stand out from the background image and make it more readable",{"type":7,"value":8,"toc":606},"minimark",[9,13,17,25,28,33,36,46,49,52,55,59,70,76,79,98,101,104,109,121,126,140,149,157,160,163,168,171,174,177,190,329,332,335,350,353,356,479,482,485,490,494,497,500,503,506,510,519,522,525,529,533,536,539,543,552,555,558,566,570,602],[10,11,5],"h1",{"id":12},"how-to-make-text-stand-out-from-the-background-image-and-make-it-more-readable",[14,15,16],"p",{},"A common problem is placing text on images.",[14,18,19,20,24],{},"The challenge isn't that you can't literally place it on an image, but rather an accessibility issue:\nhow to make sure that the text will be ",[21,22,23],"strong",{},"readable"," on a photo?\nEspecially if it's uploaded by users, and you don't know in advance what it's going to look like.",[14,26,27],{},"In this article, I'll try to cover most of the solutions to make text accessible.",[29,30,32],"h2",{"id":31},"when-the-issue-arises","When the issue arises?",[14,34,35],{},"We should consider two cases:",[37,38,39,43],"ol",{},[40,41,42],"li",{},"When you know in advance what image will be used",[40,44,45],{},"When you don't know which image will be used, e.g. users upload their images",[14,47,48],{},"In both cases, you can face text accessibility issues. To demonstrate this, let's have a look at the following picture.",[50,51],"image-with-text",{},[14,53,54],{},"Apparently, the text is not easy to read because it has low contrast.\nDepending on whether we know which image is going to be used, we can apply different techniques.\nBut first, let's define what contrast is.",[29,56,58],{"id":57},"what-is-contrast","What is contrast?",[14,60,61,62,69],{},"There are few models that define contrast. One which is widely adopted is WCAG.\nThe latest version of WCAG (2.2) defines ",[63,64,68],"a",{"href":65,"rel":66},"https:\u002F\u002Fwww.w3.org\u002FTR\u002FWCAG22\u002F#dfn-contrast-ratio",[67],"nofollow","contrast ratio"," as follows:",[71,72,73],"blockquote",{},[14,74,75],{},"(L1 + 0.05) \u002F (L2 + 0.05)",[14,77,78],{},"Where",[80,81,82,91],"ul",{},[40,83,84,85,90],{},"L1 is the ",[63,86,89],{"href":87,"rel":88},"https:\u002F\u002Fwww.w3.org\u002FTR\u002FWCAG22\u002F#dfn-relative-luminance",[67],"relative luminance"," of the lighter of the colors, and",[40,92,93,94,97],{},"L2 is the ",[63,95,89],{"href":87,"rel":96},[67]," of the darker of the colors.",[14,99,100],{},"While this might sound intimidating, what we need to know is whether the text has good contrast or not.",[14,102,103],{},"However, what is a good contrast? There are two levels: AA and AAA.",[14,105,106],{},[21,107,108],{},"AA Contrast Requirements",[80,110,111,118],{},[40,112,113,114,117],{},"For regular text and images of text, a contrast ratio of at least ",[21,115,116],{},"4.5:1"," is required.",[40,119,120],{},"For large text (at least 18 point or 14 point bold) and large images of text, a lower contrast ratio of at least **3:1\n** is acceptable.",[14,122,123],{},[21,124,125],{},"AAA Contrast Requirements",[80,127,128,135],{},[40,129,130,131,134],{},"This level requires a higher contrast ratio of at least ",[21,132,133],{},"7:1"," for normal text and images of text.",[40,136,137,138,117],{},"For large text and images of text, a contrast ratio of at least ",[21,139,116],{},[14,141,142,143,148],{},"The easiest way to check if you meet the requirements is to use\na ",[63,144,147],{"href":145,"rel":146},"https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F",[67],"contrast checker",".",[14,150,151,152,148],{},"But how do we know if the text on an image meets AA\u002FAAA requirements when the background is not static? Well,\nthere is an awesome ",[63,153,156],{"href":154,"rel":155},"https:\u002F\u002Fcodepen.io\u002Fyaphi1\u002Fpen\u002FoNbEqGV",[67],"tool from Yaphi",[14,158,159],{},"However, all this works fine if we know in advance which image we will use.",[14,161,162],{},"A more common scenario occurs when users upload their images, not us.\nI will go over all the techniques to make the text stand out more from the background image.\nMost of these techniques (if not all) work for both scenarios.",[164,165,167],"h3",{"id":166},"adding-an-overlay","Adding an overlay",[14,169,170],{},"This is the most popular method to make text more readable. You should simply add a dark overlay above the image.",[14,172,173],{},"It can be done manually, if we know which image we're going to use in advance, or via CSS if the image is unknown.\nIt might not be exactly black color with some transparency. Other colors can be used as well, if we stick to our\ngoal to make the text accessible.",[175,176],"image-with-text-and-dark-overlay",{},[14,178,179,180,184,185,189],{},"Here’s a sample Tailwind-based code snippet. The key class that does the work is ",[181,182,183],"code",{},"brightness-50",".\nEssentially it applies ",[63,186,188],{"href":187},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Ffilter","filter: brightness(0.5)","\nwhich is widely supported.",[191,192,197],"pre",{"className":193,"code":194,"language":195,"meta":196,"style":196},"language-html shiki shiki-themes github-dark","\u003Cdiv class=\"relative\">\n  \u003Cimg src=\"\u002Fimg\u002Ftext-on-images\u002Fsample.png\" class=\"brightness-50\" alt=\"\">\n  \u003Cdiv class=\"absolute inset-0 flex items-center justify-center\">\n    \u003Cdiv class=\"text-center max-w-lg text-white text-4xl\">\n      How to stop procrastinating and get to work?\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","html","",[181,198,199,226,260,276,293,299,309,319],{"__ignoreMap":196},[200,201,204,208,212,216,219,223],"span",{"class":202,"line":203},"line",1,[200,205,207],{"class":206},"s95oV","\u003C",[200,209,211],{"class":210},"s4JwU","div",[200,213,215],{"class":214},"svObZ"," class",[200,217,218],{"class":206},"=",[200,220,222],{"class":221},"sU2Wk","\"relative\"",[200,224,225],{"class":206},">\n",[200,227,229,232,235,238,240,243,245,247,250,253,255,258],{"class":202,"line":228},2,[200,230,231],{"class":206},"  \u003C",[200,233,234],{"class":210},"img",[200,236,237],{"class":214}," src",[200,239,218],{"class":206},[200,241,242],{"class":221},"\"\u002Fimg\u002Ftext-on-images\u002Fsample.png\"",[200,244,215],{"class":214},[200,246,218],{"class":206},[200,248,249],{"class":221},"\"brightness-50\"",[200,251,252],{"class":214}," alt",[200,254,218],{"class":206},[200,256,257],{"class":221},"\"\"",[200,259,225],{"class":206},[200,261,263,265,267,269,271,274],{"class":202,"line":262},3,[200,264,231],{"class":206},[200,266,211],{"class":210},[200,268,215],{"class":214},[200,270,218],{"class":206},[200,272,273],{"class":221},"\"absolute inset-0 flex items-center justify-center\"",[200,275,225],{"class":206},[200,277,279,282,284,286,288,291],{"class":202,"line":278},4,[200,280,281],{"class":206},"    \u003C",[200,283,211],{"class":210},[200,285,215],{"class":214},[200,287,218],{"class":206},[200,289,290],{"class":221},"\"text-center max-w-lg text-white text-4xl\"",[200,292,225],{"class":206},[200,294,296],{"class":202,"line":295},5,[200,297,298],{"class":206},"      How to stop procrastinating and get to work?\n",[200,300,302,305,307],{"class":202,"line":301},6,[200,303,304],{"class":206},"    \u003C\u002F",[200,306,211],{"class":210},[200,308,225],{"class":206},[200,310,312,315,317],{"class":202,"line":311},7,[200,313,314],{"class":206},"  \u003C\u002F",[200,316,211],{"class":210},[200,318,225],{"class":206},[200,320,322,325,327],{"class":202,"line":321},8,[200,323,324],{"class":206},"\u003C\u002F",[200,326,211],{"class":210},[200,328,225],{"class":206},[14,330,331],{},"However, the overlay should not necessarily be dark.",[14,333,334],{},"This is a nice trick I learned from RefactoringUI. The idea is to",[37,336,337,340,343],{},[40,338,339],{},"Desaturate your image (set saturation to zero). So that it has only white and black colors",[40,341,342],{},"Put an overlay on top of the image with your brand color (or any color you want)",[40,344,345,346,349],{},"Select ",[181,347,348],{},"multiply"," as the blend mode (in Figma or another editor)",[351,352],"image-with-text-and-colored-overlay",{},[14,354,355],{},"Here is a sample code for this:",[191,357,359],{"className":193,"code":358,"language":195,"meta":196,"style":196},"\u003Cdiv class=\"relative\">\n  \u003Cimg src=\"\u002Fimg\u002Ftext-on-images\u002Fsample.png\" class=\"grayscale\" alt=\"\"\u002F>\n  \u003Cdiv class=\"absolute inset-0 flex items-center justify-center bg-teal-500 mix-blend-multiply\"\u002F>\n  \u003Cdiv class=\"absolute inset-0 flex items-center justify-center\">\n    \u003Cdiv class=\"text-center max-w-lg text-white text-4xl\">\n      How to stop procrastinating and get to work?\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[181,360,361,375,403,422,436,450,454,462,470],{"__ignoreMap":196},[200,362,363,365,367,369,371,373],{"class":202,"line":203},[200,364,207],{"class":206},[200,366,211],{"class":210},[200,368,215],{"class":214},[200,370,218],{"class":206},[200,372,222],{"class":221},[200,374,225],{"class":206},[200,376,377,379,381,383,385,387,389,391,394,396,398,400],{"class":202,"line":228},[200,378,231],{"class":206},[200,380,234],{"class":210},[200,382,237],{"class":214},[200,384,218],{"class":206},[200,386,242],{"class":221},[200,388,215],{"class":214},[200,390,218],{"class":206},[200,392,393],{"class":221},"\"grayscale\"",[200,395,252],{"class":214},[200,397,218],{"class":206},[200,399,257],{"class":221},[200,401,402],{"class":206},"\u002F>\n",[200,404,405,407,409,411,413,416,420],{"class":202,"line":262},[200,406,231],{"class":206},[200,408,211],{"class":210},[200,410,215],{"class":214},[200,412,218],{"class":206},[200,414,415],{"class":221},"\"absolute inset-0 flex items-center justify-center bg-teal-500 mix-blend-multiply\"",[200,417,419],{"class":418},"s6RL2","\u002F",[200,421,225],{"class":206},[200,423,424,426,428,430,432,434],{"class":202,"line":278},[200,425,231],{"class":206},[200,427,211],{"class":210},[200,429,215],{"class":214},[200,431,218],{"class":206},[200,433,273],{"class":221},[200,435,225],{"class":206},[200,437,438,440,442,444,446,448],{"class":202,"line":295},[200,439,281],{"class":206},[200,441,211],{"class":210},[200,443,215],{"class":214},[200,445,218],{"class":206},[200,447,290],{"class":221},[200,449,225],{"class":206},[200,451,452],{"class":202,"line":301},[200,453,298],{"class":206},[200,455,456,458,460],{"class":202,"line":311},[200,457,304],{"class":206},[200,459,211],{"class":210},[200,461,225],{"class":206},[200,463,464,466,468],{"class":202,"line":321},[200,465,314],{"class":206},[200,467,211],{"class":210},[200,469,225],{"class":206},[200,471,473,475,477],{"class":202,"line":472},9,[200,474,324],{"class":206},[200,476,211],{"class":210},[200,478,225],{"class":206},[14,480,481],{},"An interesting fact that I found out is that when you de-saturate the original image, then put a color overlay and\nblend it, it reduces the file size.",[14,483,484],{},"Apparently because the image now has a narrower range of color shades, which\nresults in the fact that there is less different type of pixels (I'm not 100% sure though, but I guess it's the reason).",[486,487],"v-image",{"alt":488,"src":489},"How color overlay reduces file size","\u002Fimg\u002Ftext-on-images\u002Fcomparing-sizes.png",[164,491,493],{"id":492},"putting-text-in-a-box","Putting text in a box",[14,495,496],{},"Another approach is to increase contrast locally — by placing the text inside a semi-transparent box.",[498,499],"image-with-text-in-black-box",{},[14,501,502],{},"The box can again have different colors, be opaque, or have a blurred background.\nIt doesn't matter as long as the text inside it is readable.",[504,505],"image-with-text-in-white-box",{},[164,507,509],{"id":508},"using-linear-gradients","Using linear gradients",[14,511,512,513,518],{},"Here, I took an image from ",[63,514,517],{"href":515,"rel":516},"https:\u002F\u002Fhundred.user-interface.io",[67],"my book",", as it demonstrates the difference between\nsimply putting a dark overlay and using a linear gradient approach.",[14,520,521],{},"If you know where you're going to place the text, you can make a gradient that goes\ntoward the text, while the rest of the image remains clearer.",[14,523,524],{},"Take a look at the third card.",[486,526],{"alt":527,"src":528},"An image illustrating three variations of text placed on background image","\u002Fimg\u002Ftext-on-images\u002Fgradient-on-images.png",[29,530,532],{"id":531},"wcag-might-not-always-work","WCAG might not always work",[14,534,535],{},"The current WCAG algorithm may not be effective in all situations.\nThere are edge cases where it may lead to incorrect results.",[14,537,538],{},"The most famous one involves an orange button with black and white text on it:",[486,540],{"alt":541,"src":542},"An image illustrating two orange buttons with black and white text on them","\u002Fimg\u002Ftext-on-images\u002Fcontrast-edge-cases.png",[14,544,545,546,551],{},"There was ",[63,547,550],{"href":548,"rel":549},"https:\u002F\u002Fwww.bounteous.com\u002Finsights\u002F2019\u002F03\u002F22\u002Forange-you-accessible-mini-case-study-color-ratio",[67],"a study","\ncomparing which button is easier to read.",[14,553,554],{},"You might naturally think the left button is easier to read, but the contrast checker shows\nthat the right one meets the standard, while the left does not.",[14,556,557],{},"This discrepancy occurs because the current algorithm does not account for several factors.\nHowever, a new algorithm called ACPA is likely to be adopted in WCAG 3.",[14,559,560,561,148],{},"You can play around with\nthe ",[63,562,565],{"href":563,"rel":564},"https:\u002F\u002Fwww.achecks.org\u002Fapca-wcag-3-accessible-colour-contrast-checker\u002F",[67],"ACPA contrast checker",[29,567,569],{"id":568},"further-reading","Further reading",[80,571,572,579,586,594],{},[40,573,574,578],{},[63,575,577],{"href":576},"\u002Farticles\u002Fvisibility-of-system-status","Visibility of System Status"," – A foundational UX principle that reminds us to\nkeep users informed about what’s happening in the interface, with real-life and digital examples.",[40,580,581,585],{},[63,582,584],{"href":583},"\u002Farticles\u002Fmodals-and-user-experience","Modals and user experience"," - A deep dive into when modals help — and when they\nsilently ruin UX. Includes real-world patterns, accessibility concerns, and implementation traps.",[40,587,588,593],{},[63,589,592],{"href":590,"rel":591},"https:\u002F\u002Fwww.smashingmagazine.com\u002F2023\u002F08\u002Fdesigning-accessible-text-over-images-part1",[67],"Designing Accessible Text Over Images: Part 1"," -\nA Smashing Magazine guide with theory, contrast rules, and design foundations for legible text over imagery.",[40,595,596,601],{},[63,597,600],{"href":598,"rel":599},"https:\u002F\u002Fwww.smashingmagazine.com\u002F2023\u002F08\u002Fdesigning-accessible-text-over-images-part2",[67],"Designing Accessible Text Over Images: Part 2"," -\nThe second part focuses on CSS techniques, overlays, and practical implementation tips — highly recommended.",[603,604,605],"style",{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s6RL2, html code.shiki .s6RL2{--shiki-default:#FDAEB7;--shiki-default-font-style:italic}",{"title":196,"searchDepth":228,"depth":228,"links":607},[608,609,614,615],{"id":31,"depth":228,"text":32},{"id":57,"depth":228,"text":58,"children":610},[611,612,613],{"id":166,"depth":262,"text":167},{"id":492,"depth":262,"text":493},{"id":508,"depth":262,"text":509},{"id":531,"depth":228,"text":532},{"id":568,"depth":228,"text":569},"2024-05-01T01:38:48+04:00","Placing text on images seems easy — until users upload their own.  Here's a practical guide to making sure your text stays readable, accessible, and well-designed in any case.\n","md",null,"\u002Fimg\u002Fsocial.png",{},true,"\u002Farticles\u002Fmake-text-more-readable-on-background-images",{"title":5,"description":617},{"loc":623},"articles\u002F08.Make text more readable on background images","zHXkK9UYFVIN64MqyLPUaQorxh59gYsTR3D-jxy8LQo"]