Dark
$night-100
#D1DAE6
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$night-200
#B1BFCF
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$night-300
#8A9CB3
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$night-400
#657D99
WCAG Normal
AA
Fail
AA
Fail
WCAG Large
AA
Pass
AA
Pass
$night-500
#435B77
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Pass
AA
Pass
$night-600
#374B61
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass
$night-700
#2E3D4F
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass
$night-800
#212D3B
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass
$night-900
#15212D
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass
The dark palette is primarily used for interfaces that are adapting a night theme. Shades of it can be used as backgrounds, borders, and shadows to emphasise certain areas or set them apart.
Gray
$gray-50
#FAFAFA
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$gray-100
#F2F2F2
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$gray-200
#DFDFDF
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$gray-300
#CCCCCC
WCAG Normal
AA
Pass
AA
Fail
WCAG Large
AA
Pass
AA
Fail
$gray-400
#BABABA
WCAG Normal
AA
Fail
AA
Fail
WCAG Large
AA
Pass
AA
Pass
$gray-500
#A7A7A7
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Pass
AA
Pass
$gray-600
#919191
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass
$gray-700
#707070
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass
$gray-800
#4F4F4F
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass
$gray-900
#2E2E2E
WCAG Normal
AA
Fail
AA
Pass
WCAG Large
AA
Fail
AA
Pass
The neutral palette is primarily used within components to help differentiate hierarchy. Shades of gray can be used as backgrounds, borders, and shadows to emphasise certain areas or set them apart.