Colour Use
Using colour is an easy way to add visual interest to Pressbooks content. By following a few steps, it’s easy to ensure colour is used in a way that won’t exclude any readers from engaging with your Pressbook. Keep the following in mind when designing content in Pressbooks:
- Poor colour contrast can make page content difficult to read
- Using colour to convey meaning can make content inaccessible for some users
- Appropriate use of colour helps us to meet accessibility standards and improves the quality of our books.
Hex Colour Codes
The default font colour and background for most content in Pressbooks will always be “Black” and “White.” In many cases, these semantic colour names can be used; however, we need to use hex colour codes to take advantage of the full range of available colours.
A hex colour code consists of a hash symbol (‘#’) followed by six hexadecimal digits. The hexadecimal number system uses 16 digits instead of 10 and includes the familiar digits ranging from 0-9, with values from 10 to 15 represented by the range ‘A’ to ‘F’ in the alphabet. Each pair of these digits represents a colour channel: the leftmost pair determines the amount of red, the middle pair determines the amount of green, and the rightmost pair represents the amount of blue. For example, #DE4226 specifies a red-orange hue.
Note that we are mixing light, not paint or dye, so black is achieved by emitting no colour (#000000), while white is achieved by combining the maximum level of all colours (#FFFFFF).
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.
- The text must (AA) have a contrast of at least 4.5:1 for body text and 3:1 for headings.
- The 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
- Obtain the hex colour codes (for example, white is #FFFFFF) of the colours you want to check.
- White hex code: #FFFFFF.
- Black hex code #000000.
- Use a free colour contrast checker, such as teh following:
- WebAIM’sColor Contrast Checker:
- color.review
- Colour Contrast Analyser
- ACART’s Contrast Checker: This is a straightforward, web-based tool you can use to both check colour contrast and view your selections in greyscale. This tool also allows you to keep a history of your tested colour combinations.
Other Resources
- Giacomo Mazzocato’s Accessibility Color Wheel: This web-based tool includes several options for testing your colour selections, including simulations of three types of colour blindness. You can also opt to test what your contrast ratio is when the foreground and background colour selections are inverted.
- Colour Blindness Simulation: Check how your designs appear to people with colour blindness using tools like Coblis or Colour Oracle.
- Adobe Colour Picker
- Venngage Accessible color palette generator
Fixing Color Issues in Pressbooks
Video: Fix Colour Issues on Screencast-o-matic [03:30] by Jen Booth is licensed under CC BY-NC 4.0, except where otherwise noted. Closed Captions are available.
“Accessible Web Colour Contrast” from Accessible Digital Content Training by Jessica Blackwood and Kate Brown, © 2023 Jessica Blackwood and Kate Brown. All rights reserved.
“Fixing Colour Issues” in GC Library OER Design Studio – Training – Work-in-Progress Copyright © by Jen Booth is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License, except where otherwise noted.
