{"id":298,"date":"2023-08-11T13:00:00","date_gmt":"2023-08-11T13:00:00","guid":{"rendered":"http:\/\/suimy.me\/?p=298"},"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-2","status":"publish","type":"post","link":"http:\/\/suimy.me\/index.php\/2023\/08\/11\/designing-accessible-text-over-images-best-practices-techniques-and-resources-part-2\/","title":{"rendered":"Designing Accessible Text Over Images: Best Practices, Techniques And Resources (Part 2)"},"content":{"rendered":"<p>              <title>Designing Accessible Text Over Images: Best Practices, Techniques And Resources (Part 2)<\/title><\/p>\n<article>\n<header>\n<h1>Designing Accessible Text Over Images: Best Practices, Techniques And Resources (Part 2)<\/h1>\n<address>Hannah Milan<\/address>\n<p>                  2023-08-11T13: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 high enough contrast ratio to be legible and readable. Additionally, designers should also make sure the text is positioned in the right place, away from any image elements that might cause confusion, distraction, or make it difficult to read.<\/p>\n<blockquote><p>\u201cIncorporating text with imagery is a balancing act. To create professional, compelling content, the image and text must reach a visual harmony. At the same time, strong contrast between text and image will increase legibility and will make your content stand out.\u201d<\/p>\n<p>\u2014 \u201c<a href=\"https:\/\/marketing.gettyimages.com\/7-tips-for-overlaying-text-on-imagery\/\">Tips for Overlaying Text on Imagery<\/a>,\u201d Getty Images<\/p><\/blockquote>\n<p>In <a href=\"https:\/\/www.smashingmagazine.com\/2023\/08\/designing-accessible-text-over-images-part1\/\">Part 1 of the series<\/a>, we have reviewed in detail five techniques (using an overlay over the entire image, text with scrim overlay, strips\/highlight, copy space, and text over blurred background effect) and now we\u2019ll continue with reviewing in detail five more (frame the image, soft-colored gradients, text styles and text position, solid color shapes, use of colored backgrounds). In the end, I will also provide you with a long list of useful tools and resources related to this accessibility topic.<\/p>\n<h2 id=\"frame-that-image\">Frame That Image<\/h2>\n<p>Another simple design technique you can try is by <strong>framing the image<\/strong> in a flat-colored shape that includes your text. This kind of style is mostly used in thumbnails and cards.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part2\/smashing-text-over-images-technique-frame.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"600\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Two \u2018try this\u2019 examples next to each other, each one displaying a card component: an illustration in the top section of the card, text in the bottom section, and the illustration and the text are encompassed by a frame with rounded corners\" 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-part2\/smashing-text-over-images-technique-frame.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Frame that image \u2014 try this option! Your text over (or rather, next to) the images will be perfectly accessible by using a frame or some solid colors contained within the image. This technique is used very often when creating card components. (Image credit: Photo by Google DeepMind 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-part2\/smashing-text-over-images-technique-frame.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h4 id=\"examples-from-the-wild\">Examples From The Wild<\/h4>\n<ul>\n<li><a href=\"https:\/\/july.fund\/\"><strong>July Fund<\/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-part2\/smashing-text-over-images-technique-frame-july-fund.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A parallax website that uses card components with images and a frame that image design techniques to position the texts\" 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-part2\/smashing-text-over-images-technique-frame-july-fund.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The <a href=\"https:\/\/july.fund\">July Fund<\/a> website uses the frame that image technique, with different passing backgrounds and text colors. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part2\/smashing-text-over-images-technique-frame-july-fund.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<ul>\n<li><a href=\"https:\/\/ablspacesystems.com\/\"><strong>ABL Space Systems<\/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-part2\/smashing-text-over-images-technique-frame-ablespace.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A three-card component is laid out with images and text. The image is individually framed on a white background so that the text over it will be more readable. A snow-covered mountain photo serves as a background for the three-card component\" 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-part2\/smashing-text-over-images-technique-frame-ablespace.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Your image stands out more if you position it in a way that does not require any special editing or additional manipulation. Such is the amazing example from the <a href=\"https:\/\/ablspacesystems.com\/\">ABL Space Systems<\/a> website, which uses a grid layout and the frame that image design technique. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part2\/smashing-text-over-images-technique-frame-ablespace.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h4 id=\"additional-resources-on-this-topic\">Additional Resources On This Topic<\/h4>\n<ul>\n<li><a href=\"https:\/\/bentogrids.com\/\">Bento Grids<\/a><br \/>\nBento Grids is a nice curated collection of tiles-based layouts (that were initially popularized by Apple). The main idea behind this is to present the key takeaways in a visual and easy-to-consume way. Bento layouts are great for showcasing brand identity, summarizing product features, and much more.<\/li>\n<li><a href=\"https:\/\/godly.website\/websites\/grid\">Godly \u2192 Websites \u2192 Grid style<\/a><br \/>\nA large collection of some of the best grid-style websites.<\/p>\n<p><\/li>\n<\/ul>\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=\"soft-colored-gradients-technique-over-images\">Soft-colored Gradients Technique Over Images<\/h2>\n<p>When black or white gradients don\u2019t work well, you can use the <strong>soft-colored gradients text over image<\/strong> technique. These soft-colored gradients are created when two or more different colors are blended to create a soft and gentle transition from one color to another. They are commonly used on websites and page designs to make them look modern and creative.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part2\/smashing-text-over-images-technique-soft-colored-gradients.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"600\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Try This and Avoid This examples for accessible text over images design technique, with the left side containing an example of what to try, such as soft-colored gradient colors below the text, and the right side showing an example of what to avoid. The text reads, \u2018City life.\u2019 (headline) and \u2018Top 10 most busiest city.\u2019 (description).\" 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-part2\/smashing-text-over-images-technique-soft-colored-gradients.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      On the left is an example that uses the soft-colored gradient design technique. You can notice that the text is easily readable and has perfect contrast in relation to the background photo. (Image credit: Photo by <a href=\"https:\/\/unsplash.com\/@heysupersimi?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Simone Hutsch<\/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-part2\/smashing-text-over-images-technique-soft-colored-gradients.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h4 id=\"examples-from-the-wild-1\">Examples From The Wild<\/h4>\n<ul>\n<li><a href=\"https:\/\/porto-128.webflow.io\/\"><strong>Porto 128<\/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-part2\/smashing-text-over-images-technique-soft-gradients-porto.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Hero image of the Porto 128 template that uses a soft-colored gradient from the bottom side to make the text readable and accessible. The text is positioned in the middle and reads \u2018Welcome to Grand Residence Boutique Hotel\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-part2\/smashing-text-over-images-technique-soft-gradients-porto.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The subtle placement of a soft-colored gradient from the bottom side makes the <a href=\"https:\/\/porto-128.webflow.io\">Porto 128<\/a> website design template headline stand out and be more readable. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part2\/smashing-text-over-images-technique-soft-gradients-porto.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<ul>\n<li><a href=\"https:\/\/perfectday.com\/better-for-everything\/\"><strong>Perfect Day<\/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-part2\/smashing-text-over-images-technique-soft-gradients-perfect-day.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"The Perfect Day hero image with a soft-colored gradient overlay effect positioned from left to right. The gradient overlay effect colors go from orange to yellow and green and blend with the hero image (a girl smelling a yellow flower). The headline says, \u2018In a more compassionate world, everything is better.\u2019 The sub-heading says, \u2018We have an opportunity to make the brightest future a reality. For all of us.\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-part2\/smashing-text-over-images-technique-soft-gradients-perfect-day.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a href=\"https:\/\/perfectday.com\/better-for-everything\/\">Perfect day<\/a>\u2019s header image uses a soft-colored gradient overlay that perfectly blends with the image and makes the text accessible and easy to read. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part2\/smashing-text-over-images-technique-soft-gradients-perfect-day.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h4 id=\"additional-resources-on-this-topic-1\">Additional resources on this topic<\/h4>\n<ul>\n<li><a href=\"https:\/\/angrytools.com\/gradient\/image\/\">Gradient Maker<\/a> (by Angry Tools)<\/li>\n<li><a href=\"https:\/\/cssgradient.io\/\">CSS Gradients Generator<\/a> (by Designstripe)<\/li>\n<\/ul>\n<h2 id=\"play-around-with-text-styles-and-text-position\">Play Around With Text Styles And Text Position<\/h2>\n<p>Achieving the <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/contrast-minimum\">1.4.3 success criterion<\/a> might be difficult even if we have used some of the techniques outlined in the examples above, or when any combination of those techniques still fails. In such cases, one of the safest options is to play around with <strong>text styles<\/strong> and with the <strong>text position outside<\/strong> of the image.<\/p>\n<p>Various text styles (bigger or smaller text; emphasize, low-key, bold, regular, or light text style; playing with margins and letter spacing, etc.) and combining these text styles in different ways may help you achieve a powerful impact with regards to your design while not sacrificing any accessibility. You can also position your text to the left or right, the top or bottom, and you\u2019ll have an accessible and visually appealing website or app.<\/p>\n<p>This technique is great if you combine your text styling techniques and play around with the images. With text positioned outside of the image, you have control over how to make it more accessible by using real text that can be zoomed in to maximum for those people who may have trouble reading small text on the screen or for those who wish to use their voice assistants.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part2\/smashing-text-over-images-technique-placement.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 techniques with both the left side and right side containing an example of what to try using different text styles and text positions. On the left side, Try this example text is positioned at the bottom of the framed image, and on the right side, Try This example text is positioned at the top of the framed image\" 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-part2\/smashing-text-over-images-technique-placement.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Different examples of what to try when using different techniques related to the positioning of text, such as text positioned on empty spaces with solid backgrounds. (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-part2\/smashing-text-over-images-technique-placement.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h4 id=\"examples-from-the-wild-2\">Examples From The Wild<\/h4>\n<ul>\n<li><a href=\"http:\/\/bolimowek.pl\/en\/home-en\/\"><strong>Bolim\u00f3wek<\/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-part2\/smashing-text-over-images-technique-placement-bolimowek.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A screenshot of the Bolim\u00f3wek website that uses a text over image design technique, such as using Copy space to position the text outside of the background image and playing around with text-aligned styles\" 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-part2\/smashing-text-over-images-technique-placement-bolimowek.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      A very good example of this technique can be seen on the <a href=\"http:\/\/bolimowek.pl\/en\/home-en\/\">Bolim\u00f3wek<\/a> website. It uses empty space, and the text is positioned outside of the header photo and left-aligned. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part2\/smashing-text-over-images-technique-placement-bolimowek.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<ul>\n<li><a href=\"https:\/\/mytorontocondo.com\/\"><strong>My Toronto Condo<\/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-part2\/smashing-text-over-images-technique-placement-bibby.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"My Toronto Condo website screenshot shows that accessibility and aesthetics can go together. In the example, on the left is a photo (tall buildings at the rear; green trees at the front), and on the right side is the text and call-to-action that are well placed, with enough contrast between the font and the white background. The title reads \u2018Exceeding Your Expectations,\u2019 and the sub-heading reads \u2018Christopher\u2019s unrivaled market knowledge and experience in the Toronto real estate market continually achieve record sales prices.\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-part2\/smashing-text-over-images-technique-placement-bibby.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Another example of playing with text styles and text position is from the <a href=\"https:\/\/mytorontocondo.com\/\">My Toronto Condo<\/a> website, where the half image\/half solid background technique is used. The text is on the right and balances perfectly with the header image on the left. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part2\/smashing-text-over-images-technique-placement-bibby.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<ul>\n<li><a href=\"https:\/\/www.scribelytribe.com\/\"><strong>Scribely<\/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-part2\/smashing-text-over-images-technique-placement-scribely.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Scribely website screenshot of their hero image that uses the well-placed image and text on the left side. The text reads, \u2018Accessible digital content created by humans for humans.\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-part2\/smashing-text-over-images-technique-placement-scribely.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The <a href=\"https:\/\/www.scribelytribe.com\/\">Scribely<\/a> website demonstrates that accessibility and aesthetics can go hand-in-hand, and not only that, but they are also correctly adding detailed Alt text descriptions to their images. Here the photo is on the right, and the text is on the left, creating a good balance. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part2\/smashing-text-over-images-technique-placement-scribely.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h4 id=\"additional-resources-on-this-topic-2\">Additional Resources On This Topic<\/h4>\n<ul>\n<li>\u201c<a href=\"https:\/\/css-tricks.com\/design-considerations-text-images\/\">Design Considerations: Text on Images<\/a>,\u201d by Chris Coyier (CSS Tricks)<\/li>\n<\/ul>\n<h2 id=\"play-with-solid-shapes\">Play With Solid Shapes<\/h2>\n<p>Using only <strong>simple shapes<\/strong> can make a lot of difference. Play around with solid shapes by creating strong harmony between the color of your text and the background colored shape. Once you learn how to balance the text styles and the colors, the readability of the text will greatly improve.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part2\/smashing-text-over-images-technique-shapes.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"600\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"\u2018Try this\u2019 examples for accessible text over Images design techniques, with both the left and right sides containing an example of what to try by using playful, different shapes. On the left side of Try This example, the text is positioned at the bottom over a slightly distorted rectangle; the text over the colored shape reads \u2018Art Through The Glass\u2019. On the right side of Try This example, the text is positioned at the center over a dark-red ellipse shape; the text over the dark shape reads \u2018Currently reading The 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-part2\/smashing-text-over-images-technique-shapes.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The use of simple shapes in order to make your text easier to read is another design technique you can practice. (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> and illustration 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-part2\/smashing-text-over-images-technique-shapes.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h4 id=\"examples-from-the-wild-3\">Examples From The Wild<\/h4>\n<ul>\n<li><a href=\"https:\/\/www.thefemalegaze.art\/\"><strong>The Female Gaze<\/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-part2\/smashing-text-over-images-technique-shapes-femalegaze.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A screenshot of the hero image of The Female Gaze website that uses a playful shape design technique to display their headline 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-part2\/smashing-text-over-images-technique-shapes-femalegaze.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The <a href=\"https:\/\/www.thefemalegaze.art\/\">Female Gaze<\/a> website uses a playful shape in the form of a torn paper effect which looks perfectly placed together with the website\u2019s headline. This example clearly shows that you can play around with different colors and shapes as much as you want, and in the end, you will still achieve perfect text contrast and readability. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part2\/smashing-text-over-images-technique-shapes-femalegaze.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<ul>\n<li><a href=\"https:\/\/librairiepantoute.com\/\"><strong>Pantoute<\/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-part2\/smashing-text-over-images-technique-shapes-pantoute.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A screenshot of the Pantoute website that displays the use of playful solid color shapes to emphasize the text on top of them\" 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-part2\/smashing-text-over-images-technique-shapes-pantoute.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      When combined with a colored background and shapes, you will get a type of website header that stands out, such as in this example from the <a href=\"https:\/\/librairiepantoute.com\/\">Pantoute<\/a> website. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part2\/smashing-text-over-images-technique-shapes-pantoute.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h4 id=\"additional-resources-on-this-topic-3\">Additional Resources On This Topic<\/h4>\n<ul>\n<li>\u201c<a href=\"https:\/\/uxdesign.cc\/the-psychology-behind-shapes-and-colors-17dd93ce08a2\">The psychology behind shapes and colors<\/a>,\u201d by Rob Postema (UX Collective)<\/li>\n<li>\u201c<a href=\"https:\/\/uxdesign.cc\/turning-color-theory-into-css-a-quick-dive-7c6e485ac701\">Apply color theory to your designs<\/a>,\u201d by Pranav Ambwani (UX Collective)<\/li>\n<li>\u201c<a href=\"https:\/\/www.canva.com\/learn\/background-design\/\">Your ultimate guide to background design<\/a>\u201d (Canva Design)<\/li>\n<\/ul>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"ditch-the-image-and-just-use-colored-backgrounds\">Ditch The Image And Just Use Colored Backgrounds<\/h2>\n<p>In case you cannot fulfill the <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/contrast-minimum.html\">1.4.3 success criterion<\/a>, you have the option of replacing images with colored (uniform color) or gradient (two or more colors) backgrounds. This technique facilitates screen readers to read actual text instead of images, hence enhancing accessibility for visually impaired users. Furthermore, using this technique, you can adapt the text to meet your user\u2019s preferences, optimize it for various screen sizes, and even adjust the size or zoom level without compromising its quality.<\/p>\n<p>Furthermore, with this technique, you can easily customize real text according to the user\u2019s requirements, such as colors or styles, and much more. It might be difficult to achieve this criterion in certain circumstances, but giving users an option to customize those things instead of using images would be better for everyone involved, and that is why this technique does not require much effort on your part at all.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part2\/smashing-text-over-images-technique-gradients.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 techniques with both the left side and right side containing an example of what to try using colored gradient backgrounds. The text overlaid on a colorful gradient background reads, \u2018Health topic today Digital Biology\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-part2\/smashing-text-over-images-technique-gradients.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      An example of Try This and Avoid This with text overlaid over a colorful gradient background. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part2\/smashing-text-over-images-technique-gradients.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h4 id=\"examples-from-the-wild-4\">Examples From The Wild<\/h4>\n<ul>\n<li><a href=\"https:\/\/bou.co\/\"><strong>Bou<\/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-part2\/smashing-text-over-images-technique-colored-bg-bou.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A screenshot of a webpage with text overlaid on a colorful gradient background. The text in black reads, \u201cCall it like it is. We are marketers, designers, writers, and developers. Shaped by tech\" 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-part2\/smashing-text-over-images-technique-colored-bg-bou.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      An example of using text overlaid over the colored gradient background from Bou website. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part2\/smashing-text-over-images-technique-colored-bg-bou.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<ul>\n<li><a href=\"https:\/\/www.studio-5b.com\/\"><strong>Studio 5B<\/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-part2\/smashing-text-over-images-technique-colored-bg-studio5b.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A screenshot of Studio 5B\u2019s homepage that has text overlaid over a dark background. The heading text (in white letters) reads \u2018We design people-centric healthcare experiences\u2019 placed over a dark gradient 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-part2\/smashing-text-over-images-technique-colored-bg-studio5b.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Another example of text overlaid over a colored gradient background is from <a href=\"https:\/\/www.studio-5b.com\/\">Studio 5B<\/a>\u2019s website. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part2\/smashing-text-over-images-technique-colored-bg-studio5b.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<ul>\n<li><a href=\"https:\/\/www.koryun.am\/\"><strong>Koryun<\/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-part2\/smashing-text-over-images-technique-colored-bg-koryun.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Screenshot of the Koryun design agency website, with perfect contrast between the dark-colored text and the lighter-colored red background. The heading reads, \u2018Elevating user experience to new heights,\u2019 and the sub-heading reads, \u2018We&#039;re a UX\/UI agency that designs beautiful user interfaces &amp; experiences.\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-part2\/smashing-text-over-images-technique-colored-bg-koryun.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      In the example of the <a href=\"https:\/\/www.koryun.am\/\">Koryun<\/a> UX design agency website, you can see a perfect contrast between the dark-colored text and the lighter-colored red background. No special images are used in the example. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-accessible-text-over-images-part2\/smashing-text-over-images-technique-colored-bg-koryun.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h4 id=\"additional-resources-on-this-topic-4\">Additional Resources On This Topic<\/h4>\n<ul>\n<li><a href=\"https:\/\/cssgradient.io\/\">CSS Gradients Generator<\/a> (by Designstripe)<\/li>\n<li>\u201c<a href=\"https:\/\/fossheim.io\/writing\/posts\/css-text-gradient\/\">How to add a gradient overlay to text with CSS<\/a>,\u201d a tutorial by Sarah Fossheim<\/li>\n<\/ul>\n<h2 id=\"just-use-the-actual-text\">Just Use The Actual Text!<\/h2>\n<p>Lastly, while all of these design techniques will help you make the text over images more accessible, I still think that using the <strong>actual text<\/strong> is the way to go.<\/p>\n<p>Providing special care to ensure that text over an image remains perfectly readable and accessible is a must, and, as you have seen in sections <strong>1<\/strong> \u2014 <strong>10<\/strong> of the article, there are plenty of design techniques for that purpose. But again, if you want to make your website or mobile app accessible right from the start, why not simplify things a bit and do it properly? Use real text, make sure there is plenty of contrast between the text and the background, and make your website or app accessible to everyone.<\/p>\n<p>Using text over images provides a combination of benefits, and yet it has some limitations. Text placed over images is harder to read for visually impaired users, especially at smaller text sizes, because the content gets more compressed. There are also some accessibility requirements for different colors under the <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/contrast-minimum.html\">WCAG 2.1 guidelines<\/a>. If you have trouble implementing the success criterion mentioned in the design techniques we\u2019ve presented, ditching everything and just using real text will do the trick.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>As with any new design trends popping out in different places, we need to make sure that what we\u2019re creating is not only pretty but is also helping our users. Always consider the accessibility aspect to be \u201cbaked in\u201d right from the start rather than being an afterthought in your design process.<\/p>\n<p>In any case, if someone asks you why the real text is better to use rather than text over images or images of text, here are a few key things to remember:<\/p>\n<ul>\n<li>Real text can be zoomed in to any size without distortion and pixelation, and (what\u2019s also very important) it can be read by assistive tech software.<\/li>\n<li>Additionally, you can easily increase the contrast of the text, which will help your users access the content easier.<\/li>\n<li>With actual text, you have the freedom to create your own styling and make use of CSS to format the text elements. I can highly recommend you to read the very detailed hands-on tutorial on how to use CSS styling, \u201c<a href=\"https:\/\/ishadeed.com\/article\/handling-text-over-image-css\/\">Handling Text Over Images in CSS<\/a>\u201d by Ahmad Shadeed.<\/li>\n<\/ul>\n<p>Thank you for joining me in this accessibility journey. We covered many design techniques that will hopefully help you work better with accessible text over images. And if you have some additional tips or advice to share \u2014 please do so in the comment section below, or ping me on Twitter (<a href=\"https:\/\/twitter.com\/humbleuidesigns\">@humbleuidesigns<\/a>)!<\/p>\n<h3 id=\"further-reading-tools-resources\">Further Reading: Tools &amp; Resources<\/h3>\n<p><strong>Useful Accessibility Tools<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/shouldiuseacarousel.com\/\">Should I Use Carousel?<\/a><\/li>\n<li><a href=\"https:\/\/www.brandwood.com\/a11y\/\">Test Your Background Image Accessibility<\/a><\/li>\n<li><a href=\"https:\/\/rainbow.rodneylab.com\/\">Rainbow Contrast Checker<\/a><\/li>\n<li><a href=\"https:\/\/contrast-finder.tanaguru.com\/\">Tanagaru Contrast Finder<\/a><\/li>\n<li><a href=\"https:\/\/codepen.io\/yaphi1\/\">Optimal Overlay Finder<\/a><\/li>\n<li><a href=\"https:\/\/www.tpgi.com\/color-contrast-checker\/\">TPGi Color Contrast Checker<\/a><\/li>\n<li><a href=\"https:\/\/colorable.jxnblk.com\/\">Colorable<\/a><\/li>\n<li><a href=\"https:\/\/www.figma.com\/community\/plugin\/754026612866636376\">Spelll<\/a><\/li>\n<li><a href=\"https:\/\/www.figma.com\/community\/plugin\/748533339900865323\">Contrast<\/a><\/li>\n<li><a href=\"https:\/\/www.figma.com\/community\/plugin\/1044333944861264414\">Juliette<\/a><\/li>\n<li><a href=\"https:\/\/www.figma.com\/community\/file\/1163962542065373956\">Accessibility And Interactions Documentations Annotation Kit<\/a><\/li>\n<\/ul>\n<p><strong>Accessible Carousels<\/strong><\/p>\n<ul>\n<li>\u201c<a href=\"https:\/\/www.aleksandrhovhannisyan.com\/blog\/image-carousel-tutorial\/\">Creating An Accessible Image Carousel<\/a>,\u201d by Aleksandr Hovhannisyan<\/li>\n<\/ul>\n<p><strong>Accessible Images<\/strong><\/p>\n<ul>\n<li>\u201c<a href=\"https:\/\/www.boia.org\/blog\/why-is-it-important-for-accessibility-to-use-actual-text-instead-of-images-of-text\">Why Is It Important for Accessibility to Use Actual Text Instead of Images of Text?<\/a>\u201d (Bureau of Internet Accessibility)<\/li>\n<li>\u201c<a href=\"https:\/\/www.nngroup.com\/articles\/text-over-images\/\">Ensure High Contrast for Text Over Image<\/a>,\u201d by Aurora Harley (NN\/g Nielsen Norman Group)<\/li>\n<\/ul>\n<p><strong>Accessible Text over Images through CSS and HTML<\/strong><\/p>\n<ul>\n<li>\u201c<a href=\"https:\/\/ishadeed.com\/article\/handling-text-over-image-css\/\">Handling text over images in CSS<\/a>,\u201d by Ahmad Shadeed<\/li>\n<li>\u201c<a href=\"https:\/\/css-tricks.com\/design-considerations-text-images\/\">Design Considerations: Text on Images<\/a>,\u201d by Chris Coyier (CSS-Tricks)<\/li>\n<\/ul>\n<p><strong>Accessible Text and Typography<\/strong><\/p>\n<ul>\n<li>\u201c<a href=\"https:\/\/creativemarket.com\/blog\/typography-tricks-readability\">10 Typography Tricks to Make Your Text Much More Readable<\/a>,\u201d by Igor Ovsyannykov (Creative Market)<\/li>\n<li>\u201c<a href=\"https:\/\/www.interaction-design.org\/literature\/article\/the-ux-designer-s-guide-to-typography\">The UX Designer\u2019s Guide to Typography<\/a>,\u201d by Molly Fitz-Patrick (IxDF)<\/li>\n<\/ul>\n<p><strong>Guides for Accessible Documentation And Annotations<\/strong><\/p>\n<ul>\n<li>\u201c<a href=\"https:\/\/stephaniewalter.design\/blog\/a-designers-guide-to-documenting-accessibility-user-interactions\/\">A Designer\u2019s Guide to Documenting Accessibility &amp; User Interactions<\/a>,\u201d by St\u00e9phanie Walter<\/li>\n<li>\u201c<a href=\"https:\/\/www.figma.com\/community\/file\/1162686263875105735\">Accessibility Guidelines<\/a>,\u201d by Ana Valjak (Figma Community)<\/li>\n<\/ul>\n<p><strong>WCAG Reference<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/contrast-minimum.html\">1.4.3 Contrast (Minimum)<\/a><\/li>\n<\/ul>\n<p><strong>Working with Color<\/strong><\/p>\n<ul>\n<li>\u201c<a href=\"https:\/\/uxdesign.cc\/the-psychology-behind-shapes-and-colors-17dd93ce08a2\">The psychology behind shapes and colors<\/a>,\u201d by Rob Postema (UX Collective)<br \/>\nDesign influences the way we perceive the world, the way we feel, and the choices we make. To communicate to your target audience effectively as a designer, having knowledge of the psychological principles of human behavior (revolving around the use of shapes, colors, typography, and compositions) can be very helpful.<\/li>\n<li>\u201c<a href=\"https:\/\/uxdesign.cc\/turning-color-theory-into-css-a-quick-dive-7c6e485ac701\">Apply color theory to your designs<\/a>,\u201d by Pranav Ambwani (UX Collective)<br \/>\nColor is a very strong tool that we can apply to solve many design challenges. Since color plays such a major role in shaping the aesthetics and usability of websites, changing a single color can change a user\u2019s perception of the same design.<\/li>\n<li>\u201c<a href=\"https:\/\/www.canva.com\/learn\/background-design\/\">Your ultimate guide to background design<\/a>\u201d (Canva Design)<br \/>\nThe background design you choose can dramatically change your design and make your graphics feel complete. Colors can be used as overlays to enhance brand awareness amongst your audience, while images don\u2019t need to just sit alongside your graphic elements \u2014 they make for excellent backgrounds when placed correctly. Backgrounds are the backbone of great design!<\/li>\n<li>\u201c<a href=\"https:\/\/marketing.gettyimages.com\/7-tips-for-overlaying-text-on-imagery\/\">Tips for Overlaying Text on Imagery<\/a>\u201d (Getty Images)<br \/>\nPay attention to color, contrast, and brightness; blur the imagery; weigh your text correctly; put more thought into your image; utilize the image\u2019s perspective to your advantage \u2014 this and several other tips, combined with some examples, are shared in this concise and practical article.<\/li>\n<\/ul>\n<p><strong>Color Contrast and Accessibility (Smashing Magazine)<\/strong><\/p>\n<ul>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2014\/10\/color-contrast-tips-and-tools-for-accessibility\/\">Color Contrast And Why You Should Rethink It<\/a>,\u201d by Cathy O\u2019 Connor<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2016\/06\/improving-color-accessibility-for-color-blind-users\/\">Improving The Color Accessibility For Color-Blind Users<\/a>,\u201d by Adam Silver<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2021\/06\/img-alt-attribute-alternate-description-decorative\/\">Your Image Is Probably Not Decorative<\/a>,\u201d by Eric Bailey<\/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 by Andrew Somers<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2017\/01\/underestimated-power-color-mobile-app-design\/\">The Underestimated Power Of Color In Mobile App Design<\/a>,\u201d by Nick Babich<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2020\/05\/accessible-images\/\">Accessible Images For When They Matter Most<\/a>,\u201d by Carie Fisher<\/li>\n<li>Smashing Magazine\u2019s selection of <a href=\"https:\/\/www.smashingmagazine.com\/category\/accessibility\/\">Accessibility<\/a>, <a href=\"https:\/\/www.smashingmagazine.com\/category\/usability\">Usability<\/a>, and <a href=\"https:\/\/www.smashingmagazine.com\/category\/ux\">UX<\/a> topics.<\/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 2) 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\/298"}],"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=298"}],"version-history":[{"count":1,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/298\/revisions"}],"predecessor-version":[{"id":299,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/298\/revisions\/299"}],"wp:attachment":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/media?parent=298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/categories?post=298"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/tags?post=298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}