{"id":18976,"date":"2025-05-12T21:52:26","date_gmt":"2025-05-12T19:52:26","guid":{"rendered":"https:\/\/cache.dev.growth-ninjas.net\/?p=18976"},"modified":"2026-03-05T13:41:10","modified_gmt":"2026-03-05T12:41:10","slug":"color-blindness-web-design-growth","status":"publish","type":"post","link":"https:\/\/cache.dev.growth-ninjas.net\/en\/color-blindness-web-design-growth\/","title":{"rendered":"Colorblindness &amp; web design &#8211; driving growth through accessible design"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"18976\" class=\"elementor elementor-18976 elementor-18927\" wpc-filter-elementor-widget=\"1\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b9560f1 e-flex e-con-boxed e-con e-parent\" data-id=\"b9560f1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4de8082 elementor-widget elementor-widget-text-editor\" data-id=\"4de8082\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Imagine that a significant proportion of your potential customers perceive your carefully designed websites, landing pages and emails very differently than intended. In fact, this affects a surprisingly large proportion of the population: it is estimated that around   <strong>Every 12th man and every 200th woman is affected by some form of color blindness. <\/strong>  In European men, as many as 8% are affected by a form of red\/green deficiency or color blindness.<\/p><p>This means that a significant portion of your target audience may have difficulty recognizing important information, navigating your website or perceiving call-to-actions if color is the only differentiator.  <\/p><p>Inclusive design is therefore not only a question of accessibility, but also a decisive factor for the growth of your company. Here we would like to shed light on why colorblindness is relevant in web design and how websites can be made accessible for all users and therefore more successful. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-345b21d e-flex e-con-boxed e-con e-parent\" data-id=\"345b21d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0008744 elementor-widget elementor-widget-heading\" data-id=\"0008744\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What is color blindness?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd21555 elementor-widget elementor-widget-text-editor\" data-id=\"dd21555\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Color blindness, or more correctly a color vision disorder, describes the impaired ability to distinguish all colors well. In most cases, this is due to the absence or malfunction of certain color-sensitive cells (cones) in the retina of the eye. There are various forms of color vision deficiency and color blindness:  <\/p><h3>Anomaly \u2013 color vision deficiency<\/h3><p>In this form, all three types of cones are present, but one of them does not function properly. This leads to attenuated color perception: <\/p><ul><li><strong>Protanomaly:<\/strong> Red weakness<\/li><li><strong>Deuteranomaly:<\/strong> green weakness (the most common form)<\/li><li><strong>Tritanomaly:<\/strong> blue weakness (very rare)<\/li><\/ul><h3>Dichromasia &#8211; Partial color blindness<\/h3><p>Here one of the three types of cones is completely missing. The forms that occur are <\/p><ul><li><strong>Protanopia:<\/strong> Red blindness &#8211; those affected see significantly reduced red tones or not at all.<\/li><li><strong>Deuteranopia:<\/strong> Green blindness &#8211; those affected have difficulty distinguishing between green and red tones. Green often appears beige or gray. <\/li><li><strong>Tritanopia:<\/strong> blue blindness (rare) &#8211; those affected have difficulty distinguishing between blue and yellow tones.<\/li><\/ul><h3>Achromasia &#8211; Complete color blindness<\/h3><p>The rarest form, in which those affected see no colors at all, only shades of gray.<\/p><p>The perception of colors is based on how light of different wavelengths is absorbed by these cones. In color blindness, this mechanism is disturbed. Interestingly, significantly more men (approx. 8%) than women (approx. 0.5%) are affected, as the genetic defects that lead to the most common forms are located on the X chromosome.  <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a9a6f7a elementor-widget elementor-widget-image\" data-id=\"a9a6f7a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"275\" src=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Color-Blindness-Circle-1024x352.jpg\" class=\"attachment-large size-large wp-image-18937\" alt=\"Color blindness Color wheel\" srcset=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Color-Blindness-Circle-1024x352.jpg 1024w, https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Color-Blindness-Circle-300x103.jpg 300w, https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Color-Blindness-Circle-768x264.jpg 768w, https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Color-Blindness-Circle.jpg 1200w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\"><b>Visualization of the different types of color blindness:<\/b> the inner circle shows \"normal vision\", the outer circle shows perception with the corresponding color blindness.<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-20f9fe2 e-flex e-con-boxed e-con e-parent\" data-id=\"20f9fe2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3b82632 elementor-widget elementor-widget-heading\" data-id=\"3b82632\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Why is color blindness important in web design?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a981e5c elementor-widget elementor-widget-text-editor\" data-id=\"a981e5c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Accessible web design is not a nice-to-have, but a necessity &#8211; both from an ethical and a business perspective. For your company that focuses on growth through effective digital communication, this means in concrete terms: <\/p><h3>Improved user experience (UX):<\/h3><p>If a potential customer has trouble navigating your website or HubSpot landing page because important information is only differentiated by color, they will be frustrated and likely leave your site.  <strong>A positive user experience, on the other hand, promotes dwell time, interaction and ultimately conversions.<\/strong><\/p><h3>Compliance with accessibility guidelines:<\/h3><p>Guidelines such as the WCAG<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/\">(Web Content Accessibility Guidelines<\/a>) require that content must also be accessible to people with disabilities. This means that <strong>color must not be the only means of conveying information or distinguishing elements.<\/strong> Adhering to these guidelines is not only a question of compliance, but also a sign of professionalism and foresight. <\/p><h3>Inclusion as a competitive advantage:<\/h3><p>By making your WordPress and HubSpot-based digital assets accessible to all, you demonstrate inclusivity <strong>while expanding your potential customer base.<\/strong> This can be a decisive competitive advantage.<\/p><h3>Optimization for marketing success:<\/h3><p>Imagine your<strong> email campaigns<\/strong>, carefully designed in HubSpot,<strong> losing impact because color-coded information<\/strong> <strong>cannot be correctly interpreted<\/strong> by some of your recipients. A color-matched design in your emails and landing pages ensures that your message reaches everyone and your marketing goals are achieved more effectively.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9552775 elementor-arrows-position-inside elementor-pagination-position-outside elementor-widget elementor-widget-image-carousel\" data-id=\"9552775\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;slides_to_show&quot;:&quot;1&quot;,&quot;navigation&quot;:&quot;both&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;infinite&quot;:&quot;yes&quot;,&quot;effect&quot;:&quot;slide&quot;,&quot;speed&quot;:500}\" data-widget_type=\"image-carousel.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-image-carousel-wrapper swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Bild Karussell\" dir=\"ltr\">\n\t\t\t<div class=\"elementor-image-carousel swiper-wrapper\" aria-live=\"off\">\n\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 of 4\"><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"9552775\" data-elementor-lightbox-title=\"Viz Palette Normal\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTg5NDksInVybCI6Imh0dHBzOlwvXC9jYWNoZS5kZXYuZ3Jvd3RoLW5pbmphcy5uZXRcL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjVcLzA1XC9WaXotUGFsZXR0ZS1Ob3JtYWwuYXZpZiIsInNsaWRlc2hvdyI6Ijk1NTI3NzUifQ%3D%3D\" href=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Viz-Palette-Normal.avif\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Viz-Palette-Normal.avif\" alt=\"Color palette for normal vision\" \/><figcaption class=\"elementor-image-carousel-caption\">Color palette for normal vision<\/figcaption><\/figure><\/a><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 of 4\"><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"9552775\" data-elementor-lightbox-title=\"Viz Palette Protanopia\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTg5NTEsInVybCI6Imh0dHBzOlwvXC9jYWNoZS5kZXYuZ3Jvd3RoLW5pbmphcy5uZXRcL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjVcLzA1XC9WaXotUGFsZXR0ZS1Qcm90YW5vcGlhLmF2aWYiLCJzbGlkZXNob3ciOiI5NTUyNzc1In0%3D\" href=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Viz-Palette-Protanopia.avif\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Viz-Palette-Protanopia.avif\" alt=\"Color palette for protanopia\/red blindness\" \/><figcaption class=\"elementor-image-carousel-caption\">Color palette for protanopia\/red blindness<\/figcaption><\/figure><\/a><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"3 of 4\"><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"9552775\" data-elementor-lightbox-title=\"Viz Palette Deuteranopia\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTg5NDcsInVybCI6Imh0dHBzOlwvXC9jYWNoZS5kZXYuZ3Jvd3RoLW5pbmphcy5uZXRcL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjVcLzA1XC9WaXotUGFsZXR0ZS1EZXV0ZXJhbm9waWEuYXZpZiIsInNsaWRlc2hvdyI6Ijk1NTI3NzUifQ%3D%3D\" href=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Viz-Palette-Deuteranopia.avif\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Viz-Palette-Deuteranopia.avif\" alt=\"Color palette for deuteranopia\/green blindness\" \/><figcaption class=\"elementor-image-carousel-caption\">Color palette for deuteranopia\/green blindness<\/figcaption><\/figure><\/a><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"4 of 4\"><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"9552775\" data-elementor-lightbox-title=\"Viz Palette Achromasia\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTg5NDUsInVybCI6Imh0dHBzOlwvXC9jYWNoZS5kZXYuZ3Jvd3RoLW5pbmphcy5uZXRcL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjVcLzA1XC9WaXotUGFsZXR0ZS1BY2hyb21hc2lhLmF2aWYiLCJzbGlkZXNob3ciOiI5NTUyNzc1In0%3D\" href=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Viz-Palette-Achromasia.avif\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Viz-Palette-Achromasia.avif\" alt=\"Color palette for complete color blindness (monochromatism)\" \/><figcaption class=\"elementor-image-carousel-caption\">Color palette for complete color blindness (monochromatism)<\/figcaption><\/figure><\/a><\/div>\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-prev\" role=\"button\" tabindex=\"0\">\n\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-eicon-chevron-left\" viewBox=\"0 0 1000 1000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M646 125C629 125 613 133 604 142L308 442C296 454 292 471 292 487 292 504 296 521 308 533L604 854C617 867 629 875 646 875 663 875 679 871 692 858 704 846 713 829 713 812 713 796 708 779 692 767L438 487 692 225C700 217 708 204 708 187 708 171 704 154 692 142 675 129 663 125 646 125Z\"><\/path><\/svg>\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-next\" role=\"button\" tabindex=\"0\">\n\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-eicon-chevron-right\" viewBox=\"0 0 1000 1000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M696 533C708 521 713 504 713 487 713 471 708 454 696 446L400 146C388 133 375 125 354 125 338 125 325 129 313 142 300 154 292 171 292 187 292 204 296 221 308 233L563 492 304 771C292 783 288 800 288 817 288 833 296 850 308 863 321 871 338 875 354 875 371 875 388 867 400 854L696 533Z\"><\/path><\/svg>\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"swiper-pagination\"><\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5282fdc elementor-widget elementor-widget-text-editor\" data-id=\"5282fdc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><strong>Display of a color palette in various applications,<\/strong> from surfaces to diagrams to fonts. The Color Report shows which color combinations are particularly difficult to distinguish. Created with <a href=\"https:\/\/projects.susielu.com\/viz-palette\" target=\"_blank\" rel=\"noopener\">Viz Palette<\/a> by Elijah Meeks &amp; Susie Lu &#8211; a freely available tool in which you can test your own color palette.  <\/p><p><a href=\"https:\/\/projects.susielu.com\/viz-palette?colors=%5B%22%23ffbc0c%22%2C%22%23ff8f00%22%2C%22%23e20613%22%2C%22%23027033%22%2C%22%239575cd%22%2C%22%2364b5f6%22%2C%22%234dd0e1%22%5D&amp;backgroundColor=white&amp;fontColor=black&amp;mode=normal\" target=\"_blank\" rel=\"noopener\">Here you will find the example with the color palette shown.<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e4e2984 elementor-widget elementor-widget-heading\" data-id=\"e4e2984\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Legal requirements in Austria and Germany<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c3e69f6 elementor-widget elementor-widget-text-editor\" data-id=\"c3e69f6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h3>Austria<\/h3><p><strong>In Austria, the Accessibility Act (BaFG) will regulate the accessibility of digital services from June 28, 2025.<\/strong> Online stores and websites must provide information in multiple channels, use easy-to-understand language and offer adaptable font sizes and contrasts. Contact information for helpdesks is also required. The law applies to manufacturers, retailers and service providers, with exceptions for small companies offering services. Non-compliance could result in fines of up to 80,000 euros.   <\/p><p><strong>More information on the <a href=\"https:\/\/www.wko.at\/ce-kennzeichnung-normen\/informationen-zum-barrierefreiheitsgesetz\" target=\"_blank\" rel=\"noopener\">website of the Chamber of Commerce.<\/a><\/strong><\/p><h3>Germany<\/h3><p><strong>In Germany, the Barrierefreiheitsst\u00e4rkungsgesetz (BFSG) comes into force on June 28, 2025.<\/strong> It obliges companies to make their digital products and services accessible in order to enable people with disabilities to participate in economic life. This includes websites, apps and online retail. The requirements are based on <strong>EU standard EN 301 549<\/strong> and <strong>WCAG 2.1 (Level AA)<\/strong>. Violations can result in fines of up to 100,000 euros.   <\/p><p><strong>More information on this can be found on the website of the <a href=\"https:\/\/bfsg-gesetz.de\/\" target=\"_blank\" rel=\"noopener\">Accessibility Reinforcement Act<\/a>.<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-63244e8 e-flex e-con-boxed e-con e-parent\" data-id=\"63244e8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-699692a elementor-widget elementor-widget-heading\" data-id=\"699692a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Challenges in web design for color blindness<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d84ceb elementor-widget elementor-widget-text-editor\" data-id=\"3d84ceb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Even when using powerful platforms such as WordPress and HubSpot CMS, which have already implemented many of the WCAG requirements, there are specific challenges with regard to color blindness:<\/p><h3>Standard color palettes and themes<\/h3><p>Many default themes and color palettes in WordPress and HubSpot may not automatically provide enough color contrast or use color as the sole differentiator. Conscious customization is required here. <\/p><h3>Visual editors<\/h3><p>Although visual editors in WordPress and HubSpot make design easier, it can be difficult to assess actual color perception for colorblind users without the right tools.<\/p><h3>Data visualizations in HubSpot<\/h3><p>When creating reports and dashboards in HubSpot, care should be taken to ensure that color-coded diagrams and graphics are also understandable for color-blind users.<\/p><h3>Call-to-action buttons<\/h3><p>If the distinction between a call-to-action button and other elements is based solely on color, this can be problematic for color-blind users.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6dd00e5 elementor-widget elementor-widget-heading\" data-id=\"6dd00e5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Best practices and solutions for color-friendly web design<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f352a9 elementor-widget elementor-widget-text-editor\" data-id=\"1f352a9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>To ensure that digital assets in WordPress and HubSpot are accessible to everyone, the following best practices have proven their worth:<\/p><h3>Do not use color as the only distinguishing feature:<\/h3><ul><li>It is advisable to supplement color differences with clear <strong>text descriptions, icons or patterns<\/strong>. For example, mandatory fields in forms can not only be marked in red, but also with an asterisk (*).   <\/li><li>Navigation menus benefit from <strong>clear text links<\/strong> and optional visual cues such as underlining or frames for hover effects.<\/li><li>When designing landing pages and emails, care should be taken to ensure that important information is always conveyed <strong>in text form or using symbols.<\/strong>  <\/li><li>Call-to-action buttons should have clear labeling and ideally also stand out due to their shape and positioning.<\/li><\/ul><h3>Ensure sufficient color contrast:<\/h3><ul><li>Tools for checking color contrast, such as <a href=\"https:\/\/www.whocanuse.com\/\" target=\"_blank\" rel=\"noopener\">whocanuse<\/a>, are particularly useful.  <\/li><li>Care should be taken to ensure that the contrast ratio between text and background complies with the WCAG guidelines (at least 4.5:1 for normal text and 3:1 for large text). This applies to websites and HubSpot landing pages as well as emails. <\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8f8b010 elementor-widget elementor-widget-image\" data-id=\"8f8b010\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Who-Can-Use-Screen.avif\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"Who Can Use - Screenshot\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTg5NTksInVybCI6Imh0dHBzOlwvXC9jYWNoZS5kZXYuZ3Jvd3RoLW5pbmphcy5uZXRcL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjVcLzA1XC9XaG8tQ2FuLVVzZS1TY3JlZW4uYXZpZiJ9\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Who-Can-Use-Screen-1024x640.jpg\" class=\"attachment-large size-large wp-image-18959\" alt=\"Who Can Use - Screenshot\" srcset=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Who-Can-Use-Screen-1024x640.jpg 1024w, https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Who-Can-Use-Screen-300x188.jpg 300w, https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Who-Can-Use-Screen-768x480.jpg 768w, https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Who-Can-Use-Screen.jpg 1280w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">On the website <b>whocanuse.com<\/b> you can check the contrast ratio and legibility of background and font colors \u2013 particularly suitable for buttons and CTAs, for example.<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0ed5912 elementor-widget elementor-widget-text-editor\" data-id=\"0ed5912\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h3>Consider and simulate different forms of color blindness<\/h3><p>It is advisable to use simulation tools for color blindness (such as <a href=\"https:\/\/www.color-blindness.com\/coblis-color-blindness-simulator\/\" target=\"_blank\" rel=\"noopener\">Coblis<\/a>) to check how the website and HubSpot content look for users with different color vision disorders. This enables potential problems to be identified and rectified at an early stage. <\/p><h3>Using patterns and textures in data visualizations<\/h3><p>When creating reports and graphics in HubSpot, it makes sense to differentiate data series not only by color, but also by different patterns or line styles. Clear legends are essential here. <\/p><h3>Clear labels and legends<\/h3><p>It should be ensured that all visual elements, especially graphics and diagrams, are clearly labeled and have clear legends that are understandable even without color differentiation.<\/p><h3>Focus on form and positioning<\/h3><p>The use of shape and positioning to highlight important elements and create a clear visual hierarchy is recommended, rather than relying solely on color. Well-structured layouts and clear visual cues help all users to find their way around. <\/p><h3>Test, test, test<\/h3><p>Thorough testing of the designs is essential &#8211; ideally also with users who are affected by color blindness (if possible). Otherwise, comprehensive simulations and compliance with the WCAG guidelines will help. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-054c693 elementor-arrows-position-inside elementor-pagination-position-outside elementor-widget elementor-widget-image-carousel\" data-id=\"054c693\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;slides_to_show&quot;:&quot;1&quot;,&quot;navigation&quot;:&quot;both&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;infinite&quot;:&quot;yes&quot;,&quot;effect&quot;:&quot;slide&quot;,&quot;speed&quot;:500}\" data-widget_type=\"image-carousel.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-image-carousel-wrapper swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Bild Karussell\" dir=\"ltr\">\n\t\t\t<div class=\"elementor-image-carousel swiper-wrapper\" aria-live=\"off\">\n\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 of 5\"><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"054c693\" data-elementor-lightbox-title=\"Dashboard normal vision\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTg5NjUsInVybCI6Imh0dHBzOlwvXC9jYWNoZS5kZXYuZ3Jvd3RoLW5pbmphcy5uZXRcL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjVcLzA1XC9EYXNoYm9hcmQtTm9ybWFsLmF2aWYiLCJzbGlkZXNob3ciOiIwNTRjNjkzIn0%3D\" href=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Dashboard-Normal.avif\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Dashboard-Normal.avif\" alt=\"Dashboard normal vision\" \/><figcaption class=\"elementor-image-carousel-caption\">Dashboard normal vision<\/figcaption><\/figure><\/a><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 of 5\"><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"054c693\" data-elementor-lightbox-title=\"Dashboard Protanopia\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTg5NjcsInVybCI6Imh0dHBzOlwvXC9jYWNoZS5kZXYuZ3Jvd3RoLW5pbmphcy5uZXRcL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjVcLzA1XC9EYXNoYm9hcmQtUHJvdGFub3BpYS5hdmlmIiwic2xpZGVzaG93IjoiMDU0YzY5MyJ9\" href=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Dashboard-Protanopia.avif\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Dashboard-Protanopia.avif\" alt=\"Dashboard Protanopia\" \/><figcaption class=\"elementor-image-carousel-caption\">Dashboard Protanopia<\/figcaption><\/figure><\/a><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"3 of 5\"><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"054c693\" data-elementor-lightbox-title=\"Dashboard Deuteranopia\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTg5NjMsInVybCI6Imh0dHBzOlwvXC9jYWNoZS5kZXYuZ3Jvd3RoLW5pbmphcy5uZXRcL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjVcLzA1XC9EYXNoYm9hcmQtRGV1dGVyYW5vcGlhLmF2aWYiLCJzbGlkZXNob3ciOiIwNTRjNjkzIn0%3D\" href=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Dashboard-Deuteranopia.avif\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Dashboard-Deuteranopia.avif\" alt=\"Dashboard Deuteranopia\" \/><figcaption class=\"elementor-image-carousel-caption\">Dashboard Deuteranopia<\/figcaption><\/figure><\/a><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"4 of 5\"><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"054c693\" data-elementor-lightbox-title=\"Dashboard Tritanopia\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTg5NjksInVybCI6Imh0dHBzOlwvXC9jYWNoZS5kZXYuZ3Jvd3RoLW5pbmphcy5uZXRcL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjVcLzA1XC9EYXNoYm9hcmQtVHJpdGFub3BpYS5hdmlmIiwic2xpZGVzaG93IjoiMDU0YzY5MyJ9\" href=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Dashboard-Tritanopia.avif\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Dashboard-Tritanopia.avif\" alt=\"Dashboard Tritanopia\" \/><figcaption class=\"elementor-image-carousel-caption\">Dashboard Tritanopia<\/figcaption><\/figure><\/a><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"5 of 5\"><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"054c693\" data-elementor-lightbox-title=\"Dashboard Achromatopsia\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTg5NjEsInVybCI6Imh0dHBzOlwvXC9jYWNoZS5kZXYuZ3Jvd3RoLW5pbmphcy5uZXRcL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjVcLzA1XC9EYXNoYm9hcmQtQWNocm9tYXRvcHNpYS5hdmlmIiwic2xpZGVzaG93IjoiMDU0YzY5MyJ9\" href=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Dashboard-Achromatopsia.avif\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Dashboard-Achromatopsia.avif\" alt=\"Dashboard Achromatopsia\" \/><figcaption class=\"elementor-image-carousel-caption\">Dashboard Achromatopsia<\/figcaption><\/figure><\/a><\/div>\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-prev\" role=\"button\" tabindex=\"0\">\n\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-eicon-chevron-left\" viewBox=\"0 0 1000 1000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M646 125C629 125 613 133 604 142L308 442C296 454 292 471 292 487 292 504 296 521 308 533L604 854C617 867 629 875 646 875 663 875 679 871 692 858 704 846 713 829 713 812 713 796 708 779 692 767L438 487 692 225C700 217 708 204 708 187 708 171 704 154 692 142 675 129 663 125 646 125Z\"><\/path><\/svg>\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-next\" role=\"button\" tabindex=\"0\">\n\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-eicon-chevron-right\" viewBox=\"0 0 1000 1000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M696 533C708 521 713 504 713 487 713 471 708 454 696 446L400 146C388 133 375 125 354 125 338 125 325 129 313 142 300 154 292 171 292 187 292 204 296 221 308 233L563 492 304 771C292 783 288 800 288 817 288 833 296 850 308 863 321 871 338 875 354 875 371 875 388 867 400 854L696 533Z\"><\/path><\/svg>\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"swiper-pagination\"><\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-99ab2d0 elementor-widget elementor-widget-heading\" data-id=\"99ab2d0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Use accessibility as an opportunity for sustainable growth!<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7f7eb23 elementor-widget elementor-widget-text-editor\" data-id=\"7f7eb23\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Considering colorblindness in web design is an important step towards a more inclusive and user-friendly digital presence. Designing websites, landing pages and emails in WordPress and HubSpot to be accessible to all not only improves the user experience, but also unlocks potential for sustainable growth. It is worth integrating these aspects into the design and implementation of digital strategies!  <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b417c9c elementor-widget elementor-widget-heading\" data-id=\"b417c9c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Tools and resources<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-55ca0a9 elementor-widget elementor-widget-text-editor\" data-id=\"55ca0a9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h3>Further information<\/h3><ul><li><a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/\" target=\"_blank\" rel=\"noopener\"><strong>WCAG<\/strong><\/a> &#8211; Web Content Accessibility Guidelines<\/li><li><a href=\"https:\/\/www.wko.at\/ce-kennzeichnung-normen\/informationen-zum-barrierefreiheitsgesetz\" target=\"_blank\" rel=\"noopener\"><strong>Accessibility Act<\/strong><\/a> (BaFG &#8211; Austria)<\/li><li><a href=\"https:\/\/bfsg-gesetz.de\/\" target=\"_blank\" rel=\"noopener\"><strong>Accessibility Reinforcement Act<\/strong><\/a> (BFSG &#8211; Germany)<\/li><li><a href=\"https:\/\/www.datawrapper.de\/blog\/colorblindness-part1\" target=\"_blank\" rel=\"noopener\"><strong>How your colorblind and colorweak readers see your colors (Part 1)<\/strong><\/a> &#8211; Interesting facts about colorblindness<\/li><li><a href=\"https:\/\/www.datawrapper.de\/blog\/colorblindness-part2\" target=\"_blank\" rel=\"noopener\"><strong>What to consider when visualizing data for colorblind readers (Part 2)<\/strong><\/a> &#8211; Design tips for colorblindness<\/li><li><a href=\"https:\/\/www.datawrapper.de\/blog\/colorblindness-part3\" target=\"_blank\" rel=\"noopener\"><strong>What&#8217;s it like to be colorblind (Part 3)<\/strong><\/a> &#8211; Interviews with colorblind people who describe how they experience their environment<\/li><\/ul><h3>Tools and simulations<\/h3><ul><li><a href=\"https:\/\/projects.susielu.com\/viz-palette\" target=\"_blank\" rel=\"noopener\" data-wplink-edit=\"true\"><strong>Viz Palette<\/strong><\/a> &#8211; Test color palette in various application areas<\/li><li><a href=\"https:\/\/www.whocanuse.com\/\" target=\"_blank\" rel=\"noopener\"><strong>who can use<\/strong><\/a> &#8211; Test contrast ratio of background and font color<\/li><li><a href=\"https:\/\/www.toptal.com\/designers\/colorfilter\" target=\"_blank\" rel=\"noopener\"><strong>Colorblind Web Page Filter<\/strong><\/a> &#8211; Testing an existing website<\/li><li><strong><a href=\"http:\/\/color-blindness.com\/coblis-color-blindness-simulator\/\" target=\"_blank\" rel=\"noopener\">Coblis &#8211;<\/a> Color Blindness Simulator<\/strong> &#8211; Upload and test an image\/design<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e6367bb e-flex e-con-boxed e-con e-parent\" data-id=\"e6367bb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-668fda9 elementor-widget elementor-widget-n-accordion\" data-id=\"668fda9\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;max_items_expended&quot;:&quot;multiple&quot;,&quot;default_state&quot;:&quot;expanded&quot;,&quot;n_accordion_animation_duration&quot;:{&quot;unit&quot;:&quot;ms&quot;,&quot;size&quot;:400,&quot;sizes&quot;:[]}}\" data-widget_type=\"nested-accordion.default\">\n\t\t\t\t\t\t\t<div class=\"e-n-accordion\" aria-label=\"Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys\">\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1070\" class=\"e-n-accordion-item\" open>\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"1\" tabindex=\"0\" aria-expanded=\"true\" aria-controls=\"e-n-accordion-item-1070\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> What is color blindness? <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t<span class='e-closed'><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1070\" class=\"elementor-element elementor-element-254f031 e-con-full e-flex e-con e-child\" data-id=\"254f031\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d66ebb2 elementor-widget elementor-widget-text-editor\" data-id=\"d66ebb2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Color blindness (actually color vision deficiency) describes a limited ability to distinguish colors, caused by missing or defective cones in the retina. A distinction is made between anomalies (e.g. protanomaly, deuteranomaly, tritanomaly), dichromasia (e.g. protanopia, deuteranopia, tritanopia) and achromasia (complete grayscale vision). <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1071\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"2\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1071\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> How common is color blindness? <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t<span class='e-closed'><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1071\" class=\"elementor-element elementor-element-103a43c e-con-full e-flex e-con e-child\" data-id=\"103a43c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f0a1226 elementor-widget elementor-widget-text-editor\" data-id=\"f0a1226\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Worldwide, around one in 12 men and one in 200 women are affected; in Europe, around 8% of men suffer from red\/green weakness. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1072\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"3\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1072\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Why is inclusive web design not a nice-to-have? <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t<span class='e-closed'><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1072\" class=\"elementor-element elementor-element-9fdc38f e-con-full e-flex e-con e-child\" data-id=\"9fdc38f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-601a781 elementor-widget elementor-widget-text-editor\" data-id=\"601a781\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Without alternatives to pure color, a significant proportion of users do not recognize important elements, leave the page and do not convert. Accessibility increases dwell time, interaction and conversions and signals compliance with WCAG standards. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1073\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"4\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1073\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> What legal requirements apply in Austria and Germany? <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t<span class='e-closed'><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1073\" class=\"elementor-element elementor-element-80a70af e-con-full e-flex e-con e-child\" data-id=\"80a70af\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ac22649 elementor-widget elementor-widget-text-editor\" data-id=\"ac22649\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>From June 28, 2025, the Accessibility Act (BaFG) in Austria and the Accessibility Reinforcement Act (BFSG) in Germany will regulate digital accessibility in accordance with WCAG 2.1 AA and EN 301 549. Violations can result in fines of up to \u20ac80,000 (AT) and \u20ac100,000 (DE). <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1074\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"5\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1074\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> How do I test the color contrast effectively? <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t<span class='e-closed'><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1074\" class=\"elementor-element elementor-element-9ddc110 e-con-full e-flex e-con e-child\" data-id=\"9ddc110\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-180a02e elementor-widget elementor-widget-text-editor\" data-id=\"180a02e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Contrast ratios should be \u2265 4.5 : 1 (text) or \u2265 3 : 1 (large text) according to WCAG. Tools such as Whocanuse check background\/text ratios in real time. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1075\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"6\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1075\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Which simulation tools are recommended? <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t<span class='e-closed'><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1075\" class=\"elementor-element elementor-element-617af03 e-con-full e-flex e-con e-child\" data-id=\"617af03\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0feda4e elementor-widget elementor-widget-text-editor\" data-id=\"0feda4e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Coblis (color-blindness.com) or the Color Report on Viz Palette provide realistic previews for protanopia, deuteranopia, tritanopia and monochromatism.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1076\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"7\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1076\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> What best practices ensure color-friendly design? <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t<span class='e-closed'><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1076\" class=\"elementor-element elementor-element-3f4f89a e-con-full e-flex e-con e-child\" data-id=\"3f4f89a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4591849 elementor-widget elementor-widget-text-editor\" data-id=\"4591849\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<ul><li>Never use colors as the sole distinguishing feature; use icons, patterns or text labels as a supplement<\/li><li>Highlight CTAs through shape, position and clear labeling<\/li><li>Check color palettes for contrast and adjust<\/li><li>Integrate simulations regularly into the design workflow<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<script type=\"application\/ld+json\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"What is color blindness?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Color blindness (actually color vision deficiency) describes a limited ability to distinguish colors, caused by missing or defective cones in the retina. A distinction is made between anomalies (e.g. protanomaly, deuteranomaly, tritanomaly), dichromasia (e.g. protanopia, deuteranopia, tritanopia) and achromasia (complete grayscale vision).\"}},{\"@type\":\"Question\",\"name\":\"How common is color blindness?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Worldwide, around one in 12 men and one in 200 women are affected; in Europe, around 8% of men suffer from red\\\/green weakness.\"}},{\"@type\":\"Question\",\"name\":\"Why is inclusive web design not a nice-to-have?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Without alternatives to pure color, a significant proportion of users do not recognize important elements, leave the page and do not convert. Accessibility increases dwell time, interaction and conversions and signals compliance with WCAG standards.\"}},{\"@type\":\"Question\",\"name\":\"What legal requirements apply in Austria and Germany?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"From June 28, 2025, the Accessibility Act (BaFG) in Austria and the Accessibility Reinforcement Act (BFSG) in Germany will regulate digital accessibility in accordance with WCAG 2.1 AA and EN 301 549. Violations can result in fines of up to \\u20ac80,000 (AT) and \\u20ac100,000 (DE).\"}},{\"@type\":\"Question\",\"name\":\"How do I test the color contrast effectively?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Contrast ratios should be \\u2265 4.5 : 1 (text) or \\u2265 3 : 1 (large text) according to WCAG. Tools such as Whocanuse check background\\\/text ratios in real time.\"}},{\"@type\":\"Question\",\"name\":\"Which simulation tools are recommended?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Coblis (color-blindness.com) or the Color Report on Viz Palette provide realistic previews for protanopia, deuteranopia, tritanopia and monochromatism.\"}},{\"@type\":\"Question\",\"name\":\"What best practices ensure color-friendly design?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Never use colors as the sole distinguishing feature; use icons, patterns or text labels as a supplementHighlight CTAs through shape, position and clear labelingCheck color palettes for contrast and adjustIntegrate simulations regularly into the design workflow\"}}]}<\/script>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Color-based call-to-actions are useless if <strong>color-blind visitors<\/strong> can&#8217;t see them. The article shows how you can achieve up to 15% more conversions with high-contrast palettes, text labels instead of color alone and WCAG-compliant testing tools. <\/p>\n","protected":false},"author":1,"featured_media":18932,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[371],"tags":[774,758,759,760,761,762,763,764],"thema":[470,469],"class_list":["post-18976","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-column","tag-aeo-en","tag-color-blindness","tag-colorblind","tag-web-design","tag-accessible","tag-protanopia","tag-deuteranopia","tag-tritanopia","thema-hubspot-marketing-and-sales-automation","thema-websites-and-landing-pages"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.2 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Colorblindness: Why inclusive design is important<\/title>\n<meta name=\"description\" content=\"Color blindness affects many people. Learn how a well thought-out design can break down barriers and help your company grow.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cache.dev.growth-ninjas.net\/en\/color-blindness-web-design-growth\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Color blindness &amp; web design: accessible websites\" \/>\n<meta property=\"og:description\" content=\"Correct handling of color blindness in web design\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cache.dev.growth-ninjas.net\/en\/color-blindness-web-design-growth\/\" \/>\n<meta property=\"og:site_name\" content=\"We live and breathe Growth and Digitalisation | Growth Ninjas\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/growthninjas\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-12T19:52:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-05T12:41:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Farbenblindheit-Web.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1201\" \/>\n\t<meta property=\"og:image:height\" content=\"801\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"David Scharler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Colorblindness &amp; web design - driving growth through accessible design\" \/>\n<meta name=\"twitter:description\" content=\"Color-based call-to-actions are useless if color-blind visitors can&#039;t see them. The article shows how you can achieve up to 15% more conversions with high-contrast palettes, text labels instead of color alone and WCAG-compliant testing tools.\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"David Scharler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/color-blindness-web-design-growth\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/color-blindness-web-design-growth\\\/\"},\"author\":{\"name\":\"David Scharler\",\"@id\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/#\\\/schema\\\/person\\\/795d2ef1cc8654a8f757b9810b28e9a1\"},\"headline\":\"Colorblindness &amp; web design &#8211; driving growth through accessible design\",\"datePublished\":\"2025-05-12T19:52:26+00:00\",\"dateModified\":\"2026-03-05T12:41:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/color-blindness-web-design-growth\\\/\"},\"wordCount\":2155,\"publisher\":{\"@id\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/color-blindness-web-design-growth\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/Farbenblindheit-Web.avif\",\"keywords\":[\"AEO\",\"Color blindness\",\"Colorblind\",\"Web design\",\"Accessible\",\"Protanopia\",\"Deuteranopia\",\"Tritanopia\"],\"articleSection\":[\"Column\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/color-blindness-web-design-growth\\\/\",\"url\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/color-blindness-web-design-growth\\\/\",\"name\":\"Colorblindness: Why inclusive design is important\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/color-blindness-web-design-growth\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/color-blindness-web-design-growth\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/Farbenblindheit-Web.avif\",\"datePublished\":\"2025-05-12T19:52:26+00:00\",\"dateModified\":\"2026-03-05T12:41:10+00:00\",\"description\":\"Color blindness affects many people. Learn how a well thought-out design can break down barriers and help your company grow.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/color-blindness-web-design-growth\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/color-blindness-web-design-growth\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/color-blindness-web-design-growth\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/Farbenblindheit-Web.avif\",\"contentUrl\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/Farbenblindheit-Web.avif\",\"width\":1201,\"height\":801,\"caption\":\"Comparison image: Image in normal vision vs. deuteranopia simulation\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/color-blindness-web-design-growth\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/home-2-2\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HubSpot Marketing Sales Automation\",\"item\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/thema\\\/hubspot-marketing-and-sales-automation\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Colorblindness &amp; web design &#8211; driving growth through accessible design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/\",\"name\":\"Growth Ninjas\",\"description\":\"Experts in Digital Growth\",\"publisher\":{\"@id\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/#organization\"},\"alternateName\":\"Growth Ninjas |\u00a0Wachstum, HubSpot, B2B Sales\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/#organization\",\"name\":\"Growth Ninjas GmbH\",\"alternateName\":\"Growth Ninjas\",\"url\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/Growth-Ninjas-Logo-2021-v3.svg\",\"contentUrl\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/Growth-Ninjas-Logo-2021-v3.svg\",\"width\":744,\"height\":136,\"caption\":\"Growth Ninjas GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/growthninjas\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/growth-ninjas\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/stefangreunz\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/johannes-eichmeyer\\\/\",\"https:\\\/\\\/ecosystem.hubspot.com\\\/marketplace\\\/solutions\\\/growth-ninjas-com\",\"https:\\\/\\\/www.xing.com\\\/profile\\\/Stefan_Greunz\",\"https:\\\/\\\/www.xing.com\\\/profile\\\/Johannes_Eichmeyer\"],\"description\":\"Wir leben Wachstum und Digitalisierung. Als Growth Ninjas nutzen wir unsere F\u00e4higkeiten, um Ihre Ziele zu erreichen. Wir begleiten Sie am Weg dorthin, setzen um, und liefern Ergebnisse \u2013 ob verdeckt im Hintergrund oder in der ersten Reihe.\",\"email\":\"info@growth-ninjas.com\",\"legalName\":\"Growth Ninjas GmbH\",\"foundingDate\":\"2017-09-01\",\"vatID\":\"ATU72594025\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"1\",\"maxValue\":\"10\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/en\\\/#\\\/schema\\\/person\\\/795d2ef1cc8654a8f757b9810b28e9a1\",\"name\":\"David Scharler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/cropped-David-Business-qu-96x96.jpg\",\"url\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/cropped-David-Business-qu-96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/cropped-David-Business-qu-96x96.jpg\",\"caption\":\"David Scharler\"},\"description\":\"David Scharler ist Design &amp; Development Ninja bei Growth Ninjas. Sein Schwerpunkt liegt auf HubSpot-Newsletter- und Angebots-Templates, konversionsstarken Formularen &amp; Landing-Pages sowie WordPress-Design und -Entwicklung. Als UI-Designer in Figma \u00fcbersetzt er komplexe Anforderungen in klare, performante Oberfl\u00e4chen. Erg\u00e4nzt wird dieses Profil durch langj\u00e4hrige Erfahrung im Print- und Web-Design mit den Adobe-Programmen, die ihm ein feines Gesp\u00fcr f\u00fcr Typografie, Farbe und Detailtreue verleihen.\",\"sameAs\":[\"https:\\\/\\\/cache.dev.growth-ninjas.net\\\/die-ninjas\\\/david-scharler\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/davidscharler\\\/\"],\"gender\":\"m\u00e4nnlich\",\"knowsAbout\":[\"Graphic Design\",\"Web Design\",\"Frontend Development\",\"WordPress\",\"HubSpot\"],\"knowsLanguage\":[\"Deutsch\",\"Englisch\"],\"jobTitle\":\"Design & Development Ninja\",\"worksFor\":\"Growth Ninjas GmbH\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Colorblindness: Why inclusive design is important","description":"Color blindness affects many people. Learn how a well thought-out design can break down barriers and help your company grow.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cache.dev.growth-ninjas.net\/en\/color-blindness-web-design-growth\/","og_locale":"en_GB","og_type":"article","og_title":"Color blindness & web design: accessible websites","og_description":"Correct handling of color blindness in web design","og_url":"https:\/\/cache.dev.growth-ninjas.net\/en\/color-blindness-web-design-growth\/","og_site_name":"We live and breathe Growth and Digitalisation | Growth Ninjas","article_publisher":"https:\/\/www.facebook.com\/growthninjas\/","article_published_time":"2025-05-12T19:52:26+00:00","article_modified_time":"2026-03-05T12:41:10+00:00","og_image":[{"width":1201,"height":801,"url":"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Farbenblindheit-Web.jpg","type":"image\/jpeg"}],"author":"David Scharler","twitter_card":"summary_large_image","twitter_title":"Colorblindness &amp; web design - driving growth through accessible design","twitter_description":"Color-based call-to-actions are useless if color-blind visitors can't see them. The article shows how you can achieve up to 15% more conversions with high-contrast palettes, text labels instead of color alone and WCAG-compliant testing tools.","twitter_misc":{"Written by":"David Scharler","Estimated reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cache.dev.growth-ninjas.net\/en\/color-blindness-web-design-growth\/#article","isPartOf":{"@id":"https:\/\/cache.dev.growth-ninjas.net\/en\/color-blindness-web-design-growth\/"},"author":{"name":"David Scharler","@id":"https:\/\/cache.dev.growth-ninjas.net\/en\/#\/schema\/person\/795d2ef1cc8654a8f757b9810b28e9a1"},"headline":"Colorblindness &amp; web design &#8211; driving growth through accessible design","datePublished":"2025-05-12T19:52:26+00:00","dateModified":"2026-03-05T12:41:10+00:00","mainEntityOfPage":{"@id":"https:\/\/cache.dev.growth-ninjas.net\/en\/color-blindness-web-design-growth\/"},"wordCount":2155,"publisher":{"@id":"https:\/\/cache.dev.growth-ninjas.net\/en\/#organization"},"image":{"@id":"https:\/\/cache.dev.growth-ninjas.net\/en\/color-blindness-web-design-growth\/#primaryimage"},"thumbnailUrl":"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Farbenblindheit-Web.avif","keywords":["AEO","Color blindness","Colorblind","Web design","Accessible","Protanopia","Deuteranopia","Tritanopia"],"articleSection":["Column"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/cache.dev.growth-ninjas.net\/en\/color-blindness-web-design-growth\/","url":"https:\/\/cache.dev.growth-ninjas.net\/en\/color-blindness-web-design-growth\/","name":"Colorblindness: Why inclusive design is important","isPartOf":{"@id":"https:\/\/cache.dev.growth-ninjas.net\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cache.dev.growth-ninjas.net\/en\/color-blindness-web-design-growth\/#primaryimage"},"image":{"@id":"https:\/\/cache.dev.growth-ninjas.net\/en\/color-blindness-web-design-growth\/#primaryimage"},"thumbnailUrl":"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Farbenblindheit-Web.avif","datePublished":"2025-05-12T19:52:26+00:00","dateModified":"2026-03-05T12:41:10+00:00","description":"Color blindness affects many people. Learn how a well thought-out design can break down barriers and help your company grow.","breadcrumb":{"@id":"https:\/\/cache.dev.growth-ninjas.net\/en\/color-blindness-web-design-growth\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cache.dev.growth-ninjas.net\/en\/color-blindness-web-design-growth\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/cache.dev.growth-ninjas.net\/en\/color-blindness-web-design-growth\/#primaryimage","url":"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Farbenblindheit-Web.avif","contentUrl":"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2025\/05\/Farbenblindheit-Web.avif","width":1201,"height":801,"caption":"Comparison image: Image in normal vision vs. deuteranopia simulation"},{"@type":"BreadcrumbList","@id":"https:\/\/cache.dev.growth-ninjas.net\/en\/color-blindness-web-design-growth\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/cache.dev.growth-ninjas.net\/en\/home-2-2\/"},{"@type":"ListItem","position":2,"name":"HubSpot Marketing Sales Automation","item":"https:\/\/cache.dev.growth-ninjas.net\/en\/thema\/hubspot-marketing-and-sales-automation\/"},{"@type":"ListItem","position":3,"name":"Colorblindness &amp; web design &#8211; driving growth through accessible design"}]},{"@type":"WebSite","@id":"https:\/\/cache.dev.growth-ninjas.net\/en\/#website","url":"https:\/\/cache.dev.growth-ninjas.net\/en\/","name":"Growth Ninjas","description":"Experts in Digital Growth","publisher":{"@id":"https:\/\/cache.dev.growth-ninjas.net\/en\/#organization"},"alternateName":"Growth Ninjas |\u00a0Wachstum, HubSpot, B2B Sales","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cache.dev.growth-ninjas.net\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/cache.dev.growth-ninjas.net\/en\/#organization","name":"Growth Ninjas GmbH","alternateName":"Growth Ninjas","url":"https:\/\/cache.dev.growth-ninjas.net\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/cache.dev.growth-ninjas.net\/en\/#\/schema\/logo\/image\/","url":"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2021\/03\/Growth-Ninjas-Logo-2021-v3.svg","contentUrl":"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2021\/03\/Growth-Ninjas-Logo-2021-v3.svg","width":744,"height":136,"caption":"Growth Ninjas GmbH"},"image":{"@id":"https:\/\/cache.dev.growth-ninjas.net\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/growthninjas\/","https:\/\/www.linkedin.com\/company\/growth-ninjas","https:\/\/www.linkedin.com\/in\/stefangreunz\/","https:\/\/www.linkedin.com\/in\/johannes-eichmeyer\/","https:\/\/ecosystem.hubspot.com\/marketplace\/solutions\/growth-ninjas-com","https:\/\/www.xing.com\/profile\/Stefan_Greunz","https:\/\/www.xing.com\/profile\/Johannes_Eichmeyer"],"description":"Wir leben Wachstum und Digitalisierung. Als Growth Ninjas nutzen wir unsere F\u00e4higkeiten, um Ihre Ziele zu erreichen. Wir begleiten Sie am Weg dorthin, setzen um, und liefern Ergebnisse \u2013 ob verdeckt im Hintergrund oder in der ersten Reihe.","email":"info@growth-ninjas.com","legalName":"Growth Ninjas GmbH","foundingDate":"2017-09-01","vatID":"ATU72594025","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"1","maxValue":"10"}},{"@type":"Person","@id":"https:\/\/cache.dev.growth-ninjas.net\/en\/#\/schema\/person\/795d2ef1cc8654a8f757b9810b28e9a1","name":"David Scharler","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2024\/11\/cropped-David-Business-qu-96x96.jpg","url":"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2024\/11\/cropped-David-Business-qu-96x96.jpg","contentUrl":"https:\/\/cache.dev.growth-ninjas.net\/wp-content\/uploads\/2024\/11\/cropped-David-Business-qu-96x96.jpg","caption":"David Scharler"},"description":"David Scharler ist Design &amp; Development Ninja bei Growth Ninjas. Sein Schwerpunkt liegt auf HubSpot-Newsletter- und Angebots-Templates, konversionsstarken Formularen &amp; Landing-Pages sowie WordPress-Design und -Entwicklung. Als UI-Designer in Figma \u00fcbersetzt er komplexe Anforderungen in klare, performante Oberfl\u00e4chen. Erg\u00e4nzt wird dieses Profil durch langj\u00e4hrige Erfahrung im Print- und Web-Design mit den Adobe-Programmen, die ihm ein feines Gesp\u00fcr f\u00fcr Typografie, Farbe und Detailtreue verleihen.","sameAs":["https:\/\/cache.dev.growth-ninjas.net\/die-ninjas\/david-scharler\/","https:\/\/www.linkedin.com\/in\/davidscharler\/"],"gender":"m\u00e4nnlich","knowsAbout":["Graphic Design","Web Design","Frontend Development","WordPress","HubSpot"],"knowsLanguage":["Deutsch","Englisch"],"jobTitle":"Design & Development Ninja","worksFor":"Growth Ninjas GmbH"}]}},"_links":{"self":[{"href":"https:\/\/cache.dev.growth-ninjas.net\/en\/wp-json\/wp\/v2\/posts\/18976","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cache.dev.growth-ninjas.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cache.dev.growth-ninjas.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cache.dev.growth-ninjas.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cache.dev.growth-ninjas.net\/en\/wp-json\/wp\/v2\/comments?post=18976"}],"version-history":[{"count":19,"href":"https:\/\/cache.dev.growth-ninjas.net\/en\/wp-json\/wp\/v2\/posts\/18976\/revisions"}],"predecessor-version":[{"id":20430,"href":"https:\/\/cache.dev.growth-ninjas.net\/en\/wp-json\/wp\/v2\/posts\/18976\/revisions\/20430"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cache.dev.growth-ninjas.net\/en\/wp-json\/wp\/v2\/media\/18932"}],"wp:attachment":[{"href":"https:\/\/cache.dev.growth-ninjas.net\/en\/wp-json\/wp\/v2\/media?parent=18976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cache.dev.growth-ninjas.net\/en\/wp-json\/wp\/v2\/categories?post=18976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cache.dev.growth-ninjas.net\/en\/wp-json\/wp\/v2\/tags?post=18976"},{"taxonomy":"thema","embeddable":true,"href":"https:\/\/cache.dev.growth-ninjas.net\/en\/wp-json\/wp\/v2\/thema?post=18976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}