Variables: Colors
All color combinations should adhere to the WCAG 2.0 AA standard.
Base color variables
-
--au-white
#FFFFFF
AA contrast:
--au-gray-700 or higher
Gray color variables
-
--au-gray-100
#F7F9FC
AA contrast:
--au-gray-700 or higher -
--au-gray-200
#e8ebee
AA contrast:
--au-gray-900 or higher -
--au-gray-300
#CFD5DD
AA contrast:
--au-gray-900 or higher -
--au-gray-500
#8695A8
AA contrast:
non-textual elements only -
--au-gray-700
#687483
AA contrast:
--au-gray-100 or lower -
--au-gray-900
#333332
AA contrast:
--au-gray-100 or lower -
--au-gray-1000
#000000
AA contrast:
--au-gray-100 or lower
Blue color variables
-
--au-blue-200
#E4EBF5
AA contrast:
--au-blue-700 or higher -
--au-blue-300
#B2CCEF
AA contrast:
--au-blue-900 or higher -
--au-blue-500
#5990DE
AA contrast:
non-textual elements only -
--au-blue-700
#0055CC
AA contrast:
--au-blue-100 or lower -
--au-blue-900
#003B8E
AA contrast:
--au-blue-100 or lower
Yellow color variables
-
--au-yellow-300
#FFE615
AA contrast:
non-textual elements only
Orange color variables
-
--au-orange-200
#fff9e8
AA contrast:
--au-orange-700 or higher -
--au-orange-300
#FFEEB9
AA contrast:
--au-orange-700 or higher -
--au-orange-400
#FFE49C
AA contrast:
--au-gray-900 or higher -
--au-orange-500
#FFA10A
AA contrast:
non-textual elements only -
--au-orange-600
#D07B06
AA contrast:
non-textual elements only -
--au-orange-700
#9F5804
AA contrast:
--au-orange-100 or lower
Red color variables
-
--au-red-200
#FBEDED
AA contrast:
--au-red-700 or higher -
--au-red-300
#F4C8C9
AA contrast:
--au-red-700 or higher -
--au-red-400
#F1AEAE
AA contrast:
--au-red-900 or higher -
--au-red-600
#D2373C
AA contrast:
--au-red-100 or lower -
--au-red-700
#AA2729
AA contrast:
--au-red-100 or lower
Green color variables
-
--au-green-200
#ecf6ee
AA contrast:
--au-green-700 or higher -
--au-green-300
#C5E5CC
AA contrast:
--au-gray-900 or higher -
--au-green-400
#b1dcbb
AA contrast:
--au-gray-900 or higher -
--au-green-500
#009E47
AA contrast:
non-textual elements only -
--au-green-700
#007A37
AA contrast:
--au-green-100 or lower
VL secondary color variables
-
--vl-lime-100
#A3CC00
AA contrast:
non-textual elements only -
--vl-lime-120
#6F8B00
AA contrast:
non-textual elements only -
--vl-brick-100
#D53D5E
AA contrast:
--au-gray-100 or lower -
--vl-brick-120
#85273B
AA contrast:
--au-gray-100 or lower -
--vl-chocolate-100
#D26E25
AA contrast:
non-textual elements only -
--vl-chocolate-120
#904E1D
AA contrast:
--au-gray-100 or lower -
--vl-picton-100
#32B1E9
AA contrast:
non-textual elements only -
--vl-picton-120
#16465B
AA contrast:
--au-gray-100 or lower