Contrast between foreground and background colours are tested to ensure WCAG AA compliance. Where colour is used to draw attention to an item (eg panels) and insufficient contrast exists between a background colour and element colour, additional techniques may be required to provide support for users unable to perceive the colour.
ONS Colours (Theme)
These are the brand colours for The Office for National Statistics
ONS Blue
| HTML |
#033E58 |
| RGB |
3,62,88 |
| SCSS |
$ons-blue |
Census Purple
| HTML |
#6E2585 |
| RGB |
110,37,133 |
| SCSS |
$color-census-purple |
Service Colours
Primary
| HTML |
#0F8243 |
| RGB |
15,130,67 |
| SCSS |
$color-primary |
Text
| HTML |
#222222 |
| RGB |
34,34,34 |
| SCSS |
$color-text |
Secondary text
| HTML |
#666666 |
| RGB |
102,102,102 |
| SCSS |
$color-secondary-text |
Hint text
| HTML |
#CCCCCC |
| RGB |
204,204,204 |
| SCSS |
$color-hint-text |
Blue
| HTML |
#4263C2 |
| RGB |
66,99,194 |
| SCSS |
$color-blue |
Background elements
White
| HTML |
#FFFFFF |
| RGB |
255,255,255 |
| SCSS |
$color-white |
Borders
| HTML |
#999999 |
| RGB |
153,153,153 |
| SCSS |
$color-dark-grey, $color-border |
Backgrounds
| HTML |
#e4e8eb |
| RGB |
228,232,235 |
| SCSS |
$color-light-grey |
Panels
A
Success
| HTML |
#0F8243 |
| RGB |
15,130,67 |
| SCSS |
$color-success |
A
Success (background)
| HTML |
#EDF4F0 |
| RGB |
237,244,240 |
| SCSS |
$color-light-green |
A
Secondary
| HTML |
#033E58 |
| RGB |
3,62,88 |
| SCSS |
$color-secondary |
A
Highlight (background)
| HTML |
#EFF0F9 |
| RGB |
239,240,249 |
| SCSS |
$color-light-blue |
A
Error
| HTML |
#D0021B |
| RGB |
208,18,30 |
| SCSS |
$color-error |
A
Error (background)
| HTML |
#FBECEC |
| RGB |
251,236,236 |
| SCSS |
$color-error-bg |
A
Amber
| HTML |
#FE781F |
| RGB |
254,120,31 |
| SCSS |
$color-amber |
A
Light amber
| HTML |
#FDF6EC |
| RGB |
253,246,236 |
| SCSS |
$color-light-amber |
Secondary palette
The secondary colours are supplementary to the primary palette.
A
Slate
| HTML |
#5F7682 |
| RGB |
95,118,130 |
| SCSS |
$color-slate |
A
Blue (astral)
| HTML |
#3B7A9E |
| RGB |
59,122,158 |
| SCSS |
$color-blue-astral |
A
Teal
| HTML |
#008080 |
| RGB |
0,128,128 |
| SCSS |
$color-teal |
Census Purple
| HTML |
#6E2585 |
| RGB |
110,37,133 |
| SCSS |
$color-census-purple |
Research