Colour Contrast Analyser (CCA)
Summary
Section titled “Summary”The Colour Contrast Analyser (CCA) checks the contrast between colors and provides pass or fail results based on the Web Content Accessibility Guidelines (WCAG) contrast standards. It can check contrast in websites, desktop applications, and documents. It also includes tools that simulate the most common types of color blindness. Using CCA helps to support people with low vision and color blindness. It also bolsters cognitive accessibility, particularly for those with reading-related learning disabilities.
Good color contrast isn’t just beneficial for color blind and low vision individuals; it enhances readability, minimizes eye strain, and refines clarity and separation among webpage or document elements, catering to users of all abilities. Ensuring optimal contrast and distinct visual elements fosters a more comfortable and visually appealing design.
Overview
Section titled “Overview”The Colour Contrast Analyser (CCA), developed by The Paciello Group (TPGi), provides the following functionality:
- Checks the contrast of any two colors and provides pass/fail feedback.
- Makes color suggestions that can improve contrast.
- Offers methods for adjusting colors to improve contrast.
- Shows what the selected colors look like for regular and large text.
- Shows what the selected colors look like when color blindness filters are applied.
- Shows what a selected portion of the computer display looks like with color blindness or cataract filters applied.
Accessibility testers can use this tool regardless of their level of expertise. It has a few distinct advantages over most other contrast-checking tools.
- CCA is one of the few desktop-based accessibility test tools available. Being a desktop tool means CCA can sample colors anywhere on the desktop - in websites, desktop applications, documents, and images. Few other tools provide this functionality.
- CCA uses eyedroppers to sample colors, which makes it easier to use than other contrast checkers that require manual entry of values for each color. The eyedroppers also make it easy to check contrast for text placed over an image, background image, gradient, or text that is part of an image.
- CCA includes color blindness and cataract simulators in addition to the contrast-checking functionality, making it more versatile than tools that only check contrast.
- CCA is available for Windows or Mac operating systems.
One drawback to CCA is that you must know the size of the text. Most automated accessibility test tools (browser extensions) can automatically detect text size, but CCA does not include that functionality.
CCA is accessible to people with disabilities, although some functions will not be usable for blind testers. For example, Blind individuals can’t use the eyedropper to select colors; they must enter numerical values of colors.
Who is Helped
Section titled “Who is Helped”Using the Colour Contrast Analyser with a website or document can result in better color choices for people with color blindness and low vision.
Color-blind individuals depend on good contrast to distinguish between colors. Without good contrast, the difference in hue is not enough for them to perceive the difference between some colors.
The figure 1 below shows the impact of three types of color blindness on how people perceive color:
- Protanopia is the inability to distinguish between red and green caused by missing red cones in the eye’s retina. These cones detect red light.
- Deuteranopia is the inability to distinguish between red and green caused by missing green cones in the eye’s retina. These cones detect green light.
- Tritanopia is the inability to distinguish between blue and green and between yellow and pink caused by missing blue cones in the eye’s retina. These cones detect blue light.
See Color Blindness (Ta11y) for more information on how color blindness impacts the perception of color.
Good color contrast also benefits individuals with low or limited vision, as differences between low-contrast colors can be difficult to perceive. This benefit also applies to older individuals who may no longer perceive color differences accurately.
See Font Choices for more information on other issues that impact readability.
General Guidance
Section titled “General Guidance”The Colour Contrast Analyser checks the contrast level of any two colors and provides pass/fail feedback based on the Web Content Accessibility Guidelines (WCAG) contrast standards. These standards define the contrast level needed to ensure people can see the difference between two colors.
WCAG level AA standards (minimum color contrast):
- Contrast ratio of 4.5:1 for regular text (less than 18pt normal or 14pt bold)
- Contrast ratio of 3:1 for large text (18pt normal or 14pt bold or larger)
- Contrast ratio of 3:1 for non-text elements that convey information or have meaning, such as icons, buttons, form input borders, and other similar visual cues (affordances).
WCAG level AAA standards (enhanced color contrast):
- Contrast ratio of 7:1 for regular text
- Contrast ratio of 4.5:1 for large text
- Contrast ratio of 3:1 for non-text elements that convey information or have meaning.
See Text Contrast and Non-text Contrast for more information on contrast requirements.
The CCA provides various methods for selecting and adjusting colors. This functionality makes it easy to choose colors with precision and to find colors with sufficient contrast if the original colors fail testing.
CCA also functions as a color blindness simulator. You can view either the selected text and background colors or a portion of the computer display through color blindness filters. Although no WCAG test criteria are associated with color blindness simulations, they provide greater insight and clarity for making the best color choices. Simulators provide impactful feedback about why the WCAG color contrast criteria matter by showing how people with color blindness are affected when these criteria are unmet.
Interface Options
Section titled “Interface Options”The initial interface panel of the Colour Contrast Analyser consists of the following:
Top Menu Bar
Section titled “Top Menu Bar”The CCA menu bar has three tabs:
Options Menu
Section titled “Options Menu”Select “Options” from the top menu bar to:
- Keep on top - Keeps the CCA window on top of other windows.
- Font - Select a different font. Opens a popup window with a selection of fonts, font styles, and font sizes.
- Show contrast results for colour blindness - Displays the test results with the selected colors as they appear for three types of color blindness (Protanopia, Deuteranopia, and Tritanopia). To be covered in depth later.
- Show Colour Sliders - Select either RGB (Red, Green, Blue) or HSV (Hue, Saturation, Value) color sliders to display or both. The color sliders are covered in depth later. Newer versions of CCA also include an HSL (Hue, Saturation, Lightness) color slider.
- Language - Select another language from a limited list of languages.
Image Menu
Section titled “Image Menu”Select “Image” from the top menu bar to use the CCA color blindness and low vision simulators with:
- a selected window
- an image
- a selected portion of the current computer screen
All three simulation options work with simulation filters for three types of color blindness (Protanopia, Deuteranopia, and Tritanopia), Grayscale, Color Inversion, and Cataracts. See Simulation Options later in this topic for more information on using the simulators.
Help Menu
Section titled “Help Menu”Select “Help” from the top menu bar to get the following information:
- Help - Links to the TPGi web page to download the CCA.
- About - Provides version number and contact information for the CCA.
Colour Select Section
Section titled “Colour Select Section”The “Colour Select” section displays the two selected colors, the foreground and background colors. The foreground color is typically the color of the text or a meaningful non-text element.
There are three methods of entering specific colors to precisely match the colors in the website, desktop application, document, or image you are testing.
Method 1: Use the Eyedroppers
Section titled “Method 1: Use the Eyedroppers”Color tools commonly use eyedroppers to sample or select colors from images, websites, or other digital content. The eyedropper icon represents this function, as it picks up, or samples, a color from one location and deposits it in another, much like a real eyedropper picks up a liquid from one location and deposits it in another.
Using the CCA eyedroppers to select the foreground and background colors is usually the easiest method. It may be the only method of testing colors in an image. Examples of this can include checking contrast for:
- Text that is over an image, background image, or gradient.
- Text that is part of an image or background image.
- Any objects in an image or background image that convey information.
To select a color with the eyedropper:
- Select the eyedropper icon.
- You can use the mouse or the keyboard to move the eyedropper over any part of the computer display and select colors directly from the tested product.
- The eyedropper’s default sampling size is a 1-pixel square. To change the sample size, select the arrow next to the eyedropper to open a dropdown menu where sizes up to an 8-pixel square can be selected for sampling.
Method 2: Manually Enter Hex Values
Section titled “Method 2: Manually Enter Hex Values”- Enter the Hex values for specific colors manually. Developers commonly use hex notation (short for hexadecimal) to identify colors when coding web pages.
- You can find hex color values by looking in the code or the documentation for websites or software applications.
Method 3: Manually Enter RGB or HSV Values
Section titled “Method 3: Manually Enter RGB or HSV Values”- Click on “Options” in the top menu bar and select “Show Colour Sliders” to display RGB, HSV, or both color sliders.
- You can manually enter either RGB or HSV values for specific colors.
- Newer versions of CCA also include an HSL color slider and a slider to adjust the foreground color’s alpha channel (transparency).
You can find hex, RGB, HSV, or HSL color values in the code or documentation of websites and software applications, and custom color popup windows for most document applications, such as MS Word or PowerPoint.
Additional methods are available to select general colors from a palette or to adjust the selected colors to improve color contrast. The numbers in the figure below correspond to the three main color selection and adjustment methods:
- Basic Color Palette
- Suggested Colors Palette
- Extended Color Picker
- Basic Color Palette - Use the basic color palette to select a color to test.
- Click on the “Colour Select” box to select a color from the basic color palette.
- Suggested Colors Palette - Use the smaller “suggested colors” palette located directly below the basic color palette to improve the contrast ratio.
- Click on the “Colour Select” box to select a color from the suggested lighter and darker values of the currently selected color presented in the “suggested colors” palette.
- The top row starts with the original color and then adds white to create four lighter tints of the color, containing 25%, 50%, 75%, and 90% white. The bottom row adds black to create five darker shades of the original color, containing 15%, 25%, 50%, 75%, and 90% black.
- Extended Color Picker - Use the extended color picker to select or adjust any color.
- Click on the “Colour Select” box, then select “Others” to open the basic color palette in a new popup window.
- Select “Define Custom Colors” in the popup window to open the extended color picker.
- Select a color using the color field and slider or manually enter color values using RGB (Red, Green, Blue) or HSL (Hue, Saturation, Lightness) values.
Result - Luminosity Section
Section titled “Result - Luminosity Section”The “Result - Luminosity” section shows the test results for the two selected colors.
The left side of the Results display provides visual pass (green checkmark) and fail (red X) indicators for text and large text at the WCAG AA and AAA levels. The visual display shows the selected colors for both text sizes. Passing the AA standard is the minimum required contrast level, and passing the AAA standard is even better.
The right side of the Results display provides the same pass/fail information as plain text. It also provides the Hex values for the two colors and their exact contrast ratio. As an example, the two colors used in the figure above have a contrast ratio of 3.4 to 1 and pass the AA level for large text but fail all other checks.
The “Copy Results” button below this area copies the test results to the clipboard so that you can paste the information into a test report, ticketing system, or any other method used to track test results for a product.
The last option in the Results section is to show the contrast results for color blindness. Poor color contrast can make it impossible for people with color blindness to detect the difference between two colors. To see this, select either the checkbox to “Show contrast result for color blindness” at the bottom of the interface or select “Options” from the top menu bar and then select “Show contrast results for color blindness.”
This basic color blindness simulator displays text and identifies the contrast ratio based on the two selected colors for normal color and three types of color blindness.
The figure 15 above uses red and green colors with very low contrast to illustrate the impact of color blindness. The selected colors and contrast ratio are shown for normal color and with protanopia, deuteranopia, and tritanopia color blindness filters applied. The two low-contrast colors used in this illustration are nearly unreadable, with all four contrast ratios falling below the 3 to 1 WCAG minimum requirement:
- Normal color: 2.2 to 1
- Protanopia: 3.1 to 1
- Deuteranopia: 1.3 to 1
- Tritanopia: 2 to 1
The “Copy Results” button copies the test results for color blindness to the clipboard so you can paste the information into a test report, ticketing system, or any other method for tracking product test results.
CCA version 3.5.1 includes results for all types of color blindness when “Colour Blindness Simulator” is selected:
- Protanopia/Protanomaly: Missing/malfunctioning red cones
- Deuteranopia/Deuteranomaly: Missing/malfunctioning green cones
- Tritanopia/Tritanomaly: Missing/malfunctioning blue cones
- Achromatopsia/Achromatomaly: All cones missing/More than one set of cones missing or malfunctioning (also known as Monochromacy)
Seeing the difference in color for the different types of color blindness can provide useful insights into final decisions about the colors used in a product. Although not required, increasing the contrast if it falls below the WCAG AA levels in the color blindness contrast results is a best practice.
See Color Blindness (Ta11y) for more information on color blindness.
Simulation Options
Section titled “Simulation Options”The simulation options allow you to view a selected window, image, or part of the computer screen through a color blindness, cataract, or inverted color simulator. Select “Image” from the top menu bar to choose one of the simulation options. These options are not available in CCA version 3.
- Window
- Opens a popup window that allows the selection of the desktop or any open window (such as a document or website) from a generated list for viewing with the simulator.
- Image
- Opens a popup window that allows the selection of an image file for viewing with the simulator.
- Screen
- Opens a popup window that allows the selection of any part of the computer screen for viewing with the simulator.
All three simulation options allow the selection of the following simulation filters:
- Protanopia
- Deuteranopia
- Tritanopia
- Grayscale (removes all color to simulate total color blindness)
- Invert (displays colors using their opposite value on the color wheel and their opposite value of lightness)
- Cataracts (blurs the display to simulate limited vision with cataracts)
When using the “Screen” option to view a selected portion of the computer display, a “Parallel View” option is also available that simultaneously shows five filters (does not include the invert filter) and the normal screen view. This option is helpful for accessibility testers as it provides a comprehensive view showing how color choices impact individuals who are color blind or have vision deficiencies, such as cataracts, that they can share with designers, development teams, or other stakeholders.
Test Procedures
Section titled “Test Procedures”All test procedures are for CCA version 2.5 for Windows. Other versions of CCA are similar enough to use these procedures as guidelines, although options may be in different locations.
Install & Run
Section titled “Install & Run”- Download the Colour Contrast Analyser (TPGi)
- Download the current version of CCA Electron (Windows and Mac)
- Download previous versions of CCA Classic for Windows (this article uses CCA Classic version 2.5)
- Download previous versions of CCA Classic for Mac
- Select the executable (.exe) file to download CCA. If prompted, select “yes” to allow the download. For Mac versions of CCA, first download and unzip the application file.
- Select your preferred language from the available list when prompted.
- Select “Install” when prompted to begin the installation.
- Select “Finish” when prompted to complete the installation.
- To run the Colour Contrast Analyser:
- Select the CCA shortcut icon on your desktop OR
- Select the Windows key or the Search Windows icon in the taskbar, then type “Colour” in the Windows Search box. With the Colour Contrast Analyser selected, press Enter.
- The Colour Contrast Analyser icon should display in the taskbar, and the Colour Contrast Analyser window should open on your screen. Note that some versions of CCA are visually different from others, especially the new Electron version.
Check Color Contrast for Specific Colors
Section titled “Check Color Contrast for Specific Colors”- You can use the eyedroppers to test the foreground and background colors from a specific website, document, image, or other digital content.
- Select the eyedropper to open a small popup window with an enlarged view of the screen beneath it. A small box in the popup window’s center identifies the area used to sample a color.
Figure 17: Color Selection with the Eyedropper - The default size for the eyedropper sampling area is a 1-pixel square. Select the arrow icon next to the eyedropper to open a dropdown menu, and select any sampling size up to an 8-pixel square.
Figure 18:Selecting the Eyedropper Sampling Size - You can use the mouse or the arrow keys to move the popup window to select a color. Due to the anti-aliasing that occurs when the screen display is enlarged, you may find it challenging to select the exact value (the darkest or lightest value) of a color needed for testing using the mouse. Use the keyboard to move the eyedropper one pixel at a time to select an exact color easily.
Figure 19: Sampling Aliased Text
- Select the eyedropper to open a small popup window with an enlarged view of the screen beneath it. A small box in the popup window’s center identifies the area used to sample a color.
- You can enter colors manually by typing in the Hex, RGB, or HSV values for a color (the RGB and HSV sliders must be open to enter these values) in the corresponding input fields. HSL sliders are also available in CCA version 3. The following figure shows all three types of color values, but only one is needed.
Figure 20: Input Fields for Manual Entry of Hex, RGB, or HSV Color Values - CCA shows the following results after two colors are selected:
- The hex code values for the two colors
- The color contrast ratio of the two colors
- Pass/Fail test results for the two colors
- Colors must “Pass” at level AA, although the AAA level is better.
- Text colors must pass at level AA for the appropriate text size, regular or large. Testers must know the size of the text, as CCA does not capture this information.
- Large text is 18pt regular or 14pt bold or larger.
- Regular text is smaller than 18pt normal or 14pt bold.
- For non-text elements, colors must pass at level AA for large text.
Figure 21: Contrast Test Results Pass for Large Text Level AA - Text colors must pass at level AA for the appropriate text size, regular or large. Testers must know the size of the text, as CCA does not capture this information.
- Use the “Copy Results” button below the test results area to copy the test results to the clipboard. You can then paste them into a test report, ticketing system, or any other method used to track test results for a product.
Adjust Colors to Improve Contrast
Section titled “Adjust Colors to Improve Contrast”The CCA provides several methods of finding new colors with sufficient contrast if the original colors fail testing. In most circumstances, the new colors should be as close as possible to the previous ones to maintain the product’s design. The three methods described below allow the original hue of the colors to be maintained while adjusting the lightness, or luminosity, of the colors. Luminosity is a key factor in determining good contrast, so changing the lightness or darkness of the colors improves their contrast. The three methods are ordered from simplest to most complex.
Although this is not always true, it is usually easier to adjust the foreground text color than the background color. If a designer or design team is available, you should consult them about changing the color.
Method 1: Use the “Suggested Colors” palette
Section titled “Method 1: Use the “Suggested Colors” palette”The “suggested colors” palette provides the easiest method of finding a color with better contrast when the original colors in a product fail the contrast test.
- Click on the “Colour Select” box to select a color from the suggested lighter and darker values of the currently selected color presented in the “suggested colors” palette. The “suggested colors” palette is located directly below the basic color palette and contains ten colors.
- The top row of the “suggested colors” palette starts with the original color in the top left corner.
- White is added to the remaining four colors in the top row to create four lighter tints of the original color, containing 25%, 50%, 75%, and 90% white.
- The bottom row adds black to create five darker shades of the original color, containing 15%, 25%, 50%, 75%, and 90% black.
- Select colors that are one step darker or lighter as needed until you achieve the desired contrast level.
Method 2: Use the Colour Sliders
Section titled “Method 2: Use the Colour Sliders”The colour sliders provide a finer granularity than the “suggested colors” palette when selecting a new color.
- Select “Options” from the top menu bar to show the colour sliders.
- Select the HSV or HSL (if available) color slider for ease of use when adjusting color contrast. Note that the RGB (Red, Green, Blue) sliders are less helpful for this adjustment.
- CCA version 3 also provides the option to adjust the foreground color’s alpha channel (transparency).
- A color’s “Value” or “Lightness” is the most important factor in determining contrast. This slider adds more or less white or black to the original color to achieve a darker or lighter color. Start by making small adjustments to the darkness or lightness of the color to improve the contrast between the two colors.
- The “Saturation” may also need to be adjusted slightly to achieve the best contrast. The “Saturation” slider adds or removes gray from the original color. Be careful not to change this value significantly, or the resulting color will have a very different look and feel from the original color.
- When colors fail the contrast test, the new color usually needs to be as close as possible to the old color. For this reason, the “hue” of the color generally should not be adjusted when trying to improve the contrast.
Method 3: Use the Extended Color Picker
Section titled “Method 3: Use the Extended Color Picker”Use the extended color picker to select or adjust any color.
- Click on the “Colour Select” box.
- Select “Others” to open the basic color palette in a new popup window.
- Select “Define Custom Colors” in the popup window to open the extended color picker to the right of the basic palette.
- Select a color using the color field and the slider.
- Start by selecting a color close to the desired color in the color field or enter the values for the original color for a precise starting point. The crosshairs identify the current color in the color field.
- The slider changes the luminosity, or lightness, of a color and is the most important factor in determining contrast. This slider adds more or less white or black to the original color to achieve a darker or lighter color. Start by making small adjustments to the darkness or lightness of the color to improve the contrast between the two colors.
- Moving the cursor vertically in the color field changes the saturation. Saturation adds or removes gray from the original color, so be careful not to change this value significantly, or the resulting color will have a very different look and feel from the original color.
- Moving the cursor horizontally in the color field changes the hue. When colors fail the contrast test, the new color usually needs to be as close as possible to the old color. For this reason, the “hue” generally should not be adjusted when trying to improve the contrast.
- Select the “Add to Custom Colors” button when you find the desired color. The color will appear in the next available custom color box.
- Select the “OK” button to use the new color in the contrast analyzer.
Check Text Contrast with Color Blindness Simulators
Section titled “Check Text Contrast with Color Blindness Simulators”- The Colour Contrast Analyser provides a view of the two selected colors for three types of color blindness: Protanopia, Deuteranopia, and Tritanopia.
- Check the box at the bottom of the display to “Show contrast results for color blindness” to see this, or use the “Options” tab in the top menu bar to select the “Show contrast results for color blindness” option.
- The contrast ratio is identified for the normal view of the colors and with Protanopia, Deuteranopia, and Tritanopia filters applied. As shown in the figure below, the two colors may look very different for people who are color blind, but good color contrast means these individuals can still distinguish the text from the background. The text can sometimes be difficult or even impossible to read with low contrast.
- Use the “Copy Results” button below the test results area to copy the contrast results for color blindness to the clipboard. You can then paste the test results into a test report, ticketing system, or any other method used to track test results for a product.
View Content with Simulators
Section titled “View Content with Simulators”The “Images” tab lets you select from three options to view an image or a part of the computer display through a simulator.
- Select Window (List) - Allows selection of a window from the generated list
- Select Image File - Allows selection of an image
- Screen - Allows selection of a portion of the screen
All three options allow the selection of the following simulation filters:
- Protanopia
- Deuteranopia
- Tritanopia
- Grayscale
- Invert
- Cataracts
Option 1: Select Window (List)
Section titled “Option 1: Select Window (List)”- Select “Image” from the top menu bar and then choose “Select Window (List).”
- This opens a popup window that allows you to select the desktop or any open window (such as a document or website) for viewing with the simulator.
- Select the desired window from the “Select window” list.
- Select the desired filter from the “Simulation” dropdown list and then select “Preview” to apply the filter.
- Resize the popup window as desired.
- Use the “Save” button to save the preview results as an image in a test report.
Option 2: Select Image File
Section titled “Option 2: Select Image File”- Select “Image” from the top menu bar and then choose “Select Image File.”
- This opens a popup window that allows the selection of an image file for viewing with the simulator.
- Select the “Browse” button, navigate to the desired image file, and select the file to open the image in CCA.
- Select the desired filter from the “Simulation” dropdown list and then select “Preview” to apply the filter.
- You can use the “Save” button to save the preview results as an image in a test report.
Option 3: Screen
Section titled “Option 3: Screen”- Select “Image” from the top menu bar and then choose “Screen.”
- This opens a popup window that allows you to select any part of the computer screen to view with the simulator.
- Position and size the window over any portion of the screen.
- Select the desired filter from the “Simulation” dropdown list or select “Parallel View” to see the results for five filters (does not include the invert filter) in one window, together with the normal view of the screen.
- You can’t save the “Screen” option views directly with CCA.
The figure 29 above shows a portion of the Ta11y home page with dark green text over a light mint green background with an 8.6 to 1 contrast ratio when seen with normal color. Other parts of the page have gray and white backgrounds. There is also an image of two people on a sidewalk in front of trees with yellow-green leaves and a red brick building. One person in a wheelchair is wearing a blue shirt and black pants, and the other person walking with a cane is wearing a lavender shirt and black pants.
Each of the five filters applied to the screenshot changes it in some way.
- Protanopia - The green background changed to a light gray, and the text to dark gray. The image is almost entirely shades of yellow, green, and gray, except for the areas of black and white. Other aspects of the screenshot are unchanged. The text is still readable, and you can still understand the image.
- Deuteranopia - The green background changed to light lavender-gray, and the text to dark gray. The image is almost entirely shades of yellow, green, and gray, except for the areas of black and white (nearly the same as the Protanopia filter). Other aspects of the screenshot are unchanged. The text is still readable, and the image can still be understood.
- Tritanopia - The green background area is changed to a light blue. The image is almost entirely shades of pink except for the areas of black and white and the blue shirt, which remains blue. Other aspects of the screenshot are unchanged. The text is still readable, and the image can still be understood.
- Cataracts - Colors are unchanged with this filter, but the screenshot is blurred. The text is unreadable, and the details in the image are somewhat difficult to understand.
- Grayscale - The entire screenshot is shades of gray, black, or white. All parts of the screenshot are still understandable.
The essential takeaway from using the simulators is to determine:
- Is the text still readable?
- The answer to this question is usually “yes” if the text and background colors have good contrast.
- See Text Contrast for more information on this topic.
- Is the non-text visual content that conveys information, such as icons and buttons, still understandable?
- The answer to this question is usually “yes” if the content and background colors have good contrast.
- See Non-text Contrast for more information on this topic.
- Are images that convey content still understandable?
- The answer to this question is subjective unless the image contains text.
- Text in (or over) images must meet the same contrast guidelines as all other text. If it does, then it is usually still readable.
- See Images of Text and Background Images for more information on using text in or over images.
Accessibility Information
Section titled “Accessibility Information”The Colour Contrast Analyser works with both keyboard and mouse navigation. Use the shortcut keys in the following tables to use CCA with the keyboard. Note that the visible focus indicator is not always easy to see in version 2.5, especially when the “Colour select” box is selected. This is corrected in version 3.
| Function | Key(s) |
|---|---|
| Move through all interactive and read-only editable elements in the CCA interface | Tab (forward) and Shift + Tab (backward) |
| Open Options menu | Alt + O |
| Open Image menu | Alt + I |
| Open Help menu | Alt + H |
| Move through dropdown menus | Arrow keys |
| Select menu item | Enter |
| Close dropdown menus | Esc |
| Keep CCA window on top | Ctrl + S |
| Open Font popup window | Ctrl + F |
| Show contrast results for colour blindness | F6 |
| Open RGB slider | F7 |
| Open HSL slider | F8 |
| Adjust colour sliders | Arrow keys |
| Open “Window Selection” popup window to view the selected window through the simulator | Ctrl + I |
| Open TPGi Help page in a browser | Ctrl + H |
| Open foreground colour palette | F9 |
| Open background colour palette | F10 |
| Open the colour palette from the “Colour Select” box | Alt + down arrow |
| Move through colour palettes | Tab or arrow keys |
| Choose a colour in the palette | Enter or Spacebar |
| Open the colour palette popup window from the basic colour palette | Ctrl + O |
| Open the extended colour picker window from the colour palette window | Ctrl + D |
| Activate foreground colour sampler | F11 |
| Activate background colour sampler | F12 |
| Move the colour sampler | arrow keys |
| Open the colour sampler size selector dropdown from the eyedropper box | down arrow |
| Choose a color in the colour sampler | Enter |
| Move Screen Convert popup window | M + arrow keys |
| Function | Key(s) |
|---|---|
| Activate foreground color sampler | F11 |
| Activate background color sampler | F12 |
| About CCA Menu | F1 |
| Preferences | Ctrl + comma |
| Quit CCA | Ctrl + Q |
| Copy Results | Ctrl + Shift +C |
| Copy Short Results | Alt + Ctrl +C |
| Always on Top | Not Available |
| Color Blindness Simulation | Ctrl + B |
| Actual Size | Ctrl + O |
| Zoom In | Ctrl + + |
| Zoom Out | Ctrl + - |
| Reload | Ctrl + R |
| Open Developer Tools | Ctrl + Shift + I |
Most CCA functions are also available with a screen reader. Users can enter Hex, RGB, HSV, or HSL (if available) values to specify colors, adjust the color sliders, and access the test results for the WCAG and color blindness contrast checks. CCA displays the test results in read-only text fields.
Note that the checkbox for “Show contrast results for color blindness” comes after the read-only test results field in the tab order. Keyboard navigators can use “Shift + Tab” to move backward to read the contrast results after selecting this option. The “Copy Results” button comes directly after the “Show contrast results for color blindness” checkbox.
References
Section titled “References”- Download the Colour Contrast Analyser (TPGi)
- Introduction to Colour Contrast Analyser (Section508.gov) (videos)
- Using the CCA (Vision Australia)
- Colour Contrast Analyser (Colblindor)
- Demonstration of Colour Contrast Analyser version 2.4 (video)
- Demonstration of Colour Contrast Analyser version 3 (video)
- Color Blindness (Colblindor)
- Cone Cells (Wikipedia)