This can be a problem both on- and offline as posters hung on a wall can have the same impact as an image included in a tweet, so it\u2019s best to understand why color contrast can be an issue for people.<\/p>\n
Poor color contrast causes eye strain for non-impaired users, but for those who have low vision, low contrast vision or color blindness the colors it can cause them to not even see the image at all. And because people who are color blind are able to see things that aren\u2019t red, green or blue, they aren\u2019t going to be using screen readers where they\u2019ll be told what an image says.<\/p>\n
Essentially, you\u2019ve just erased the functionality of that image for 8% of the male population and 0.5% of the female population in the world.<\/p>\n
So, how can we make sure that our images are up to the visual standards that make sure our content can be read by everyone?<\/em><\/p>\n At Notre Dame, we strive to adhere to the Web Content Accessibility Guidelines (WCAG)<\/a>. One such guideline has to do with color contrast on graphics. These color contrast ratio requirements apply to text and graphics that are essential for understanding the content or functionality.<\/p>\n And every graphic that is included in a social media post should reach the threshold of \u201cessential for understanding the content or functionality\u201d (otherwise there\u2019s no point to include it, but that\u2019s another blog post), which means that all of them should adhere to the WCAG guidelines.<\/p>\n At a minimum, the contrast ratio should be 4.5:1 (or 3:1 for text that is 18 point or larger, or Bold 14 point or larger).<\/p>\n Web Accessibility In Mind (WebAIM) has a Color Contrast Checker<\/a> available for free that you can use when creating graphics to make sure they\u2019re complaint. Even if you don\u2019t understand the ratio, this tool boils it down to a Pass or Fail grade.<\/p>\n Here are two examples, side by side, the left fails, while the right passes. In each, I chose two of the brand colors for Notre Dame* and then dragged the foreground and background colors darker until they reached the appropriate contrast ratio.<\/p>\n <\/p>\n If you are not color deficient or low vision, you might not have a problem seeing the graphic that fails the test, but we have to remember that we don\u2019t want to exclude the 4.5% of the total population that deals with color contrast deficiencies.<\/p>\n And it\u2019s also important to look at color contrast when you\u2019re using text on top of an image as there may be portions of the image where the text is not contrasted enough or blends into the background.<\/p>\n We probably run into this problem more often than not on Stories as they\u2019re often created on the go or without the benefit of sitting down and being able to test the color contrast. Fixing this can be as simple as adding a background color to the text box, but that doesn\u2019t always work with the aesthetic you\u2019re seeking. This is where an Instagram \u201chack\u201d comes in handy \u2013 if you\u2019d like to add a transparent colored overlay on top of an image you\u2019ve taken in a Story, choose the pen tool, then the highlighter (second pen option) and choose a color then hold down on the screen for a few seconds. Ta-da! Now you can type text with a static color to contrast. Even adding a very light gray transparent background on top of an image that is barely noticeable can help exponentially with color contrast.<\/p>\n *This is a good reminder to check the color contrast even if colors are part of your brand standards (the two I chose are part of our secondary and tertiary colors) as they might not have been intended to use in this particular combination<\/p>\n","protected":false},"excerpt":{"rendered":" Have you ever seen an image on Twitter that makes you cringe? Something where you might even say out loud, \u201coh, my eyes!\u201d Normally these images include bright, or even neon colors, that clash with each other. Frequently, they include text on a plain background that is very difficult to read. In a recent blog … Continue reading Graphics Guidebook: Color Contrast Accessibility<\/span><\/a><\/p>\n","protected":false},"author":2314,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-140","post","type-post","status-publish","format-standard","hentry","category-social-media"],"_links":{"self":[{"href":"https:\/\/sites.nd.edu\/ndstories\/wp-json\/wp\/v2\/posts\/140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.nd.edu\/ndstories\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.nd.edu\/ndstories\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.nd.edu\/ndstories\/wp-json\/wp\/v2\/users\/2314"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.nd.edu\/ndstories\/wp-json\/wp\/v2\/comments?post=140"}],"version-history":[{"count":6,"href":"https:\/\/sites.nd.edu\/ndstories\/wp-json\/wp\/v2\/posts\/140\/revisions"}],"predecessor-version":[{"id":154,"href":"https:\/\/sites.nd.edu\/ndstories\/wp-json\/wp\/v2\/posts\/140\/revisions\/154"}],"wp:attachment":[{"href":"https:\/\/sites.nd.edu\/ndstories\/wp-json\/wp\/v2\/media?parent=140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.nd.edu\/ndstories\/wp-json\/wp\/v2\/categories?post=140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.nd.edu\/ndstories\/wp-json\/wp\/v2\/tags?post=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Color](\"http:\/\/sites.nd.edu\/ndstories\/files\/2019\/04\/ColorContrast2-1024x477.png\")
<\/a>![\"Color](\"http:\/\/sites.nd.edu\/ndstories\/files\/2019\/04\/Color-Contrast1-1024x477.png\")
<\/a><\/p>\n