Introduction

One of the most common Accessibility issues on Virginia Tech's Ensemble pages is Color Contrast. This guide will walk you though how to use the axe DevTools browser extension to scan your pages for Color Contrast issues, and then how to fix those issues in the Ensemble editor.

Video Guide

Written Guide

Instructions

Before You Start:
If you don't already have the axe Devtools Browser Extension installed, please go look at our axe Devtools installation video guide.

Section 1 - Scanning Your Ensemble Pages

Step 1 - Navigate to a Page

Navigate to a LIVE version of the Ensemble page that you want to scan (NOT the version of the page within the Ensemble Editor).

**Note: This guide covers how you should approach working through color contrast issues when you are fixing mistakes that have already been made. If you are creating content in Ensemble that isn't yet published, and you are being proactive in testing for acceptable color contrast, then you can use the CCA tool and/or axe Devtools to check your unpublished pages. There are detailed instructions on how to do this later in this guide.**

Step 2 - Open the axe Devtools Browser Extension

Right-click anywhere on the main body of your live webpage and select Inspect from the pop-up menu to open the Browser Developer Tools window.

Find and open the axe Devtools Browser Extension from the toolbar(1). The extension may be hidden under the More tabs button(2). Click the axe Devtools Extension(3).

Step 3 - Run a Scan

Once the axe Devtools Browser Extension window opens, click the Full Page Scan option to run a scan on your page.

Step 4 - Review Scan Results

When the full page scan is done, you will see a results window. It will contain with a summary of the issues found, ranked by severity. In the pane beside or below the summary (depending on screen size), you will see groups for each type of issue found. 

Step 5 - Select Color Contrast Issues, and Locate them on Your Page.

• Click on the issue group labelled Elements must meet minimum color contrast ratio thresholds(1). The group will expand, showing you details for each of the color contrast issues. (There is a lot of information in these issue summaries, showing locations, code snippets, and technical instructions for remediation that you may explore on your own if you wish.)
• You can scroll through each individual issue using the arrows(2). 
• For each issue, click the Highlight(3) button - this will scroll to the area on your page where that particular issue is located, and highlight it for you (4). You will use this information to fix each color contrast issue in the Ensemble editor.

Section 2 - Fixing Color Contrast Issues in the Ensemble Editor

Step 1 - Open Your Page in the Ensemble Editor

In the Ensemble editor, navigate to the Ensemble page that you want to remediate, select it and click Edit.

Step 2 - Locate the Color Contrast Issue

Using the location that you determined by using the Highlight feature of the axe Devtools scan results page, navigate to the color contrast issue you want to fix. Almost all of the color contrast issues that you'll be dealing with in Ensemble will have had a color changed within a container, so when you locate the issue, click on the Container Component(1) and select Configure(2) (the wrench icon).

Step 3 - Adust Color Contrast to Fix the Issue

The Container Configuration Window will open. Click on the Common CSS Properties(1) tab. You'll see the Color(2) textbox (which determines the color of the text), and the Background-color(3) textbox (which determines the color of the background). One or both of these will have had a custom color inserted by a user (seen below entered as the HEX colors '#ffffff' and '#E87722'), making the color contrast inaccessible. 

The simplest method for fixing these color contrast issues is to remove the custom colors by deleting the hex color values from both the Color and the Background-color text boxes. This will reset the container background to white, and the text to black. This may not be what you want to do if you want to retain some style and color on your webpage.

If you want to make these colors something other than black or white, you'll have to make sure that the color(s) you pick have acceptable contrast with one another. This can be tricky and time-consuming if you're not used to doing it, and you can save a lot of trial and error by utilizing the Colour Contrast Analyser (CCA) tool. Download the CCA tool here, and then view this instructional video on how to use the tool. The CCA tool will let you choose your foreground (text) color and background color, will analyze for color contrast, and will tell you whether the selected colors are accessible to the standard of WCAG 2.1. It will also give you the color values (in HEX, RGB, etc.), as well as a color slider. This is extremely helpful as it will let you adjust the color to something accessible manually, and then give you the value for that color that you can copy and paste into the relevant text box in the Configuration Window.

The other option is to pick alternate colors yourself. We suggest utilizing the Virginia Tech Color Guide. The Color Guide page contains the official Virginia Tech brand colors; both the primary and secondary palettes, as well as swatches and color value information for each individual color. Choose a color for your text or background color (using the CCA tool to double-check acceptable color contrast if necessary), then take the color value for that color and copy and paste it into the relevant text box. In the example shown below, we are using Chicago Maroon (HEX value #861F41) as our background color. We will copy that HEX value from the Color Guide page (1), then paste it into the Background-color text box (2) and click the Check icon (3) to verify your changes.

**Note: If you would like to see a few color combinations using the Virginia Tech colors that have acceptable color contrast, visit our Accessible Color Combinations page.**

Once you click the Check icon, the Container Configuration Window will close, and you should see your updated colors!

Step 4 - Double-Check Color Contrast and Publish

Once you've fixed a color contrast issue, double check that your fix is accessible. Check by using the Colour Contrast Analyser (CCA) tool (the quickest method), or by opening the Page Information window (1) in the Ensemble editor, selecting View as Published (2), then running another axe Devtools full page scan on the page that opens (not the preferred method, this is a long and tedious way to check for color contrast changes while editing).

When you've verified that your all of your changes have acceptable color contrast, you may re-publish your page by opening the Page Information window (1) and selecting Publish Page (2).

Repeat this process for all the color contrast issues on the Ensemble pages you are tasked with remediating.