VCSU One Stop

701-845-7340
Login

Color Contrast Analyzer Tool

Modified on: Thu, Apr 3 2025 2:58 PM

How to use the Color Contrast Analyzer (CCA) tool from TPGi


Overview

  • Use TPGi's free color contrast checker to optimize your content - including text and visual elements.
  • Learn how to use CCA by watching this short training video by the GSA: Module 14 Color Contrast Analyzer


CCA tool tutorial

  1. Open the Color Contrast Analyzer tool from your desktop homepage (see the CCA tool desktop icon below). Note: If you do not have this tool downloaded, click this link to view download instructions. 
    The logo for Color Contrast Analyzer. The Letter "A" with a diagonal line on a blue background.
  2. When you open the application, it will look like this: 
    Colour Contrast Analyser tool showing a black foreground and white background with a contrast ratio of 21:1, passing all WCAG 2.1 contrast requirements.
  3. At this point, you can test the colors on your page by clicking on either the background color picker, or foreground color picker. 
    Color picker button, a black eyedropper icon on a light gray background.
  4. This will open the color picker magnifier to select the desired color to test. 
    The color picker magnifier for choosing colors. A black square centered within a gray circle on a faint grid.
  5. Select the foreground and background colors you wish to test. If the contrast ratio meets WCAG standards, the test results will show as passed under 'WCAG 2.1 results" 
    WCAG 2.1 results showing contrast ratios and passes for contrast guidelines.


Other features in Color Contrast Analyzer


Manual color sliders 

  • You have the choice to test any colors you prefer by using the color slider.
    User interface for adjusting RGB color values with sliders.


Color model selection 

  • You can change the preferred color model used in the tool to show the color type.
    Color Contrast Analyzer window with the color model selector open.


Switch colors

  • There is an easy way to flip the foreground color and background color for quicker testing.
    Screenshot of the Colour Contrast Analyser interface showing black as the foreground color and white as the background color, with a red arrow pointing to the switch colors button.
Was this answer helpful?