More on Color Contrast

As said previously, UDOIT is not programmed to detect font size or background color (it's assumed to be white) which can lead to both false positives and false negatives.

To get a false positive, the following must be true:

  • For large text (size ≥14pt bold or ≥18pt), have a contrast ratio of 3:1 or greater between the background color and font color.
  • For regular text, have a contrast ratio of 4.5:1 or greater between the background color and font color.

To get a false negative, you need to have text on a colored background which has a 4.5:1 contrast with white but does not have the appropriate contrast ratios listed above for the colored background. Unless you or someone you know edits the HTML, adjusts table background colors, or inserts an image containing text, you won't have this problem.

Identifying False Positives

In order to check verify false positives for large text on white backgrounds, it is easiest to examine the HTML snippet provided by the UDOIT report. If you do not feel comfortable doing this, you can use the process for determining false negatives, but you will need to set the background color to #ffffff and will need to verify that AA for large text passes.

To check if the UDOIT result you've received is a false positive first check the HTML for the following:

Code For Meeting WCAG Requirements
WCAG Requirement HTML Font Size HTML Font Weight
14pt bold
  • style="[...] font-size: 14pt; [...]"
    • 15pt, 16pt, and 17pt are also acceptable
  • style="[...] font-size: 1.125em; [...]"
    • 1.250em, 1.313em, and 1.375em are also acceptable
  • style="[...] font-size: medium; [...]"
  • style="[...] font-weight: bold; [...]"
  • <strong>[text that you want to be bold]</strong>
18pt
  • style="[...] font-size: 18pt; [...]"
    • sizes above 18pt are also acceptable
  • style="[...] font-size: 1.5em; [...]"
    • sizes above 1.5em are also acceptable
  • style="[...] font-size: large; [...]"
    • x-large and xx-large are also acceptable
 Not Important

Note: The [...] or additional styling attributes in the above code is optional. It could be that the important code in bold immediately follows the opening " or is followed by the closing ".

If you found the correct font size and font weight code, you will then want to check the color contrast ratio. Copy the three or six alpha-numeric characters that appear between ; color: # and ;. This is the code for your text color. Next, open Contrast Ratio Links to an external site. and paste the value in the Text color (right) field. If the dot between the Background and Text color fields has a number larger than 3.1 and is an orange (or green) color, then the UDOIT result can be ignored.

Identifying False Negatives

To identify false negatives or generally make sure that your text and background colors meet appropriate contrast ratio levels, you will need a color contrast analyzer, preferably one with an eyedropper tool that will not require you to dig through the HTML to find the hexadecimal code for the colors.

We recommend downloading and using Vision Australia's Colour Contrast Analyser Links to an external site..

It may help to download the zip file to C:\Program Files and name the zip file Vision Australia or Color Contrast Analyzer. Once the zip file is downloaded, extract the contents to a folder that matches the zip file's name. Afterwards, open the folder, right click on the .exe file, and then click Create Shortcut. Next, Cut and Paste the shortcut to your desktop or somewhere that you'll be able to access easily. Then, open the analyzer, click Options, click Always on top, and then close the Options menu and type Ctrl + E to make sure that the color values are in Hex format instead of RGB.

After the color contrast analyzer is downloaded and properly set, open it and open the page of your Canvas course that may have a false negative (pretty much any page where you have text on a colored background). In Canvas, type Ctrl/⌘ + = until the browser is zoomed in 250% or more. Click the Foreground eyedropper tool (the button is to the right of the Hex field), move your cursor to the darkest part of one of the letters on the colored background in Canvas, and click. If the font is the default colors, as of January 2017, the Hex field in the analyzer should be filled with #2D3B45 for regular text and #008EE2 for linked text. Next, take the analyzer's eyedropper for the Background, move the cursor to the background color and click. Once done, check the results section of the analyzer. If the font is regular sized, make sure that the combination passes Text AA or that the Contrast ratio reads 4.5:1 or greater. If the font is large (size ≥14pt bold or ≥18pt), make sure that the combination passes Large text AA or that the Contrast ration reads 3:1 or greater. The AAA readings are not important. If the combinations do not meet these required levels, then this portion of the page will need additional editing.

Additional Color Contrast Analyzers

If the color contrast analyzers linked above don't appeal to you, there are plenty more to choose from (even more than the ones in the table below).

Contrast Analyzers
Analyzer Type Best Use
Paciello Group's Analyzer Links to an external site. download Great for identifying current colors via eyedropper tool.
(It's virtually the same program as Vision Australia's.)
Color Contrast Visualizer Links to an external site. (download) [We have not tried using this one yet.]
Color Extractor Bookmarklet Links to an external site. Bookmarklet / Save to web browser bookmarks Great for determining which combinations of your site's chosen color scheme work together. Here is the page that contrasts the Clemson brand color combinations Links to an external site..
Color Contrast Analyzer Links to an external site. Google Chrome Extension Great for testing the contrast of text on images and for getting a rough estimate of the contrasts levels on an entire webpage.
Brandwood A11y Analyzer Links to an external site. Online Great for testing the contrast of text on images and (possibly) for getting a rough estimate of the contrasts levels on an entire webpage.
Contrast A Links to an external site. Online Great for finding accessible alternatives for inaccessible colors, but the interface is overly complicated which may be overwhelming
Contrast Checker Links to an external site. Online Great for finding accessible alternatives for inaccessible colors, but the help text for each of the dots at the bottom of the page is not as clear as it could be. The numbers 1.4.3 and 1.4.6 are not related to the contrast ratios but to the WCAG standard that contrast ratios came from. 
MSF&W Color Calculator Links to an external site. Online Has a nice table with a considerable number of contrast levels/combinations already identified.
Color Safe Links to an external site. Online Good for a relatively simple contrast analyzing interface with results that generate many alternative color swatches. See the Canvas default information beneath this table.
Tanaguru Links to an external site. Online Good for a simple contrast analyzer that generates many alternative color combinations.
SSBart Group's Analyzer Links to an external site. Online Nice for a simple analyzer interface that has slider bars which can be used to find decent alternatives.
Contrast Ratio Links to an external site. Online Nice for an aesthetically pleasing analyzing interface.

If you're comparing with the Canvas defaults, the Canvas default background color is white #FFFFFF, the default font color is dark gray #2D3B45, and the default link color is #008EE2 (as of January 2017). The font is also sized around 12pt (16px), with 400 weight, in the Lato or Helvetica family.