We want our users to have a consistent experience when they interact with our products. To achieve this, all Jisc products must use our main colour palettes.
Colour contrast
The contrast ratio of text and interactive elements in your product must meet level AA of the Web Content Accessibility Guidelines (WCAG 2.1). Although our colours were chosen with this in mind, you will still need to check your own implementation.
Main colours
Text
| Primary text | #333 | Mine Shaft | |
| Secondary text | #666 | Dove Gray – dark |
Links
| a:link | #069 | Bahama Blue | |
| a:hover | #ae460e | Rust | |
| a:visited | #609 | Purple | |
| a:focus | #fd6 | Dandelion | |
| a:active | #333 | Mine Shaft |
Content layout
To define areas of content and provide structure to your design.
| Content background | #fff | White | |
| Content alternate/boxed out | #f7f7f7 | Alabaster | |
| Page background | #f2f2f2 | Concrete | |
| Hairline | #d9d9d9 | Alto |
Utility layout
Used for utility elements such as the Jisc banner, footer or toolbars.
| Utility background | #333 | Mineshaft | |
| Utility background 2 | #404040 | Tundora – dark | |
| Utility background 3 | #4c4c4c | Tundora – light |
Theme colour
Our products need a certain level of visual distinctiveness. This is so users can orientate themselves when moving between different sites.
Picking a theme colour
Your theme colour needs to meet our accessibility guidance, be distinctive from others already in use and fit tonally with our brand. If you would like help and support choosing a theme colour for your product please contact brand@jisc.ac.uk
Visualising data with colour
Use these rules when choosing your colours
- Get it right in black and white. Make sure your design works in greyscale (black and white) before adding in colour. Don’t assume colours will signal meaning when used on their own.
- The safest hue is blue. The richest colour across all types of colour blindness is blue, therefore blue (#069) is our primary choice.
- Red and green should never be seen. Avoid using red and green together as they are difficult to distinguish from one another in the more common types of colour blindness.
For more detail see our guide on using colour in charts