Website maintainers are required to adhere to WCAG 2.0 Level AA requirements for colour contrast in order to:
- Comply with the Accessibility for Ontarians with Disabilities Act (AODA), and
- Allow people with low vision or a colour vision deficit to view information.
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:
- Open your infographic in Paint (Paintbrush for Mac users).
- In the Tools section of the ribbon, select Colour picker.
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.
In the ribbon, select Edit colours.
Repeat steps 2-5 for the background colour of your graphic.
- Navigate to w3school's color converter tool.
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".
Your six-character Hex code will now appear in the Hex field.
Repeat steps 2-3 for the background colour of your graphic.
- Navigate to the snook colour contrast tool.
Under Foreground Colour, enter the 6-character hex code in the # field. This is the code from "Obtaining the Hex code step 3".
Under Background Colour, enter the 6-character hex code in the # field. Reference "Obtaining the Hex code step 3" for this information.
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.
What if my contrast ratio is less than 4.5?
If your contrast ratio is less than the WCAG 2.0 AA standard of 4.5, your graphic will need to be amended. For example, if you have light foreground and background colours, try using a darker foreground colour.
Note: Exceptions include 18pt font and 14pt bolded font (which have a contrast ratio requirement of 3:1).
You can always reference the University of Waterloo Brand site for accessible colours as well.
What else can I do to enhance readability?
Keep in mind the following design tips:
- Use a legible font size
- Avoid using difficult to read fonts
- Limit the use of ALL CAPS, as this can make text more difficult to read
- Use colours that work well together from the perspectives of design, readability, and accessibility
- Test your graphic on different screen sizes to ensure legibility
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:
- Black text on a red background ("Towards an accessible Waterloo")
- 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.