Colours
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.
Hex Colour Codes
The default font colour and background for most content in Pressbooks will always be “Black” and “White.” We must use hex colour codes to maximize the 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 (Black Hex Code #000000), while white is achieved by combining the maximum level of all colours (White Hex Code #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.
Accessibility 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, additional information such as labels or symbols should also be used if colour is used in a legend.
How to Check the Colour Contrast
Use a free colour contrast checker, such as the 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)
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.
Design Studio Colour Palettes
Below is a selection of colour themes created by the Studio to help enhance the instructional design of our books as well as to provide readers with helpful visual cues to important information. These themes are used in Pressbooks for the following preformatted textboxes: Learning Objectives, Examples, Exercises, and Key Takeaways, as well as any custom textboxes and elements (such as drop-down accordions) we create.
The colour palettes below have been designed with at least Level AA accessibility in mind. To review the full-colour contrast of each theme’s colour on a webpage, select the corresponding hyperlink in the box directly below each theme. The contrast ratio numbers are also listed for reference. Note that textboxes within Pressbooks will always have a font size of at least 18. pts.
- Download a PDF copy of the colour palettes (11.4 MB)
- Tip – You can cut and paste the Hex colour codes from the PDF when working in Pressbooks
“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.
