Color Contrast: A Brief Introduction Accessibility Video Tutorials Katie Allen Center on Victimization and Safety Vera Institute of Justice October 31, 2019 This project was supported by Grant No. 2016-TA-AX-K068 awarded by the Office on Violence Against Women, U.S. Department of Justice. The opinions, findings, conclusions, and recommendations expressed in this program are those of the authors and do not necessarily reflect the views of the Department of Justice, Office on Violence Against Women. What we will cover in this video In this video, we will discuss & demonstrate: What is color contrast and why does it matter? What are the Web Content Accessibility Guidelines for using color and for color contrast? How can tell if color contrast is accessible using Microsoft Office and the WebAIM Color Contrast Checker Tool? What is Color Contrast? • Colors are not inherently “inaccessible” or “accessible”, on their own. What matters for accessible color contrast is the combination of foreground and background colors together. • Color Contrast is the difference in hue between colors that are used together. 1. This is an example of high color contrast. 2. This is an example of low color contrast. •low color contrast • The first example shows colors that are most different from each other. The second example shows colors that are very similar to each other. • Higher color contrast = more accessible What are the Web Content Accessibility Guidelines? WCAGs for Color Contrast Web Content Accessibility Guidelines for Color Contrast • The color of text and the color of the background should have a contrast ratio of at least 4.5:1 for “Regular Text”. Regular text is size 14 point. • For ”Large Text”, which is 18 point or larger, the contrast ratio should be 3:1. • For graphics and images, color contrast should also have a ratio of 3:1 with its background. • These are the WCAG AA standards. How can I check for color contrast? Using Microsoft PowerPoint and the WebAIM Color Contrast Checker Tool Step 1: Find the Hex Number Screen shot of the text color drop-down menu in PowerPoint, showing the list of theme colors. the last option in the menu is "More Colors" and The PowerPoint "more colors" menu pop-up box with the RGB sliders, showing the color hex number and the degree of red, green, and blue of the color. 7 Step 2: Use the WebAIM Color Contrast Checker Tool screen shot of the Web AIM color contrast checker tool, showing the foreground color (2730A0) which is purple, and the background color, (FFFFFF) which is white. 8 Results of from the WebAIM Color Contrast Checker Tool Extended screen shot of the Web AIM color contrast checker that shows that the color (2730A0) passed the accessble check. the purple color is accessible on the white background. • This color contrast is accessible! • It passed the AA and AAA Web Content Accessibility Guidelines criteria. Inaccessible Color Contrast example of a failed, low, inaccessible color contrast result in the Web AIM Color Contrast checker tool 10 Remember! Higher Ratio = More accessible color contrast 10.41:1 is higher than 2.7:1. It is more accessible. Using Tools in Microsoft Office Microsoft Office Accessibility Checker Tool Microsoft Office Accessibility Checker Tool Tools Menu drop-down option "Check Accessibility. • This tool will not resolve the contrast issue for you, but it offers h elpful information. • You can find the Accessibility Checker in the Tools menu: “Check Accessibility” Accessibility Checker Results •The results of thisAccess Check arewarning us that wehave inaccessiblecontrast. •It tells us where thisoccurs in thepresentation (onslide 2). Accessibility Checker Results: Warning: Hard to read Text contrast in content placeholder 2 on slide 2 To Recap: Color Contrast •Color is not inherently inaccessible, but we can choose to usecolor accessibly or inaccessibly. •High color contrast is more accessible than low color contrast. •You can find Hex numbersin Microsoft Word, Outlook, and PowerPoint, Adobe, and more. •You can use the Microsoft Office Accessibility Checker tool tofind inaccessible color contrast in your document. You can use Hex numbers and the WebAIM Color Contrast • Checker Tool to determine color contrast. •You can reference theWeb Content Accessibility Guidelinesto learn more about how to use color accessibly. Thank you! For more information and videos about accessible content, visit: www.endabusepwd.org Ending abuse of people with disabilities is a team effort. Contact us for support: End Abuse Email Address: cvs@vera.org End Abuse Phone Number: (212) 376-3096 End Abuse Toll Free Phone Number: (855) 274-8222