Home » Resources » Colour design system for an accessible colour palette
Arrangement vibrant coloured wooden blocks in a grid and various depths.

Image by rorozoa from Freepik

Using a colour design system to build an accessible colour palette for course materials

Written by JJ Cloutier 
Edited by Alison Fung
content review March 2024

Key takeaway

  • Develop an accessible colour palette for content using colour design system.

Colour palette worksheet

We created a colour palette worksheet in MS Word to record your custom colours palette for your course(s). It contains the recommendations in the file for reference. 

Download the colour palette worksheet

Colour systems

Reasonable Colors

This is a series of 24 colours, each in 6 shades. The contrast between any two shades can be inferred by the difference between their shade numbers and contrast rules that work across all 24-colour sets. It was inspired by the US Web Design System (USWDS).

Reasonable Color system

US Web Design System

This is a series of 24 colours, each with eight or more grades. The contrast is determined by the numeric difference in the grade or the magic number.

Body text

Body text, also called paragraph in an LMS or normal text in MS Word, is the main text used for writing content. We suggest using black (#000000) or charcoal (#333333 or #404040) for the body copy. If you want to select a different colour, we suggest levelling up to WCAG 2.1 contrast level of AAA or 7:1, so a colour that is either: 

  • USWDS: Magic number of 70+  
  • Reasonable Colors: A shade difference of 4+  

Background colour

You may be able to change the background colour in your applications (e.g., LMS, word process, data process software). We suggest using white (#FFFFFFF), or if you want to customize, use a very light grey (#F2F2F2) for the background. In the colour design systems, the light grey could be:  

  • USWDS: gray-3 (#F6F6F6), gray-cool-3 (#F5F6F7) 
  • Reasonable Colors: gray shade 1 (#F6F6F6) 

Tip:  If you cannot change the background colour in one application, then you should leave the background white for the remaining applications. 

Headings

For headings, you can use multiple colours, a single colour, or several shades of a colour. We suggest the following minimums: 

  • WCAG 2.1: Contrast level of AA or 4.5:1  
  • USWDS: A magic number of 50+  
  • Reasonable Colors: A shade difference of 3 

Though large text can use a contrast ratio of 3:1 and still meets WCAG 2.1, level 4 and sometimes level 3 headings can be below the size requirement for large text. It is best practice to make sure all the headings are in a 4.5:1 ratio to avoid making the error of using too low contrast. 

In addition to decreasing size, in headings, you can change the colour or shades of the colours used. Since heading level 4 is typically closest in size to the paragraph text, we suggest that it is not your darkest shade to decrease confusion with your body text. 

For our colour palette template, we have listed only headings 1 through 4. 

Callout background

Select colours to use for callout boxes or sidebars. Callouts display the text you want to highlight with a coloured background. You can use them as notes, reminders, important info, keywords or key takeaways.  

We suggest two to three light colours or shades of colour and one dark colour to use with white text. The light colour should be at different grades or shades to help distinguish them. Such as grade 10 and grade 30 in the USWDS, shades 1 and 2 in the Reasonable Color system. 

The colours chosen here should work with heading colours. The easiest way is to take the lighter shade of the same heading colours. 

 The colour contrast should be against your text colour and should be:  

  • WCAG 2.1: Contrast level of AA or 4.5:1  
  • USWDS: A magic number of 50 or less with dark text colour 
  • Reasonable Colors: A shade difference of 3 

Examples

Notes: This callout box is for notes about the above section. You can connect two pieces of information or remind them of a connected topic. (Colour=USWDS Cyan 10)

Important: This is an important note. It is in a different background than the Notes. It is essential to be consistent with backgrounds. All the “notes” should have one colour, while all the “important” should have another colour. (Colour=USWDS Orange Vivid 30)

Reminder: This is a dramatic colour combo, but it is more difficult for people with astigmia or for people viewing in direct bright light to read. We suggest using sparingly and only for short sections of text only. (Colour = USWDS Cyan Vivid 60)

Chart colours

Ideally, create a palette of 6 colours meeting the non-text contrast level minimum of 3:1 ratio. You must use the colours correctly, ensuring a 3:1 ratio against the colours beside them. We suggest charts should have a white (#FFFFFF) background. If you use a light grey (or another background), you need to adjust the following recommendations.  

In the colour design systems, we have found this pattern works for white backgrounds: 

USWDS

  • Colour 1: A grade of 70+ 
  • Colour 2: A grade of 40 
  • Colour 3: A grade of 70+ 
  • Colour 4: A grade of 40 
  • Colour 5: A grade of 70+ 
  • Colour 6: A grade of 40 

Reasonable colors

  • Colour 1: Shade 5 
  • Colour 2: Shade 3 
  • Colour 3: Shade 5  
  • Colour 4: Shade 3 
  • Colour 5: Shade 5  
  • Colour 6: Shade 3 

Links

Some applications may allow you to customize the link colour, which you can use in addition to underlining. If you can customize, according to Nielsen (2004), the best practice is to use different shades of the same colour for visited and unvisited links; use a more vivid or bright colour for the unvisited link and a less saturated or dull colour for visited.  

Though blues have a strong signal for links due to their common use, other colours will work almost as well. (Nielsen, 2004) If you can set a focus or hover (selected link) colour, you need to expand to three related colours. Link colour text should have contrast of 3:1 ratio with the paragraph text and 4.5:1 or better with the background. (WC3, 2024) 

Remember: To be consistent throughout your course materials regardless of applications (e.g., LMS, Word, Excel, PowerPoint, Google Docs, Google Sheets, Google Slides)

Examples

USWDS

  • Default link: indigo-60v (vivid) #4A50C4 
  • Visited link: indigo-cool-50 (cool) #496FD8 

USWDS (Selected link)

  • Default link: indigo-60v (vivid) #4A50C4 
  • Selected link (on hover or focus): indigo-80v (vivid) #212463 
  • Visited link: indigo-warm-50 #7665D1 

Reasonable Colors

  • Default link: #0061FC Indigo 4 
  • Visited link: #00386D blue 5 
  • Default link: #00328A Indigo 5 
  • Selected link (on hover or focus): #001649 Indigo 6 
  • Visited link: #794AFF violet 4 

You may also be interested in

Random green parallelogram pattern, spotted with blue.
Image by Freepik from Freepik

Colour for online teaching materials

Black male wearing over the ear headphones, while listening to smartphones he is holding in his hands, sits in front of an open laptop.
Image by Jordan Nicholson from Disability Inclusion.

Primer on accessible courses

Professionally dressed South Asian woman presenting in front large digtal screen pointing the engineering diagram of a weir.
Image by ThisisEngineering RAEng from Unsplash

Images in teaching materials

References

Nielsen, J. (May 9, 2004). Guidelines for Visualizing Links. Nielsen Norman Group. Retrieved from URL https://www.nngroup.com/articles/guidelines-for-visualizing-links/ 

W3C. (January 4, 2024). Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on hover for links or controls where color alone is used to identify them. World Wide Web Consortium. Retrieved from URL https://www.w3.org/WAI/WCAG22/Techniques/general/G183.