Welcome to Color Contrast Analyser - an overview
You can download the software at https://developer.paciellogroup.com/resources/contrastanalyser/
As of this recording, this is the view of the Colour Contrast Analyser home page.
The download button on the page links to the most recent release of the software and is available for both Mac and PC.
Above the download button are screenshots of the software in use.
In this sample image we can see the contrast ratio
Below the contrast ratio is the foreground colour section.
Next is the background colour section.
This is followed by a sample preview of the foreground color on top of the background color.
In this sample image, we see the contrast ratio, foreground colour, background colour, and sample preview sections just as in the previous sample.
Below the sample preview, we see the contrast results of the sampled colors.
The first section within the results is the minimum AA results. This particular sample has failed for even the minimum standard.
Next is the AAA level results. Again, this sample has failed the test for these results.
The final results section is for non-text contrast. This is the visibility of user interface components and any graphical objects using the provided colors.
Again, this sample has failed the test for this category.
In this example, the sampled colors pass for some components but not others.
Now that we have reviewed the samples, it's time to download the software. The download button will direct you to GitHub.
As of this recording, the software version is 1.2.1
Scroll down the page to the Assets section
For users on Apple computers, you will download and install the file with the .dmg extension
PC users will download and install the file with the .exe extension
After you have installed the software, open it up. You will see a dialog box similar to what is displayed here.
Please note that these screenshots were taken on a Mac computer. PC users may not see exactly the same layout.
With the software open, navigate to a page where you want to test the colors. For this example, we will sample the Google logo colors.
Select the current foreground colour as demonstrated.
A second dialog box will open. You will use this box to select the colors you are testing.
There are multiple ways to find colors with this dialog box. However, for this example, we are going to use the eyedropper function.
Hover over the eyedropper and select it.
Now move your mouse to the color you are wanting to sample. In this example, we are going to sample the G in Google.
As soon as we selected the G, the foreground color changed in the Colour Contrast Analyser box.
Additionally, we immediately received the results of the color of the G as compared to the white background (which was already set).
This particular color against white only has a 3.5:1 contrast ratio. The larger the ratio, the better for visibility.
Let's look at the results for Normal text. Notice that this color combination fails for both the AA and AAA tests.
Normal text is typically a font size of 12 to 14. Based on this, you would not want to use this shade of blue against white for the text on your website.
Now, let's look at the results for the Large text section. Notice that the color combination passes for AA but not for AAA.
Remember that AA is the minimum standard. Consider your audience when determining if you need to meet AA or AAA standards.
If the AA standard is sufficient to meet your needs, then this color of blue against white is satisfactory for headings and logos.
Continue sampling different color sets. You can change the background color in the same manner you changed the foreground color.
As you compare more sets, look at the contrast ratio and review the results of both the normal and large texts.
The more you sample and review results, the better you will understand how colors may or may not work together.
As you become more comfortable, try selecting other options in the software. For example, the Colour/Brightness tab.
This tab provides you with what the differences are for both colour and brightness for the selected color set. It also shows you what the minimum is for both.
Notice that the golden yellow on white does not meet the minimum for either color difference or brightness difference.
The Colour Deficiency tab can give you an idea of what people with different types of color blindness may see.
Notice how this golden yellow color may actually appear as a shade of pink to someone with Tritanopia.
Thank you for watching this video. We hope it has answered some of your questions on how to use this software.