The most common problem of digital products concerning digital accessibility is low color contrast. This post shows why that is a problem and how to fix it.<\/p>\n\n\n\n
Disabilities in color deception are fairly common and range from weakness to complete color blindness. Around 12% of the world’s population are restricted in their color vision.<\/p>\n\n\n\n
To create content and components that are accessible to all visions, the color contrast from background to foreground – that is text or symbols – has to be high enough. This helps the content to be detected, processed and be readable.<\/p>\n\n\n\n
The Web Content Accessibility Guide has three levels to rate the accessibility of color usage.<\/p>\n\n\n\n
Information can’t rely on color only. There has to be additional visual information. The best example is an invalid input field. Simply adding a red border isn’t enough to mark it, always add an error message at the field.<\/p>\n\n\n\n
The next level asks for a color contrast of at least 4,5:1. This excludes inactive or decorative Elements, als well as logos. For headings the contrast is allowed at 3:1 as the font is larger and therefore the borders are easier to see.<\/p>\n\n\n\n
The highest level asks for color contrast of at least 7:1 and 4,5:1 for headings.<\/p>\n\n\n\n
The contrast in use can be found by using one of the thousand color pickers. Some browsers even have a build in color picker tool that shows the contrast and whether this would pass level AA or AAA.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Using high enough contrast starts at the design of a digital product. Yes, there can be decorative elements and a company does not have to change its logo, but it’s worth considering using higher contrast and enable around 10% of the worlds population to finally be able to use your specific page, app or program.<\/p>\n","protected":false},"excerpt":{"rendered":"
Low color contrast is by the time the most common failure of digital accessibility. But it’s very easy to fix that.<\/p>\n","protected":false},"author":1,"featured_media":384,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70,12],"tags":[72,73,71],"class_list":["post-637","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessibility","category-programming","tag-colors","tag-contrast","tag-digital-accessibility"],"translation":{"provider":"WPGlobus","version":"3.0.0","language":"de","enabled_languages":["en","de"],"languages":{"en":{"title":true,"content":true,"excerpt":true},"de":{"title":false,"content":false,"excerpt":false}}},"_links":{"self":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/637","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/comments?post=637"}],"version-history":[{"count":1,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/637\/revisions"}],"predecessor-version":[{"id":638,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/637\/revisions\/638"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/media\/384"}],"wp:attachment":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/media?parent=637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/categories?post=637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/tags?post=637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}