Contrast testing with Test Accelerator

Use the Contrast testing tool in the browser extension to test color contrast for text and interface elements. You can test contrast outside of manual evaluations or directly within a manual evaluation workflow.

On this page:

• Access Contrast testing
• Test contrast by selecting an element
• Adjust sampled pixels
• Test contrast by picking colors
• Open the Contrast testing tool inside manual evaluations
  • Add a finding from contrast test results

Access Contrast testing

To open the Contrast testing tool outside of a manual evaluation:

1. Open the browser extension.
2. From the main window, select Contrast testing tool. 

You can now choose between Test element mode and Pick colors mode.

Test contrast by selecting an element

Use Test element mode to test the contrast of an element directly on the page.

To test contrast by selecting an element:

1. Open the Contrast testing tool.
2. Click Select element.
3. Select the element you want to test on the page.
   
4. Select Test contrast.
5. Review the detected foreground and background colors.
6. If needed, adjust the sampled pixels to improve accuracy.

You can also select an element through Chrome DevTools by selecting a node in the DOM.

The extension uses machine learning to identify the dominant colors within the selected element and calculate the contrast ratio.

After the test completes, the extension displays:

• The detected colors.
• The contrast ratio.
• The applicable criteria.
• Whether each criterion passes or fails.

Adjust sampled pixels

If the extension does not detect the correct colors, you can adjust the sampled pixels manually.

To adjust sampled pixels:

1. Click Edit sample.
   
2. Focus the selected pixel.
3. Use the keyboard to move the selected pixel.

Use the following keyboard controls:

• Press an arrow key to move the selected pixel by 1 pixel.
• Press Shift + arrow key to move the selected pixel by 10 pixels.
• Press Enter or Spacebar to open or close the zoomed view.

You can also select the pixels by clicking and dragging/dropping the color dot.

Test contrast by picking colors

Use Pick colors mode to test contrast between any two colors on the screen.

To test contrast by picking colors:

1. Open the Contrast testing tool.
2. Select Pick colors.
3. Select the foreground color anywhere on the screen.
4. Select the background color anywhere on the screen.
5. Select Test contrast.

After the test completes, the extension displays:

• The selected colors
• The contrast ratio
• The applicable criteria
• Whether each criterion passes or fails

Open the Contrast testing tool inside manual evaluations

Inside manual evaluations, the workflow for Test element mode and Pick colors mode is the same.

To use the Contrast testing tool inside a manual evaluation:

1. Open the manual evaluation.
2. Open the Contrast testing tool.
3. Choose either Test element or Pick colors.
4. Complete the contrast test.

After the results are calculated, the extension displays the results inside the browser extension window and as an overlay on top of the tested page.

Add a finding from contrast test results

After you complete a contrast test inside a manual evaluation, you can create a finding directly from the test results.

To add a finding:

1. Complete a contrast test.
2. Select Add finding.
3. Review the suggested manual rules related to contrast.
4. Select the rule you want to use.

You can also search for another rule by ID or rule name.

After you select a rule:

• The extension automatically adds the contrast test results to the Actual results field
• The extension captures a screenshot automatically
• The screenshot includes the contrast results overlay
• The offending element is highlighted in the screenshot