Styles
Colour contrast
The Web Content Accessibility Guidelines (WCAG) aim to make web content more accessible to a wider range of people with disabilities. The contrast ratio requirements ensure that text and graphical elements are easily distinguishable from their backgrounds. Here's a detailed breakdown of the contrast ratio requirements for different WCAG levels:
WCAG 2.0 Level AA
- Normal Text: A contrast ratio of at least 4.5:1.
- Large Text: A contrast ratio of at least 3:1.
WCAG 2.1
- Graphics and User Interface Components: A contrast ratio of at least 3:1.
WCAG Level AAA
- Normal Text: A contrast ratio of at least 7:1.
- Large Text: A contrast ratio of at least 4.5:1.
Definition of Large Text
- Large Text: Text that is at least 14 point (typically 18.66px) and bold, or 18 point (typically 24px) or larger.
These guidelines are designed to improve readability and usability for users with visual impairments, ensuring that web content is accessible to as many people as possible. When designing web content, adhering to these contrast ratio requirements is crucial for compliance with accessibility standards.
We use the WebAIM Colour Contract Checker (opens new window) to test the colours used on the website meet the WCAG guidelines.
Examples of colour contrast used throughout the website
Call to action buttons
Primary call to action buttons
| State | Foreground colour | Background colour | Normal text size colour contrast | Large text size colour size | Contrast ratio | Results | ||
|---|---|---|---|---|---|---|---|---|
| Default state | #fffffff | #266427 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 7.15:1 | Link to results |
| Hover state | #fffffff | #183f19 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 11.9:1 | Link to results |
| Active and focus state | #111111 | #ffdd00 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 14.02:1 | Link to results |
Secondary call to action buttons
| State | Foreground colour | Background colour | Normal text size colour contrast | Large text size colour size | Contrast ratio | Results | ||
|---|---|---|---|---|---|---|---|---|
| Default state | #111111 | #ffffff | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 18.88:1 | Link to results |
| Hover state | #111111 | #e6e6e6 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 15.12:1 | Link to results |
| Active and focus state | #111111 | #ffdd00 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 14.02:1 | Link to results |
Form buttons
Primary form buttons
| State | Foreground colour | Background colour | Normal text size colour contrast | Large text size colour size | Contrast ratio | Results | ||
|---|---|---|---|---|---|---|---|---|
| Default state | #ffffff | #045a90 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 7.31:1 | Link to results |
| Hover state | #ffffff | #034975 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 9.48:1 | Link to results |
| Active and focus state | #111111 | #ffdd00 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 14.02:1 | Link to results |
Secondary form buttons
| State | Foreground colour | Background colour | Normal text size colour contrast | Large text size colour size | Contrast ratio | Results | ||
|---|---|---|---|---|---|---|---|---|
| Default state | #111111 | #e5e5e5 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 14.99:1 | Link to results |
| Hover state | #111111 | #BABABA | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 9.72:1 | Link to results |
| Active and focus state | #111111 | #BABABA | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 9.72:1 | Link to results |
Header
Top navigation
| State | Foreground colour | Background colour | Normal text size colour contrast | Large text size colour size | Contrast ratio | Results | ||
|---|---|---|---|---|---|---|---|---|
| Default state | #ffffff | #111111 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 18.88:1 | Link to results |
| Hover state | #ffffff | #111111 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 18.88:1 | Link to results |
| Active and focus state | #111111 | #ffdd00 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 14.02:1 | Link to results |
Breadcrumb
| State | Foreground colour | Background colour | Normal text size colour contrast | Large text size colour size | Contrast ratio | Results | ||
|---|---|---|---|---|---|---|---|---|
| Default state | #ffffff | #045a90 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 7.31:1 | Link to results |
| Hover state | #ffffff | #045a90 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 7.31:1 | Link to results |
| Active and focus state | #111111 | #ffdd00 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 14.02:1 | Link to results |
Footer
Feedback
| State | Foreground colour | Background colour | Normal text size colour contrast | Large text size colour size | Contrast ratio | Results | ||
|---|---|---|---|---|---|---|---|---|
| Text | #111111 | #e5e5e5 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 14.99:1 | Link to results |
| Default state | #045a90 | #e5e5e5 | AA - Pass | AAA - Fail | AA - Pass | AAA - Pass | 5.8:1 | Link to results |
| Hover state | #034e7c | #e5e5e5 | AA - Pass | AAA - Fail | AA - Pass | AAA - Pass | 6.99:1 | Link to results |
| Active and focus state | #111111 | #ffdd00 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 14.02:1 | Link to results |
Social links
| State | Foreground colour | Background colour | Normal text size colour contrast | Large text size colour size | Contrast ratio | Results | ||
|---|---|---|---|---|---|---|---|---|
| Default state | #ffffff | #353535 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 12.26:1 | Link to results |
| Hover state | #ffffff | #353535 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 12.26:1 | Link to results |
| Active and focus state | #111111 | #ffdd00 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 14.02:1 | Link to results |
Utility links
| State | Foreground colour | Background colour | Normal text size colour contrast | Large text size colour size | Contrast ratio | Results | ||
|---|---|---|---|---|---|---|---|---|
| Default state | #ffffff | #404040 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 10.36:1 | Link to results |
| Hover state | #ffffff | #404040 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 10.36:1 | Link to results |
| Active and focus state | #111111 | #ffdd00 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 14.02:1 | Link to results |
