{"id":300,"date":"2023-08-04T08:00:00","date_gmt":"2023-08-04T08:00:00","guid":{"rendered":"http:\/\/suimy.me\/?p=300"},"modified":"2024-05-01T17:01:44","modified_gmt":"2024-05-01T17:01:44","slug":"designing-accessible-text-over-images-best-practices-techniques-and-resources-part-1","status":"publish","type":"post","link":"http:\/\/suimy.me\/index.php\/2023\/08\/04\/designing-accessible-text-over-images-best-practices-techniques-and-resources-part-1\/","title":{"rendered":"Designing Accessible Text Over Images: Best Practices, Techniques, And Resources (Part 1)"},"content":{"rendered":"<p>              <title>Designing Accessible Text Over Images: Best Practices, Techniques, And Resources (Part 1)<\/title><\/p>\n<article>\n<header>\n<h1>Designing Accessible Text Over Images: Best Practices, Techniques, And Resources (Part 1)<\/h1>\n<address>Hannah Milan<\/address>\n<p>                  2023-08-04T08:00:00+00:00<br \/>\n                  2024-05-01T16:05:07+00:00<br \/>\n                <\/header>\n<p>What is the <em>text over images<\/em> design pattern? How do we apply this pattern to our designs without sacrificing legibility and readability?<\/p>\n<p>The text over images design pattern is a design technique used to place text on top of images. It is often used to provide information about the image or to serve as the main website navigation. However, this technique can quickly sacrifice legibility and readability if there is not enough contrast between the text and the image. To prevent this, designers need to ensure that the text and the image have a <strong>high enough contrast ratio<\/strong> to be legible and readable. Additionally, designers should also make sure the <strong>text is positioned in the right place<\/strong>, away from any image elements that might cause confusion, distraction, or make it difficult to read.<\/p>\n<blockquote><p>\u201cBecause images play such an important role, often designers end up placing text over an image to leverage the attention-grabbing aspect of the photo while providing text-based content to communicate actual information. However, these endeavors commonly backfire, usually when the <a href=\"https:\/\/www.nngroup.com\/articles\/low-contrast\/\">contrast between the text and the background is too low<\/a>.\u201d<\/p>\n<p>\u2014 Aurora Harley, \u201c<a href=\"https:\/\/www.nngroup.com\/articles\/text-over-images\/\">Ensure High Contrast for Text Over Images<\/a>\u201d (NN\/g Nielsen Group)<\/p><\/blockquote>\n<p>Before going forward, here are some <strong>useful resources<\/strong> (on how you can apply these techniques in practice with HTML\/CSS) that are worth checking out:<\/p>\n<ul>\n<li>\u201c<a href=\"https:\/\/medium.com\/@erikdkennedy\/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96\">7 Rules For Creating Gorgeous UI &#8211; Part 2<\/a>,\u201d by <a href=\"https:\/\/twitter.com\/erikdkennedy\">Erik Kennedy<\/a><\/li>\n<li>\u201c<a href=\"https:\/\/ishadeed.com\/article\/handling-text-over-image-css\/\">Handling Text Over Images by CSS<\/a>,\u201d by <a href=\"https:\/\/twitter.com\/shadeed9\">Ahmad Shadeed<\/a><\/li>\n<li>\u201c<a href=\"https:\/\/css-tricks.com\/design-considerations-text-images\/\">Design Considerations: Text On Images<\/a>,\u201d by <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">Chris Coyier<\/a><\/li>\n<li>\u201c<a href=\"https:\/\/twitter.com\/addyosmani\/status\/1365735686838493187\">How Spotify Makes Text On Images Readable<\/a>,\u201d a Twitter thread by <a href=\"https:\/\/twitter.com\/addyosmani\">Addy Osmani<\/a><\/li>\n<\/ul>\n<h2 id=\"how-to-design-a-text-over-an-image\">How To Design A Text Over An Image<\/h2>\n<p>Admittedly, when I was starting my design career, and I had very little accessibility knowledge, one of the main things I used in my designs was the text over images design pattern, without me knowing that I was hurting my users who have low vision.<\/p>\n<blockquote><p>\u201cA picture says a thousand words. But sometimes, images alone won\u2019t work. This is why typography still proves to be a vital aspect of design despite the focus on more visual content. Remember that the need for visual content does not tell you to stop adding text to your designs \u2014 it simply reminds you to do so in the most tasteful and stylish way possible. And, of course, readability should not be sacrificed in the name of design. You can\u2019t add text that people can barely understand, then argue that it\u2019s a piece of art. Sending a message that cannot be deciphered defies the purpose of what you\u2019re doing.\u201d<\/p>\n<p>\u2014 Igor Ovsyannykov, \u201c<a href=\"https:\/\/creativemarket.com\/blog\/typography-tricks-readability\">10 Typography Tricks to Make Your Text Much More Readable<\/a>\u201d<\/p><\/blockquote>\n<p>Yet accessibility is a key aspect of design, and working with typography is one of the cornerstones of UX design. There are many typography principles that will help you create user-friendly designs. In the following sections of the article, you will learn more about how you can improve your design <em>without<\/em> sacrificing the accessibility aspect and how to combine text and images better.<\/p>\n<blockquote><p>According to <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/contrast-minimum\">WCAG Success Criterion 1.4.3<\/a>, make sure that your text on images should meet the minimum contrast of<\/p>\n<ul>\n<li><em><strong>3:1<\/strong> for large text (text bigger than 18 pt normal, or text bigger than 14 pt bold);<\/em><\/li>\n<li><em><strong>4.5:1<\/strong> for body text (text lower than 18 pt normal, or text lower than 14 pt bold).<\/em><\/li>\n<\/ul>\n<p>Ensure that a minimum visual contrast ratio of 4.5:1 is maintained between the text and its background. This minimum contrast ratio should also be maintained in the case of <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/images-of-text\">images of text<\/a>.<\/p>\n<p>\u2014 \u201c<a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/contrast-minimum\">Understanding Success Criterion 1.4.3: Contrast (Minimum)<\/a>,\u201d W3.org<\/p><\/blockquote>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <strong><a data-instant href=\"\/printed-books\/touch-design-for-mobile-interfaces\/\">Touch Design for Mobile Interfaces<\/a><\/strong>, Steven Hoober\u2019s brand-new guide on <strong>designing for mobile<\/strong> with proven, universal, human-centric guidelines. <strong>400 pages<\/strong>, jam-packed with in-depth user research and <strong>best practices<\/strong>.<\/p>\n<p><a data-instant href=\"https:\/\/www.smashingmagazine.com\/printed-books\/touch-design-for-mobile-interfaces\/\" class=\"btn btn--green btn--large\">Jump to table of contents\u00a0\u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"https:\/\/www.smashingmagazine.com\/printed-books\/touch-design-for-mobile-interfaces\/\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img loading=\"lazy\" class=\"feature-panel-image-img lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Feature Panel\" width=\"480\" height=\"697\" data-src=\"https:\/\/archive.smashing.media\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b14658fc-bb2d-41a6-8d1a-70eaaf1b8ec8\/touch-design-book-shop-opt.png\"><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"using-an-overlay-technique-over-the-entire-image\">Using An Overlay Technique Over The Entire Image<\/h2>\n<p><strong>Overlays<\/strong> are colored layers such as overlay light, overlay dark, dark gradients, or colored overlays. As a general rule, overlays are used to make images stand out less or to act as a background for the text so that it has better readability and contrast.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-overlay.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"600\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Try This and Avoid This for Accessible Text Over Images design techniques, with the left side showing an example of what to try such as using a dark overlay over a photo and white text on top, and the right side showing an example of what to avoid (white text directly over a photo). The text displayed over the image reads \u2018sky, sea, &amp; you.\u2019\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-overlay.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Overlays are used to make images stand out less or to act as a background for the text. In the example on the left, the contrast is much better, while in the example on the right, the text is barely readable. (Image credit: Photo by <a href=\"https:\/\/unsplash.com\/@d1280?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">dharmendra sahu<\/a> on <a href=\"https:\/\/unsplash.com\/photos\/Ia2Kjtrx8y4?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a>) (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-overlay.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"examples-from-the-wild\">Examples From The Wild<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.strong.app\/\"><strong>Strong App<\/strong><\/a><\/li>\n<\/ul>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-overlay-strong-app.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Strong.app landing webpage with a headline saying \u2018Think less. Lift more.\u2019 and with the subheading \u2018Strong is the simplest, most intuitive workout tracking experience. Trusted over by 3 million users worldwide.\u2019 At the bottom are the Download on the App Store logo and Get it on Google Play logo\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-overlay-strong-app.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a href=\"https:\/\/www.strong.app\/\">Strong.app<\/a> uses a linear colored overlay gradient to increase the contrast ratio between the image and the headlines. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-overlay-strong-app.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<ul>\n<li><a href=\"https:\/\/www.hustonengineering.com\/\"><strong>Huston Engineering<\/strong><\/a><\/li>\n<\/ul>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-overlay-huston-eng.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Hero image of Huston Engineering with text saying \u2018MEP ENGINEERING FIRM. YOUR SYSTEMS. OUR REPUTATION.\u2019 over a red background overlay\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-overlay-huston-eng.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Hero image of the <a href=\"https:\/\/www.hustonengineering.com\/\">Huston Engineering<\/a> that uses a full colored overlay to better highlight the text. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-overlay-huston-eng.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<ul>\n<li><a href=\"https:\/\/dellavite.com\/us\"><strong>Della Vite<\/strong><\/a><\/li>\n<\/ul>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-overlay-dellavite.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A screenshot of the Della Vite website. White letters \u2018PROSECCO RE-IMAGINED\u2019 in the center, on a dark background\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-overlay-dellavite.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The <a href=\"https:\/\/dellavite.com\/us\">Della Vite<\/a> website uses a very dark overlay over a photo, with white colored text with plenty of contrast. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-overlay-dellavite.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"additional-resources-on-this-topic\">Additional Resources On This Topic<\/h3>\n<ul>\n<li><a href=\"https:\/\/codepen.io\/yaphi1\/\">Optimal Overlay Finder<\/a><br \/>\nAn accessibility tool that calculates the ideal opacity to use against your image so that the <a href=\"https:\/\/web.dev\/color-and-contrast-accessibility\/\">contrast<\/a> meets the WCAG 2.1 Success Criterion<\/li>\n<li><a href=\"https:\/\/abookapart.com\/products\/color-accessibility-workflows\"><em>Color Accessibility Workflows<\/em><\/a>, Geri Coady<br \/>\nA book that will teach you what color accessibility is and why it matters<\/li>\n<\/ul>\n<h2 id=\"text-with-scrim-overlay\">Text With Scrim Overlay<\/h2>\n<p>The <strong>scrim<\/strong> design technique uses a semi-transparent, lightweight, and semi-opaque gradient layer that helps text appear more readable against various backgrounds.<\/p>\n<p>According to Google Material Design, \u201cScrims are temporary treatments that can be applied to Material surfaces for the purpose of making content on a surface less prominent.\u201d They help direct user attention to other parts of the screen, away from the surface receiving a scrim.<\/p>\n<blockquote><p>Scrims can be applied in a variety of ways, including the following:<\/p>\n<ul>\n<li>Darkening or lightening the surface and its content.<\/li>\n<li>Reducing the opacity of the surface and its content.<\/li>\n<\/ul>\n<p>Multiple surfaces on a screen at a time can display scrims. Scrims can appear at any elevation, whether in the foreground or background.<\/p>\n<p>\u2014 <a href=\"https:\/\/m2.material.io\/design\/environment\/surfaces.html#properties\">Google Material Design<\/a><\/p><\/blockquote>\n<p>Furthermore, you can explore this technique by using different colors besides black or white colored layers.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-scrim.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"600\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Try This and Avoid This for Accessible Text Over Images design techniques. The left side contains an example of what to try to make accessible text over images, such as using a scrim design technique that uses a semi-transparent or semi-opaque gradient. The right side shows an example of what to avoid. The text displayed over the image reads \u2018sky, mountains, &amp; you\u2019 and is positioned in both examples at the top left corner\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-scrim.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The left side shows a scrim design technique with a semi-transparent gradient. The text in this example has much better contrast than the one on the right. (Image credit: Photo by <a href=\"https:\/\/unsplash.com\/@aleskrivec?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Ales Krivec<\/a> on <a href=\"https:\/\/unsplash.com\/@hannnahhh\/likes?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a>) (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-scrim.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"examples-from-the-wild-1\">Examples From The Wild<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.on-running.com\/en-ch\/\"><strong>On Running<\/strong><\/a><\/li>\n<\/ul>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-scrim-on-running.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"On-running landing hero page. The hero image is a man and a woman running together using on-running shoes. The text is saying \u2018The new Cloudswift 3\u2019, and there\u2019s a sub-heading that says \u2018Crush your personal best on the pavement\u2019 along with a call-to-action button \u2018Shop now\u2019 in black text on a white background\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-scrim-on-running.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a href=\"https:\/\/www.on-running.com\/en-ch\/\">On-running\u2019s<\/a> homepage with a hero image that uses a scrim overlay effect to highlight the text over the image. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-scrim-on-running.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<ul>\n<li><a href=\"https:\/\/www.solancosd.org\/\"><strong>Solanco School District<\/strong><\/a><\/li>\n<\/ul>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-scrim-solancosd-org.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Screenshot of the Solanco School District website that uses the scrim overlay effect on their hero image to improve the readability and legibility of the headline that says \u2018Connecting. Inspiring. Empowering.\u2019\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-scrim-solancosd-org.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Clever way of using scrim overlay as you can see on the <a href=\"https:\/\/www.solancosd.org\/\">Solanco School District<\/a> website: it uses a subtle overlay from left to right. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-scrim-solancosd-org.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<ul>\n<li><a href=\"https:\/\/www.sotogardens.com\/\"><strong>Soto Gardens<\/strong><\/a><\/li>\n<\/ul>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-scrim-sotogardens.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\" Soto Gardens website\u2019s header image uses a scrim overlay technique to make the navigation more readable\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-scrim-sotogardens.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Another example of scrim overlay is <a href=\"https:\/\/www.sotogardens.com\/\">Soto Gardens<\/a> website. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-scrim-sotogardens.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"additional-resources-on-this-topic-1\">Additional Resources On This Topic<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.figma.com\/community\/plugin\/1062137197474406566\/Scrim-That\">Scrim That Figma Plugin<\/a><br \/>\nQuickly add a scrim over a selected layer in Figma Design with the <em>Scrim That<\/em> plugin with just one click.<\/li>\n<\/ul>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"strips-highlight-technique\">Strips\/Highlight Technique<\/h2>\n<p>The <strong>strips\/highlight<\/strong> is one of the simplest design techniques that you can apply to your design. Add a semi-transparent black (or dark-colored) rectangle strip over the image along with your text, or you can be bolder and use different colors instead. But always make sure that the colors you selected for the fonts and the graphic elements have a lot of contrast against the background!<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-strips.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"600\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Try This and Avoid This for Accessible Text Over Images design techniques, with the left side containing an example of what to try such as using a strips\/highlight: simply add a solid or semi-transparent rectangle strip over the image along with the text, and the right side showing an example of what to avoid. The text reads \u2018Arts &amp; History\u2019 in the first strip and \u2018Art Through The Glass\u2019 in the second strip\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-strips.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      On the left is the strips\/highlight technique: just add a solid-color or semi-transparent rectangle strip over an image along with the text on top of it, and there will always be plenty of contrast. (Image credit: Photo by <a href=\"https:\/\/unsplash.com\/@imani_bht?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Imani Bahati<\/a> on <a href=\"https:\/\/unsplash.com\/@hannnahhh\/likes?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a>) (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-strips.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"examples-from-the-wild-2\">Examples From The Wild<\/h3>\n<ul>\n<li><a href=\"https:\/\/mode.com\/\"><strong>Mode<\/strong><\/a><\/li>\n<\/ul>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-strips-mode.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Mode\u2019s website uses the strip technique to cleverly embed their main headline along with the originally shaped strip. The screenshot shows a dark green background, with the dark text \u2018Business Intelligence built around data teams\u2019 on top of a light green strip, with plenty of contrast between the strip background color and the text color\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-strips-mode.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The <a href=\"https:\/\/mode.com\/\">Mode<\/a> website uses the strip technique very cleverly along with their main headline. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-strips-mode.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<ul>\n<li><a href=\"https:\/\/cantos.vc\/\"><strong>Cantos<\/strong><\/a><\/li>\n<\/ul>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-strips-cantos.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A screenshot of Cantos website that uses a strip overlay technique over the images and video reels\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-strips-cantos.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The <a href=\"https:\/\/cantos.vc\/\">Cantos<\/a> website uses a gradient strip technique over the image and the video reels, to better highlight the text of the description of the hero image and of the video reels. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-strips-cantos.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<ul>\n<li><a href=\"https:\/\/www.estea.se\"><strong>Estea<\/strong><\/a><\/li>\n<\/ul>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-strips-estea.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A screenshot of Estea website that uses the strip design technique over images to improve their product descriptions\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-strips-estea.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Another example of clever use of the strip technique that not only works for headings and tiles but also for long descriptions and paragraphs as you can see here on the <a href=\"https:\/\/www.estea.se\/\">Estea<\/a> website. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-strips-estea.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"additional-resources-on-this-topic-2\">Additional Resources On This Topic<\/h3>\n<ul>\n<li><a href=\"https:\/\/m2.material.io\/design\/color\/text-legibility.html#text-backgrounds\">Google Material Design \u2014 Legibility Standards<\/a><br \/>\nAll text should be legible and meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.0) level AA requires a 4.5:1 color contrast between text and background for normal text and 3:1 for large text. To learn more about color, contrast, and accessibility design, read this chapter on Material Design Accessibility.<\/li>\n<li>\u201c<a href=\"https:\/\/rodneylab.com\/accessible-text-on-images\/\">Accessible Text on Images: Nail the Contrast Ratio<\/a>\u201d, Rodney Lab<br \/>\nCreating accessible text on images on a website page is not easy. First, there are all the usual accessibility concerns when adding an image to your site. For example, you need to make sure the image has an alt text which describes the image well for partially sighted visitors. But then, you also need to remember to leave the alt text empty if the image is included for decorative purposes only. Next, as with any other text on your site, you need to make sure that the contrast level between the text color and the background color is high enough. And there\u2019s more! This article dives into all these little details.<\/li>\n<li><a href=\"http:\/\/web-accessibility.carnegiemuseums.org\/design\/color\/\">Web Accessibility Guidelines v1.0<\/a> (<a href=\"http:\/\/web-accessibility.carnegiemuseums.org\">Carnegie Museums of Pittsburgh<\/a>)<br \/>\nFind colors that provide maximum contrast, including enough contrast between content and the background, so that text and non-decorative images are legible for anyone with low vision or color deficiencies. Best practices include: taking care of the 4.5:1 (3:1) ratio, (not) using only color as an indicator, and taking into account color blindness.<\/li>\n<\/ul>\n<h2 id=\"find-and-use-that-space-copy-space\">Find And Use That Space (Copy Space)<\/h2>\n<p>Yes, <strong>use that space<\/strong> to position your text, but first, make sure the space is passing the minimum contrast ratio. Space provides the perfect location for your text, especially when you balance and harmonize all the elements between the image and text.<\/p>\n<p><strong>Copy space<\/strong> is <a href=\"https:\/\/greatescapepublishing.com\/travel-photography\/the-secret-to-commercial-photography-copy-space\/\">an area of an image<\/a> that is less busy and usually has enough contrast to give you space to write or put your text on.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-space.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"600\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Try This for Accessible Text Over Images design technique examples of what to try such as positioning of the text over the empty space of the image. The text reads \u2018Currently Reading\u2019 and \u2018The Future.\u2019\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-space.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Copy space design technique where the text is positioned in an empty space of the image. (Image credit: Photo by <a href=\"https:\/\/unsplash.com\/@fakurian?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Milad Fakurian<\/a> on <a href=\"https:\/\/unsplash.com\/@hannnahhh\/likes?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a>) (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-space.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"examples-from-the-wild-3\">Examples From The Wild<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.rockwellgroup.com\/\"><strong>Rockwell Group<\/strong><\/a><\/li>\n<\/ul>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-space-rockwellgroup.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A screenshot of the Rockwell Group website header image that uses the Copy Space design technique to place the text\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-space-rockwellgroup.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The <a href=\"https:\/\/www.rockwellgroup.com\/\">Rockwell Group<\/a> website uses the Copy space design technique where texts are carefully laid out over the empty and passable contrast ratio over text. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-space-rockwellgroup.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<ul>\n<li><a href=\"https:\/\/www.greenit-solution.de\/en\/\"><strong>Green IT Solution<\/strong><\/a><\/li>\n<\/ul>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-space-greenit.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A screenshot of Green IT solution website hero image that uses the Copy Space design technique over the image. Their headline is positioned front and center, surrounding other supporting illustration elements such as keyboards, laptop fan, and various other IT devices\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-space-greenit.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The <a href=\"https:\/\/www.greenit-solution.de\/en\/\">Green IT Solution<\/a> website position their headline text in front and center so that it is clear and easy to read. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-space-greenit.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<ul>\n<li><a href=\"https:\/\/www.eventlocation-in-koeln.de\/en\/\"><strong>Villa Boisser\u00e9e<\/strong><\/a><\/li>\n<\/ul>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-space-vila.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Villa Boisser\u00e9e website uses the top empty space of the hero image to position their headline that reads \u2018Rent a villa on the banks of the Rhine in Cologne.\u2019\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-space-vila.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The text headline placement of <a href=\"https:\/\/www.eventlocation-in-koeln.de\/en\/\">Villa Boisser\u00e9e<\/a> placed over the image that makes the website aesthetically elegant. (And there\u2019s also the little detail where the photo of the house slightly overlaps the letters in the title.) (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-space-vila.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"additional-resources-on-this-topic-3\">Additional Resources On This Topic<\/h3>\n<ul>\n<li>\u201c<a href=\"https:\/\/designmodo.com\/space-design\/\">Using Space to Create a Simple and Effective Design<\/a>,\u201d Carrie Cousins<br \/>\nSometimes the most effective design technique involves nothing at all, and it is quite intentional. Space can be one of the greatest tools in your design kit. It can make text easier to read, bring focus to certain parts of the design and help create an overall mood or feel. In this article, you will see some great uses of space and how they contribute to both simple and effective design schemes for different websites.<\/li>\n<li>\u201c<a href=\"https:\/\/greatescapepublishing.com\/travel-photography\/the-secret-to-commercial-photography-copy-space\/\">The Secret to Commercial Photography: Copy Space<\/a>,\u201d Great Escape Publishing<br \/>\nCommercial photography is everywhere in our lives. Every time you drive down the highway with its rows of billboards, leaf through the glossy pages of a magazine, or visit a website with banner advertisements, you see commercial stock photography. This article explains one very important concept that helps photos sell: copy space. Copy space is an area of an image that is less busy, which means an advertiser can add text without obscuring critical parts of the photograph and choosing a stock photo becomes more manageable when the photographer has copy space in mind from the get-go.<\/li>\n<\/ul>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"text-over-blurred-background-effect-of-the-entire-image\">Text Over Blurred Background Effect Of The Entire Image<\/h2>\n<p>Blurring an image with a variety of blurred background styles, such as blurring the entire image, or adding a blur effect to highlight only the main subject, can bring focus into your text layered on top of the image, tone down the \u201cbusy\u201d feeling of the image, and also add more dimension and depth to the visuals.<\/p>\n<p>The <strong>blurred background<\/strong> design technique is widely used for <a href=\"https:\/\/www.optimizely.com\/optimization-glossary\/hero-image\/\">hero headers<\/a> when combined with a bold, impactful typeface.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-blur.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"600\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Try This and Avoid This for Accessible Text Over Images design techniques with Try This examples that use an entire image as a blurred image\/background effect. On the left side, the texts are positioned at the bottom, and on the right side, the texts are positioned in the middle: \u2018Explore our collection\u2019 and \u2018Pots &amp; Plants.\u2019\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-blur.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Try This example of how to use a blurred background effect on the entire image to make your text more readable and legible. (Image credit: Photo by <a href=\"https:\/\/unsplash.com\/ko\/@tylercaseyprod?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Tyler Casey<\/a> on <a href=\"https:\/\/unsplash.com\/@hannnahhh\/likes?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a>) (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-blur.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"examples-from-the-wild-4\">Examples From The Wild<\/h3>\n<ul>\n<li><a href=\"https:\/\/hlkagency.com\/\"><strong>HLK Agency<\/strong><\/a><\/li>\n<\/ul>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-blur-hlkagency.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A screenshot of the HLK agency\u2019s website, which shows the blurred image design technique. The website\u2019s headline is in the middle, over the blurred image. It reads, \u2018Sometimes the best way to add value is to subtract.\u2019\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-blur-hlkagency.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      When you have a busy image with a non-passable empty space for your text, you can blur the entire image and position your text\/headline on top, such as in this example from the <a href=\"https:\/\/hlkagency.com\/\">HLK agency<\/a> website. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-blur-hlkagency.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<ul>\n<li><a href=\"https:\/\/tion-renewables.com\/\"><strong>Tion Renewables<\/strong><\/a><\/li>\n<\/ul>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-blur-tion.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A screenshot of the Tion Renewables website that uses the blurred entire image and Copy Space design technique to position the website\u2019s main heading and description: \u2018Future in motion,\u2019 \u2018Accelerating the transition toward a clean energy future.\u2019\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-blur-tion.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The <a href=\"https:\/\/tion-renewables.com\/\">Tion Renewables<\/a> website uses the blurred image design technique and the website heading is positioned in the empty space which has more contrast. Combining two techniques helps your text be even more accessible to everyone. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part1\/smashing-text-over-images-technique-blur-tion.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"additional-resources-on-this-topic-4\">Additional Resources On This Topic<\/h3>\n<ul>\n<li>\u201c<a href=\"https:\/\/code-boxx.com\/blurred-text-images-html-css\/\">Blurred Text &amp; Images In HTML CSS (Simple Examples)<\/a>,\u201d W.S. Toh<br \/>\nA quick tutorial on how to create blurred text and images with CSS only.<\/li>\n<\/ul>\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>Thank you for joining me on this accessibility journey. So far, we covered five key techniques when designing text over images: using an overlay over the entire image, text with scrim overlay, strips\/highlight, copy space, and text over blurred background effect. In the following article of the series, we will review five more \u2014 frame the image, soft-colored gradients, text styles and text position, solid color shapes, and use of colored backgrounds \u2014 and I will also share with you a few additional useful tools and resources. Stay tuned!<\/p>\n<h3 id=\"further-reading-on-smashingmag\">Further Reading On SmashingMag<\/h3>\n<ul>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2020\/05\/accessible-images\/\">Accessible Images For When They Matter Most<\/a>,\u201d Carie Fisher<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2022\/09\/realities-myths-contrast-color\/\">The Realities And Myths Of Contrast And Color<\/a>,\u201d Andrew Somers<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2021\/12\/designing-better-links-websites-emails-guideline\/\">Designing Better Links For The Web<\/a>,\u201d Slava Shestopalov<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2023\/01\/closed-captions-subtitles-ux\/\">Designing for Accessibility: Best Practices for Closed Captioning and Subtitles UX<\/a>,\u201d Vitaly Friedman<\/li>\n<\/ul>\n<div class=\"signature\">\n  <img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" class=\"lazyload\" data-src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\"><br \/>\n  <span>(yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Designing Accessible Text Over Images: Best Practices, Techniques, And Resources (Part 1) Designing Accessible Text Over Images: Best Practices, Techniques, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[],"_links":{"self":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/300"}],"collection":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/comments?post=300"}],"version-history":[{"count":1,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/300\/revisions"}],"predecessor-version":[{"id":301,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/300\/revisions\/301"}],"wp:attachment":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/media?parent=300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/categories?post=300"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/tags?post=300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}