Accessibility Tools Color Contrast Analyser The color Contrast Analyser is an accessibility tool that helps with determining the readability of text and visual elements for color contrast. Color contrast is the compatibility of two colors from opposite sides of the color spectrum and having strong contrast allows users with low-visibility or color deficiencies to tell the difference between text and visual elements. This guide will walk through the steps needed to setup this tool and begin using it. Download and Installation 1. Open an internet browser and navigate to the Color Contrast Analyser 1 website. 2. On the website, select the Download for Windows option. This takes you to a GitHub release web page. 3. Locate the latest release of CCA and download the CCA.exe file by selecting it. 4. Navigate to where the file was downloaded and open the executable file. Follow the prompts to install the Color Contrast Analyser tool on to the computer. 1 https://developer.paciellogroup.com/resources/contrastanalyser/ Revision Date: 3/5/2018 Page 1 of 5
Tool Usage: Tool Overview Navigate to the install location of the Color Contrast Analyser and launch the tool. KEYBOARD SHORTCUT: If this location is unknown, press the windows key on the keyboard and type in Colour. Select Colour Contrast Analyser to launch the tool. 1. Foreground Color of the Foreground element. This refers to text within the background 2. Background Color of the Background element. This houses the foreground element. 3. Text Indicates whether regular-sized text passes AA or AAA compliance. Shows the combination of Foreground and Background colors. 4. Large text Indicates whether large text passes AA or AAA compliance. Shows the combination of Foreground and Background colors. 5. Result - luminosity Detailed information of the color contrast. Provides all information from the boxes on the main page of the tool, and provides a contrast ratio. If the Show contrast result for color blindness check box is selected, the Result window changes to show the contrast ratio for each type of color blindness: Revision Date: 3/5/2018 Page 2 of 5
How to Enter a Foreground/Background Color The Foreground and Background colors can be entered in one of three ways through a color selection pane, through the dropper tool, or through hex code. Option One: Using the Color Selector The color selector provides a menu of pre-selected colors. Selecting any of the colors from the menu will set that color as the foreground or background. Further color options can be found by selecting the Others.. button and selecting Define Other Colors. Revision Date: 3/5/2018 Page 3 of 5
Option Two: Using the Dropper Tool The Dropper Tool allows a user to select a color from anywhere on their computer screen. When selecting the Dropper Tool, a zoomed-in box will replace the mouse cursor. Hovering the zoomed-in box over a color on the computer screen will change the color select and Hex Code to that color. To select the color, press the left mouse button. The size of the dropper tool can be changed by selecting the arrow next to the dropper tool. Increasing the pixel size allows for a larger selection field for the Dropper tool but may make it more difficult to lock onto a specific color if the zoomed image is highly pixelated with varying shades: Note that in the above picture comparison the small green check mark consists of four colors: light green, dark green, blue, and gray. Revision Date: 3/5/2018 Page 4 of 5
Option Three: Using Hex Code The Hex field can be filled with a colors hex code if it is known. Enter the code to the right of the pound sign and the associated color will appear in the Color Select window. Notes: Mac Version Differences for the Mac release: Different location for the Show contrast result for color blindness option. o Under Colour Deficiency. Uses the native Apple color selector. Revision Date: 3/5/2018 Page 5 of 5