{"id":7435,"date":"2023-03-09T18:10:37","date_gmt":"2023-03-09T16:10:37","guid":{"rendered":"https:\/\/www.netz-barrierefrei.de\/wordpress\/?p=7435"},"modified":"2025-08-06T16:00:01","modified_gmt":"2025-08-06T14:00:01","slug":"barrierefreiheit-bei-kontrasten-haeufige-probleme-und-loesungen","status":"publish","type":"post","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-bei-kontrasten-haeufige-probleme-und-loesungen\/","title":{"rendered":"Barrierefreiheit bei Kontrasten \u2013 h\u00e4ufige Probleme und L\u00f6sungen"},"content":{"rendered":"<p><iframe loading=\"lazy\" src=\"https:\/\/digitale-barrierefreiheit.podigee.io\/183-barrierefreie-kontraste-probleme-und-losungen\/embed?context=external&#038;theme=default\" style=\"border: 0\" frameBorder=\"0\" height=\"100\" width=\"100%\"><\/iframe><br \/>\nEiner der h\u00e4ufigsten Fehler bei der digitalen Barrierefreiheit sind zu geringe Kontraste. In diesem Beitrag geht es darum, wie Sie mit diesem Problem umgehen k\u00f6nnen.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-bei-kontrasten-haeufige-probleme-und-loesungen\/#Anforderungen_an_Kontraste\" >Anforderungen an Kontraste<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-bei-kontrasten-haeufige-probleme-und-loesungen\/#Umgang_mit_Kontrasten\" >Umgang mit Kontrasten<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-bei-kontrasten-haeufige-probleme-und-loesungen\/#Sind_Alternativ-Versionen_nicht_verboten\" >Sind Alternativ-Versionen nicht verboten<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Anforderungen_an_Kontraste\"><\/span>Anforderungen an Kontraste<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Vor allem f\u00fcr sehbehinderte und \u00e4ltere Menschen ist es wichtig, dass Texte und UI-Elemente ausreichend Kontrast haben. Ansonsten haben sie Probleme, die Elemente zu erkennen bzw. den Text zu lesen.<br \/>\nIm ma\u00dfgeblichen Regelwerk, der WCAG 2.1 AA, gibt es zwei Richtlinien, die den Kontrast betreffen. Das Erfolgs-kriterium 1.4.3 Contrast Minimum gibt einen Kontrast von 4,5:1 f\u00fcr normalen Text vor. Normaler Text ist definiert als Text, der kleiner als 18 pt  (24 Pixel) bzw. 14 pt (18,5 Pixel) gefettet ist. Ist Text gr\u00f6\u00dfer als diese Werte, soll er einen Mindest-Kontrast von 3:1 haben. F\u00fcr grafische Bedien-Elemente, die keinen Text enthalten, soll der Mindest-Kontrast 3:1 betragen (Erfolgskriterium 1.4.11 Non-text Contrast).<br \/>\nDer Kontrast ist das Verh\u00e4ltnis zwischen Vorder- und Hintergrundfarbe: Der rechte Wert ist dabei immer 1, je h\u00f6her der linke Wert ist, desto h\u00f6her ist der Kontrast. Es gibt eine ganze Reihe von Rechnern im Internet, um den Kontrast zu ermitteln.<br \/>\nDie Kontrast-Anforderungen m\u00fcssen f\u00fcr alle Inhalte und UI-Elemente erf\u00fcllt werden. Ausgenommen sind Logos, reine Design-Elemente sowie inaktive UI-Elemente. Oft vergessen werden Informationsgrafiken, auch sie m\u00fcssen die Mindest-Kontraste erf\u00fcllen. Auch wenn Sie Funktionalit\u00e4ten von Dritt-Anbietern wie Cookie-L\u00f6sungen oder Media-Player verwenden, m\u00fcssen sie den Kontrast-Anforderungen entsprechen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Umgang_mit_Kontrasten\"><\/span>Umgang mit Kontrasten<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Optimal ist es, wenn die Farb-Palette von vorneherein so gestaltet wird, dass die Kontraste die Anforderungen erf\u00fcllen. Es gibt aber F\u00e4lle, in denen es schwieriger ist, die Minimal-Kontraste zu erf\u00fcllen. Das gilt vor allem, wenn das Corporate Design (CD) auf nicht geeigneten Farben basiert.<br \/>\nWeichen die Werte nur geringf\u00fcgig ab, reicht es eventuell schon, die Farben leicht anzupassen. Kleine Unterschiede fallen h\u00e4ufig nur im direkten Vergleich auf. Die Kontrast-Werte d\u00fcrfen \u00fcbrigens nicht aufgerundet werden: 4,5:1 ist bestanden, 4,49:1 nicht. Eventuell ist es auch m\u00f6glich, f\u00fcr die betroffene Komponente eine Ausnahme vom CD zu vereinbaren. Das CD kann sich im Logo und Schmuck-Elementen austoben, daf\u00fcr gelten keine Mindest-Kontraste.<br \/>\nEine M\u00f6glichkeit ist auch, die Textgr\u00f6\u00dfe oder die Fettung oder beides zu \u00e4ndern. Ist der Text zum Beispiel 19 Pixel gro\u00df, k\u00f6nnte man ihn fetten und m\u00fcsste dann den Wert von3:1 erf\u00fcllen. Ist der Text 22 Pixel gro\u00df, k\u00f6nnte man ihn auf 24 Pixel vergr\u00f6\u00dfern, das sollte keinen gro\u00dfen Einfluss auf das Layout haben.<br \/>\nIst das nicht m\u00f6glich oder gew\u00fcnscht, wird es komplizierter. Es kann sich anbieten, eine spezielle Version der Anwendung mit einem h\u00f6heren Kontrast anzubieten. Der Dark Mode ist f\u00fcr diesen Zweck nicht geeignet, da er etwa f\u00fcr Sehbehinderte andere Probleme verursachen k\u00f6nnte. Auch sind beim Dark Mode die Kontraste nicht automatisch ausreichend. Bei Websites ist es aber dank CSS kein Problem, angepasste Versionen anzubieten.<br \/>\nBietet man eine sogenannte Alternativ-Version an, muss sie zwei Anforderungen erf\u00fcllen:<\/p>\n<ul>\n<li>Sie muss leicht auffindbar sein, zum Beispiel oben rechts auf jeder Seite bzw. auf jedem Screen. Und sie muss selbst barrierefrei sein, also angemessene Kontraste haben.<\/li>\n<li>Einmal aktiviert, sollte sie im gesamten Auftritt beibehalten werden, also auch beim Aufrufen einer neuen Unterseite bzw. eines neuen Screens in einer App. <\/li>\n<\/ul>\n<p>Ein weiteres h\u00e4ufiges Problem sind Hintergrundbilder oder unterschiedlich farbige Fl\u00e4chen mit Text oder UI-Elementen darauf. Bei Hintergrund-Bildern ist es nicht m\u00f6glich, den Kontrast immer einzuhalten, wenn diese Bilder ausgetauscht werden, weil Bilder immer unterschiedlich helle Bereiche haben.<br \/>\nTexte und UI-Elemente sollten entweder nicht darauf platziert werden oder sie sollten ihrerseits einen gleichbleibenden Hintergrund erhalten, der sicherstellt, dass der Kontrast auch bei ge\u00e4nderten Hintergr\u00fcnden den Kontrast erf\u00fcllt.<br \/>\nEin weiteres h\u00e4ufiges Problem sind transparente Elemente. Ein Beispiel daf\u00fcr sind Multimedia-player, deren Bedien-Elemente auf einem halbtransparenten Hintergrund platziert sind, wo also Teile des Videos zu erkennen sind. Hier gilt das Gleiche wie f\u00fcr Hintergrund-Bilder. Sind die Bedien-Elemente zum Beispiel wei\u00df und enth\u00e4lt das Video an dieser Stelle helle Elemente, reicht der Kontrast in der Regel nicht mehr aus. Die Empfehlung w\u00e4re, an dieser Stelle nicht mit transparenten Hintergr\u00fcnden zu arbeiten. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Sind_Alternativ-Versionen_nicht_verboten\"><\/span>Sind Alternativ-Versionen nicht verboten<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Alternativ-Versionen sollten generell als Ausnahme behandelt und nicht als Dauerl\u00f6sung betrachtet werden. Im Endeffekt erh\u00f6hen sie den Arbeitsaufwand und die Anf\u00e4lligkeit f\u00fcr fehlerhafte Darstellungen. Auch ist die Akzeptanz f\u00fcr Alternativ-Versionen eventuell nicht so hoch, wie man sich das als Anbieter w\u00fcnscht. Auf mittlere Sicht ist es sinnvoller, die Farben f\u00fcr die Komponente bzw. das CD so anzupassen, dass die Kontraste generell erf\u00fcllt sind. Eigentlich sollen laut WCAG Alternativversionen nur eingesetzt werden, wenn Funktionalit\u00e4ten mit aktueller Technik nicht barrierefrei gemacht werden k\u00f6nnen.<br \/>\nAuch haben Alternativversionen <a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/kontrast-modi-styleswitcher-und-text-versionen\/\">zu Recht einen schlechten Ruf<\/a>. \u00c4ltere erinnern sich an die wenig brauchbaren Text-Versionen aus den Nuller-Jahren. Das gilt definitiv f\u00fcr extra programmierte Versionen von Websites. Heute ist es allerdings m\u00f6glich, mit CSS inhalts- und funktions-\u00e4quivalente Websites zu bauen. Ein Styleswitcher w\u00fcrde in unserem Fall lediglich wie ein Dark Mode das Layout beeinflussen. Die Inhalte kommen nach wie vor aus der gleichen Datenbank, die Funktionalit\u00e4ten aus HTML und JavaScript.<br \/>\nAus meiner und der Sicht der Web Accessibility Initiative ist das CD kein ausreichender Grund f\u00fcr eine alternative Version der Website, wie oben gesagt ist es eine \u00dcbergangs-L\u00f6sung, bis das CD angepasst wurde. Schon gar nicht sollten solche Alternativversionen als Ausrede f\u00fcr andere M\u00e4ngel in der Barrierefreiheit herhalten. <\/p>\n<ul>\n<li><a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/8671-2\/\">Nutzer-Einstellungen sind die Zukunft<\/a><\/li>\n<li><a href=\"https:\/\/www.netz-barrierefrei.de\/en\/low-contrast.html\">How to deal with low contrast in digital Accessibility<\/a><\/li>\n<li><a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/design-konzept-barrierefrei\/\">Barrierefreiheit bei der Web-Konzeption<\/li>\n<li><a href=\"https:\/\/netz-barrierefrei.de\/en\/individual.html\">Invidual preferences as future of digital accessibility<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Einer der h\u00e4ufigsten Fehler bei der digitalen Barrierefreiheit sind zu geringe Kontraste. In diesem Beitrag geht es darum, wie Sie mit diesem Problem umgehen k\u00f6nnen.&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-bei-kontrasten-haeufige-probleme-und-loesungen\/\">Weiterlesen<span class=\"screen-reader-text\">Barrierefreiheit bei Kontrasten \u2013 h\u00e4ufige Probleme und L\u00f6sungen<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7435","post","type-post","status-publish","format-standard","hentry","category-allgemein","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/7435","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/comments?post=7435"}],"version-history":[{"count":16,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/7435\/revisions"}],"predecessor-version":[{"id":10167,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/7435\/revisions\/10167"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=7435"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/categories?post=7435"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/tags?post=7435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}