How to check the colour contrast of text used in graphics

Website maintainers are required to adhere to WCAG 2.0 Level AA requirements for colour contrast in order to:

Therefore, website maintainers must ensure there is sufficient contrast between text and its background (colour contrast ratio of 4.5:1).

This is a three-step process:

  1. Obtaining the Red Green Blue (RGB) code
  2. Obtaining the Hex code
  3. Obtaining the contrast ratio

Obtaining the RGB code

  1. Open your infographic in Paint (Paintbrush for Mac users).
  2. In the Tools section of the ribbon, select Colour picker.

    Screenshot of Tools section with the Eyedropper icon highlighted.
  3. Your cursor will now appear as an eye dropper tool. Click on the foreground colour (text) of your graphic.

    Note: You may have to zoom in on your graphic to ensure you are making the most accurate selection.

    Screenshot of cursor turning into eyedropper tool.

  4. In the ribbon, select Edit colours.

    Screenshot of Edit colours button.

  5. An Edit Colors window will appear. Note the three values for Red, Green, and Blue, this is your RGB code.

    Screenshot of Edit Colors window, with RGB codes highlighted.

  6. Repeat steps 2-5 for the background colour of your graphic.

Obtaining the Hex code

  1. Navigate to w3school's color converter tool.
  2. In the name, hex, rgb, hsl, hwb, cmyk, ncol: field, enter the RGB code for your foreground colour (text). This is the code from "Obtaining the RGB code step 5".

    Screenshot of the name, hex, rgb, hsl, hwb, cmyk, rcol field.

  3. Your six-character Hex code will now appear in the Hex field.

    Screenshot of the Hex field.

  4. Repeat steps 2-3 for the background colour of your graphic.

Obtaining the contrast ratio

  1. Navigate to the snook colour contrast tool.
  2. Under Foreground Colour, enter the 6-character hex code in the # field. This is the code from "Obtaining the Hex code step 3".

    Screenshot of the the Foreground Color # field.

  3. Under Background Colour, enter the 6-character hex code in the # field. Reference "Obtaining the Hex code step 3" for this information.

    Screenshot of the Background Color # field.

  4. Look at the Results section. You will need to ensure:

    • Contrast Ratio is greater than 4.5.

    • WCAG 2 AA Compliant reads YES.

      Note: Under the AODA, website maintainers are not required to meet WCAG 2 AAA standards.

      Screenshot of the Contrast Ratio and WCAG 2 AA Compliant fields.

Note: the three-step process must be repeated for each foreground and background colour combination in your graphic.

For example, this how-to document tested only black text on a beige background, but a website maintainer would also need to test the other colour combinations in this infographic:

  1. Black text on a red background ("Towards an accessible Waterloo")
  2. White text on a red background ("Accessibility 101")

​As the yellow stripe is decorative, it does not need to meet the contrast requirement.

Learn more about the other exceptions to this requirement

Screenshot of sample Infographic, highlighting (1) black text on a red background (Towards an Accessible Waterloo), and (2) white text on a red background (Accessibility 101).