{"id":6118,"date":"2024-06-14T16:07:14","date_gmt":"2024-06-14T15:07:14","guid":{"rendered":"https:\/\/holisticstrategylab.com\/uk\/?p=6118"},"modified":"2024-06-14T16:21:28","modified_gmt":"2024-06-14T15:21:28","slug":"design-accessible-as-design-for-all","status":"publish","type":"post","link":"https:\/\/holisticstrategylab.com\/uk\/design-accessible-as-design-for-all\/","title":{"rendered":"Accessible Design: How to Design for All?"},"content":{"rendered":"\n<p>In the world of UX design, accessibility is critical. It&#8217;s not only about creating engaging experiences, but also about making sure everyone can enjoy and use our products effectively. From contrast to visual hierarchy, every detail matters to ensure that our creations are inclusive and useful for all users. Here are five essential tips every designer should know:&nbsp;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use the Right Contrast&nbsp;<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Proper contrast between background and text is crucial to ensure that our content is legible to all users, especially those with impaired vision. According to the World Health Organization, approximately 2.2 billion people in the world experience vision problems. It is therefore essential to use online tools, such as Contrast Checker, to check and adjust the contrast of our designs, ensuring a better experience for everyone.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"640\" src=\"https:\/\/holisticstrategylab.com\/uk\/wp-content\/uploads\/sites\/2\/2024\/06\/contrast-check.webp\" alt=\"\" class=\"wp-image-6119\" srcset=\"https:\/\/holisticstrategylab.com\/uk\/wp-content\/uploads\/sites\/2\/2024\/06\/contrast-check.webp 1280w, https:\/\/holisticstrategylab.com\/uk\/wp-content\/uploads\/sites\/2\/2024\/06\/contrast-check-980x490.webp 980w, https:\/\/holisticstrategylab.com\/uk\/wp-content\/uploads\/sites\/2\/2024\/06\/contrast-check-480x240.webp 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1280px, 100vw\" \/><figcaption class=\"wp-element-caption\">How the WCAG color contrast checker can improve your website (Accessibility Spark, 2023)&nbsp;<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Don&#8217;t rely on Color alone for Feedback<\/strong>&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>It is important to remember that not all users perceive colors in the same way. Color blindness affects a significant percentage of the population, limiting their ability to distinguish certain colors. Therefore, it is essential not to use color alone as a means of communication or feedback in our designs. We must complement it with other visual or textual elements to ensure that the information is clear and understandable to all users.<\/p>\n\n\n\n<p>Here are some color combinations that can be avoided:&nbsp;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Green\/red&nbsp;&nbsp;&nbsp;<\/li>\n\n\n\n<li>Green\/blue&nbsp;&nbsp;&nbsp;<\/li>\n\n\n\n<li>Green\/black&nbsp;&nbsp;&nbsp;<\/li>\n\n\n\n<li>Green\/brown&nbsp;&nbsp;&nbsp;<\/li>\n\n\n\n<li>Green\/gray&nbsp;&nbsp;&nbsp;<\/li>\n\n\n\n<li>Light green\/yellow&nbsp;&nbsp;&nbsp;<\/li>\n\n\n\n<li>Blue\/purple&nbsp;&nbsp;&nbsp;<\/li>\n\n\n\n<li>Blue\/grey&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1160\" height=\"609\" src=\"https:\/\/holisticstrategylab.com\/uk\/wp-content\/uploads\/sites\/2\/2024\/06\/color-daltonismo.webp\" alt=\"\" class=\"wp-image-6120\" srcset=\"https:\/\/holisticstrategylab.com\/uk\/wp-content\/uploads\/sites\/2\/2024\/06\/color-daltonismo.webp 1160w, https:\/\/holisticstrategylab.com\/uk\/wp-content\/uploads\/sites\/2\/2024\/06\/color-daltonismo-980x515.webp 980w, https:\/\/holisticstrategylab.com\/uk\/wp-content\/uploads\/sites\/2\/2024\/06\/color-daltonismo-480x252.webp 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1160px, 100vw\" \/><figcaption class=\"wp-element-caption\">Avoid certain color combinations (Audio eye, 2023)&nbsp;<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Visual Hierarchy in Sizes and Spacing &nbsp;<\/strong><\/li>\n<\/ul>\n\n\n\n<p>A proper visual hierarchy facilitates understanding and navigation within a web page or application. Using different text sizes, spacing and formatting styles helps to highlight important information and organize content clearly and coherently. This allows users to easily identify which content is related and which is most relevant to their needs. &nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1070\" src=\"https:\/\/holisticstrategylab.com\/uk\/wp-content\/uploads\/sites\/2\/2024\/06\/jerarquia-visual-2.webp\" alt=\"\" class=\"wp-image-6123\" srcset=\"https:\/\/holisticstrategylab.com\/uk\/wp-content\/uploads\/sites\/2\/2024\/06\/jerarquia-visual-2.webp 1600w, https:\/\/holisticstrategylab.com\/uk\/wp-content\/uploads\/sites\/2\/2024\/06\/jerarquia-visual-2-1280x856.webp 1280w, https:\/\/holisticstrategylab.com\/uk\/wp-content\/uploads\/sites\/2\/2024\/06\/jerarquia-visual-2-980x655.webp 980w, https:\/\/holisticstrategylab.com\/uk\/wp-content\/uploads\/sites\/2\/2024\/06\/jerarquia-visual-2-480x321.webp 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 1600px, 100vw\" \/><figcaption class=\"wp-element-caption\">Visual hierarchy, what it is and how to apply it well (Imborrable, 2023)&nbsp;<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>A11y: Promoting Digital Accessibility&nbsp;<\/strong><\/li>\n<\/ul>\n\n\n\n<p>The a11y project, driven by the community of developers and designers, focuses on promoting the creation of digital products that are accessible to all. It provides a comprehensive checklist that allows us to evaluate the accessibility of our designs and ensure that we meet the standards necessary to effectively reach all users.&nbsp;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>WCAG: Web Content Accessibility Guidelines&nbsp;<\/strong><\/li>\n<\/ul>\n\n\n\n<p>The Web Content Accessibility Guidelines (WCAG) set clear standards to ensure that our digital products are accessible to all users. With compliance levels ranging from A (minimum) to AAA (high), these guidelines help us ensure that our designs meet the necessary accessibility standards. Level AA is considered standard, which ensures a medium level of accessibility for our users.&nbsp;&nbsp;<\/p>\n\n\n\n<p>In short, designing for accessibility is critical to creating inclusive and useful digital experiences for all users. From contrast to visual hierarchy, every detail matters and helps ensure that our products are accessible to a wide range of users. By following these five tips and using the right tools and guidelines, we can ensure that our designs are accessible, inclusive and useful for everyone.\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bibliography<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Accessible Contrasts &#8211; the readability of visual information<\/em>. (2022, June 14). NR. <a href=\"https:\/\/nr.no\/en\/projects\/accessible-contrasts\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/nr.no\/en\/projects\/accessible-contrasts\/<\/a>\u00a0<\/li>\n\n\n\n<li>How the WCAG color contrast checker can improve your website? (2023, April 30). <em>Accessibility Spark<\/em>. <a href=\"https:\/\/accessibilityspark.com\/color-contrast-checker\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/accessibilityspark.com\/color-contrast-checker\/<\/a>\u00a0<\/li>\n\n\n\n<li><em>How to design for color blindness<\/em>. (n.d.). AudioEye. Retrieved June 7, 2024, from <a href=\"https:\/\/www.audioeye.com\/post\/8-ways-to-design-a-color-blind-friendly-website\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.audioeye.com\/post\/8-ways-to-design-a-color-blind-friendly-website\/<\/a>\u00a0<\/li>\n\n\n\n<li>Llasera, J. P. (2023, March 22). <em>Jerarqu\u00eda visual: qu\u00e9 es y c\u00f3mo aplicarla bien<\/em>. Imborrable. <a href=\"https:\/\/imborrable.com\/blog\/jerarquia-visual\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/imborrable.com\/blog\/jerarquia-visual\/<\/a>\u00a0<\/li>\n\n\n\n<li>Visser, C. (2023, September 19). <em>Color Blind Accessibility: Web design for color blindness<\/em>. Accessibility Checker. <a href=\"https:\/\/www.accessibilitychecker.org\/blog\/color-blind-accessibility\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.accessibilitychecker.org\/blog\/color-blind-accessibility\/<\/a>\u00a0<\/li>\n\n\n\n<li>(N.d.). Scalahed.com. Retrieved June 7, 2024, from <a href=\"https:\/\/repositorio.scalahed.com\/recursos\/files\/r171r\/w30848w\/Tipografia_Ant_B3_C.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/repositorio.scalahed.com\/recursos\/files\/r171r\/w30848w\/Tipografia_Ant_B3_C.pdf<\/a>\u00a0<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In the world of UX design, accessibility is critical. It&#8217;s not only about creating engaging experiences, but also about making sure everyone can enjoy and use our products effectively. From contrast to visual hierarchy, every detail matters to ensure that our creations are inclusive and useful for all users. Here are five essential tips every [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":6124,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[14,13],"tags":[15,16,19,17],"class_list":["post-6118","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui","category-ux","tag-accessible","tag-inclusiveness","tag-principles","tag-sizes"],"_links":{"self":[{"href":"https:\/\/holisticstrategylab.com\/uk\/wp-json\/wp\/v2\/posts\/6118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/holisticstrategylab.com\/uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/holisticstrategylab.com\/uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/holisticstrategylab.com\/uk\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/holisticstrategylab.com\/uk\/wp-json\/wp\/v2\/comments?post=6118"}],"version-history":[{"count":2,"href":"https:\/\/holisticstrategylab.com\/uk\/wp-json\/wp\/v2\/posts\/6118\/revisions"}],"predecessor-version":[{"id":6126,"href":"https:\/\/holisticstrategylab.com\/uk\/wp-json\/wp\/v2\/posts\/6118\/revisions\/6126"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/holisticstrategylab.com\/uk\/wp-json\/wp\/v2\/media\/6124"}],"wp:attachment":[{"href":"https:\/\/holisticstrategylab.com\/uk\/wp-json\/wp\/v2\/media?parent=6118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holisticstrategylab.com\/uk\/wp-json\/wp\/v2\/categories?post=6118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holisticstrategylab.com\/uk\/wp-json\/wp\/v2\/tags?post=6118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}