7 Accessible Web Colour Contrast

Colour contrast is a numerical value for the visual difference between two adjacent colours.

Sufficient colour contrast is very important to improve accessibility and can be difficult to evaluate without using a tool.

This often refers to the colour contrast of the text against the background on a page but can also be applied to visual elements such as graphics, charts, and graphs.

Web Content Accessibility Guidelines (WCAG) 2.0 AA Colour Contrast Requirements

Requirements that use “must” fall under current required accessibility guidelines.

Requirements that use “should” fall under upcoming accessibility guidelines. Where possible, you should aim for this level of contrast.

• Text must (AA) have a contrast of at least 4.5:1 for body text and 3:1 for headings.
• Text should (AAA) have a contrast of at least 7:1 for body text and 4.5:1 for headings.
• Adjacent colours within graphics should (2.1 AA) have a contrast of at least 3:1.
• Colour must (AA) not be used to convey meaning. For example, if colour is used in a legend, additional information such as labels or symbols should also be used.

How to Check the Colour Contrast of your Page

• Obtain the hex colour codes (for example, white is #FFFFFF) of the colours you would like to check.
• If you are using McMaster brand colours, these colour values are available on page eight (8) and nine (9) of the Digital Brand Standards Manual.
• Use a free colour contrast checker, such as color.review or Colour Contrast Analyser, to obtain the contrast value for your colours.
  • If your background colour is white, the hex code should be #FFFFFF. If your background colour is black, the hex code should be #000000.

McMaster Brand Colour Comparisons

• If you are using McMaster brand colours, it is very important to check the contrast of the colours if their contrast is not provided below.
• It is recommended to aim slightly above AAA or AA contrast to account for differences in monitors, poor internet connections, or lighting locations.
• Achieving AAA contrast will also prevent the need for remediation at a later date when legislative guidelines change.
• The “Highlights” colours should not be used on white unless they are being used for decorative purposes only.

WCAG 1.4.6 Contrast (Enhanced) AAA – on White

• Heritage Maroon (7A003C): 11 (Pass AAA Headers, AAA Text)​​
• Heritage Gold (FDBF57): 1.6 (Fail)​​
• Heritage Grey (5E6A71): 5.5 (Pass AAA Headers, AA Text)​​
• Brighter World Red (A6192E): 7.5 (Pass AAA Headers, AAA Text) ​​
• Brighter World Green (007B4B): 5.1 (Pass AAA Headers, AA Text) ​​
• Brighter World Blue (007096): 6 (Pass AAA Headers, AA Text) ​​

WCAG 1.4.6 Contrast (Enhanced) AAA – on Black

• Heritage Maroon (7A003C): 2.7 (Fail)​​
• Heritage Gold (FDBF57): 12.7 (Pass AAA Headers, AAA Text)​​
• Heritage Grey (5E6A71): 3.7 (Fail)​
• Brighter World Red (A6192E): 2.7 (Fail) ​​
• Brighter World Green (007B4B): 3.9 (Pass AA Headers, Fail Text) ​​
• Brighter World Blue (007096): 3.7 (Pass AA Headers, Fail Text)

Non-Text Contrast

• WCAG 1.4.11 Non-text Contrast requires at least a contrast of 3 against adjacent colours for:
  • “Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.”

Colour Contrast in Mac Sites

An example of good colour contrast with a title, alternative text and captions as needed for this image of an ‘Accessible Lift’ with braille below.

Changing Text Colour in MacSites

To change the colour of text in MacSites, you must insert HTML code around that text in the text editor. A screenshot of how to access this editor is available below.

For example, to change text to maroon, use the following HTML container code:

• <span style=”color: #7a003c;”></span>