How to Use the Color Contrast Analyzer (CCA)

Voice Over (VO): Hello and welcome to the video tutorial, How to Use the Color Contrast Analyzer.

VO: The first step for using the Color Contrast Analyzer, or CCA, is to go to the link immediately after this video to download the software, either for Windows or Mac.

VO: If you need help downloading the CCA, or if you're not sure if you're allowed to download it onto your device, contact your agency's IT professionals.

VO: Once you have downloaded the CCA, you can use it any time you need to check your work for color contrast.

VO: For this tutorial, I'm working on a PowerPoint slide on color usage in Section 508, and I'm going to use the CCA to make sure the colors that I'm using are conformant.

VO: When you open the CCA, you will notice that it has several sections: a space to enter a foreground color, or the main color of your content; a space to enter a background color, or the color behind your content; a sample preview that shows you how your text will look with those colors chosen; and a results section that shows you your color contrast ratio and which criteria it passes.

VO: These criteria are from WCAG, which is the Web Content Accessibility Guidelines. This is the same criteria used for Section 508 standards, so these results are very important in determining if our color contrast meets the Section 508 requirements.

VO: To check the colors in my sample document, I'm going to start with the slide title, which is dark blue text on a white background.

VO: But to use the CCA, I need the exact hex code of the colors I'm using. So I know the background is `FFF FFF`, which is just plain white.

VO: To get the color of my text, I'm going to act like I'm editing the text by highlighting it and then selecting More Colors.

VO: From here, I can go to Custom Colors, and in the hex field, I have the exact six-digit identification of the color I'm using for my text.

VO: So I copy that, close the little pop-up for picking the colors, then in the Color Contrast Analyzer I paste that hex code that I copied into the foreground color, because in this case foreground refers to my text color.

VO: Now that the foreground and background fields are set to the exact shades of dark blue and white that my document uses, the results section says that my color contrast ratio is `8.4 to 1` and that it passes all of the WCAG color contrast thresholds.

VO: That means I can use these colors for all of my regular text, all of my large text, and all of my graphics and user interface elements.

VO: This is not the only color combination in my presentation, so I will need to do these steps for all of the color combinations that I use on this slide.

VO: Before making this video, I made a list of all of the colors I used on this slide.

VO: There are parts of it that are dark green text on a light green background and other parts that are dark red text on a light red background.

VO: I made a list of the hex codes for all of those colors, so I'm going to start by copying the hex code for my dark green text and then pasting it into the foreground field in the Color Contrast Analyzer.

VO: Then I take the light green hex code that I used for my background for the green text and paste that into the Color Contrast Analyzer in the background field.

VO: Now my sample field shows dark green text on a light green background, and the results show that my color contrast ratio is `5.3 to 1`.

VO: It is a pass for all of the AA standards, and it fails at one AAA standard, which is fine for us because the Section 508 requirements only require AA, not AAA.

VO: So any part of my slide that uses this dark green and light green color combination meets the standard.

VO: For our first two checks, we used the exact hex codes and entered them into the fields. But what if you don't have access to the exact colors that your work uses and you need to check the color contrast?

VO: Luckily, the CCA has a color picker tool.

VO: Let's use the color picker to check our dark red text that's on a light red background.

VO: To do this, we're going to open the CCA, but keep the PowerPoint slide visible so that we are able to use the color picker on this slide.

VO: In CCA, the color picker is the button with the eyedrop icon, so I'm going to select that button for the foreground color and then use that to select the foreground color of my dark red text.

VO: When I do that, the foreground color listed in the CCA updates to match the shade of red that I used on my slide.

VO: We'll do the same thing to identify our background color. We'll select the color picker eyedrop button, hover it over the section of color that we need, which is the light red in the background of my slide, and then the hex code listed in the CCA for the background field updates to match the color I selected.

VO: According to the results section for this color combination, my color contrast ratio is `3.8 to 1`, which is a pass for large text and graphical objects, but it's a fail for regular text.

VO: So I'm going to need to change my regular text to something darker to contrast better against the light red background.

VO: How do I fix this? I can actually adjust these colors in CCA.

VO: I can go to the foreground field, drag the red slider to make it darker, and then in the results field, the results that said fail switch to pass.

VO: Now the new color combination I made by dragging the slider gives me a passing result for large text, graphical objects, and regular text with a ratio of `4.8 to 1`.

VO: It even gives me the new hex code for this darker red in the foreground field, so I can copy this new hex code and then use it to update the color in my document by editing the text, changing the color, selecting a custom color, and pasting that hex code that I got from CCA.

VO: Visually, this shade of red isn't much different from the previous shade we used, but it is higher contrast, which means it's more usable and more accessible for our slide.

VO: One last thing you can do in CCA is, in the results section, open the dropdown for the results to get more detailed descriptions of what counts as regular text, what counts as large text, and what counts as graphical objects.

VO: That way, you can make sure that all of your content meets all of the required thresholds for the Section 508 standards.