Module 12: Create the Required Color Contrast

[bright musical tones with gentle swoosh]

Voice Over (VO): Accessible Electronic Document Community of Practice, AED-COP.

[gentle swoosh]

VO: You are watching how to make an accessible document in Microsoft Word.

VO: This is Module 12, Create the Required Color Contrast. This video is one in a series, showing how to make a Word document, Section 508 Conformant.

VO: Introduction. A high level of contrast between foreground and background colors allows people to see and use your content more easily.

VO: Standard size text should have a contrast ratio greater than or equal to 4.5 to 1. Large size text, which is text that is at least 14 point and bolded, or 18 point and regular weight, must have a contrast ratio greater than or equal to 3 to 1.

VO: It is important to note that text that is incidental, overlaid on images or logo type, is excluded from this requirement.

VO: How to Author Accessibly? To author accessibly, create content with text or images of text that use color or shading with sufficient color contrast.

VO: Accessible and Inaccessible Examples. Let's look at some accessible and inaccessible examples.

VO: Displayed on the screen are five text boxes. Each of them have colored text displayed on top of a colored background.

VO: The color contrast of the text boxes increases as you move from one box to the next. The box on the left has the lowest contrast, and the box on the right has the greatest.

VO: The first box has a gold background with yellow text. The text is very hard to read, as there is a minimum contrast between the text and its background.

VO: This text box is not accessible, as the actual contrast ratio is only 1.41 to 1. The next box has a red background with yellow text.

VO: This one is a little easier to read, but it still only has a contrast ratio of 3.72 to 1, so it would not be considered accessible.

VO: The middle text box is considered accessible. The box is colored green, and it has dark green text.

VO: This example has a contrast ratio of 4.5 to 1, and is the minimum allowable. Continuing to the right, the next two text boxes are also accessible.

VO: One has a blue background with white text, which produces a 5.15 to 1 contrast ratio. The last box is colored black, and has white text.

VO: This color combination produces a 21 to 1 contrast ratio. To create accessible content, you do not have to use these exact color combinations in your document.

VO: You do, however, need to ensure the colors you choose meet or exceed the specified color contrast ratio for the font size being used.

VO: How to check your work To check your work, use the color contrast analyzer to ensure your content has the correct color contrast ratio.

VO: The analyzer is available for download from HTTPS, colon forward slash forward slash, www.pacielogroup.com, forward slash resources, forward slash contrast analyzer.

VO: The application can be executed without installing it to your computer. To use the contrast analyzer, first open the analyzer application, and select the eyedropper button in the foreground section.

VO: A box will appear displaying a magnified area of your screen. In the center of that magnified box is a crosshair.

VO: Now place the center of the crosshair on a pixel of text that accurately represents its color, and select that pixel by clicking your mouse.

VO: In this example, the text color we've chosen is white. Now go back to the analyzer application, and select the eyedropper button in the background section.

VO: Another box will appear displaying a magnified area of your screen. Again, place the center of the crosshair on a pixel of the background that accurately represents its color, and select that pixel by clicking your mouse.

VO: Our example here has a blue background. Now to see the actual contrast ratio results, look at the bottom of the contrast analyzer application window.

VO: In the result luminosity section, it displays the contrast ratio. In this case, it shows our example as having a 5.15 to 1 contrast ratio, since this is greater than our required 4.5 to 1 ratio for our font size, it passes and is considered accessible.

VO: If the contrast ratio does not pass, you should adjust either your foreground or background color and word and retest.

VO: Thank you for watching Module 12. You are encouraged to watch the other modules in this video series, and can find additional information at section 508.gov.

VO: This video is a product of the accessible electronic document community of practice, and the U.S. Department of Transportation.