Primær- og sekundærfarger
#233264
$dark-blue
#3c78b4
$blue
$blue-interactive
$selection-background-color
$link-hover-color
#f07850
$orange
#f0c8a0
$yellow
#fad2e6
$pink
#a0d2b4
$green
Interaktive/hover/aktive varianter
#0b2251
$dark-blue--deep
#1368a0
$blue--deep
$blue-interactive-hover
$link-color
#ef542b
$orange--deep
#edaf77
$yellow--deep
#f7a9d3
$pink--deep
#80cea0
$green--deep
#647092
$dark-blue--fade
#77a0cb
$blue--fade
$light-blue
#f5a084
$orange--fade
#f4d8bc
$yellow--fade
$focus-background-color
$light-yellow
#fbdfed
$pink--fade
$light-red
#bddfcb
$green--fade
Bakgrunnsskygger
#dedfe7
$dark-blue--pale
$white--dark-blue
$pale-blue
#dae3ef
$blue--pale
$white--blue
$tint-blue
$light-blue-interactive
$lighter-blue
#f4dcd3
$orange--pale
#f9efe4
$yellow--pale
#f9ecf4
$pink--pale
$light-pink
#e5f1ea
$green--pale
$light-green
Gråtoner og tekst
#f8f8f8
$deactive-element
#bfbfbf
$deactive
#222222
$primary-text
#757575
$secondary-text
#acb3c8
$dark-text-secondary
#707c9e
$dark-text-deactive
Andre farger
#cc0058
$red
#e60063
$error-red-hover
Kontrastnivåer for tekst vs. bakgrunn
Background
Text
|
black
|
white
|
$dark-blue
|
$blue
|
$orange
|
$yellow
|
$pink
|
$green
|
$red
|
---|---|---|---|---|---|---|---|---|---|
white
|
21
AAA
|
12.2
AAA
|
4.6
AA
|
2.8
DNP
|
1.5
DNP
|
1.3
DNP
|
1.7
DNP
|
5.6
AA
|
|
black
|
21
AAA
|
1.7
DNP
|
4.5
AA
|
7.5
AAA
|
13.4
AAA
|
15.4
AAA
|
12.3
AAA
|
3.7
AA18
|
|
$dark-blue
|
1.7
DNP
|
12.2
AAA
|
2.6
DNP
|
4.3
AA18
|
7.8
AAA
|
9
AAA
|
7.2
AAA
|
2.1
DNP
|
|
$blue
|
4.5
AA
|
4.6
AA
|
2.6
DNP
|
1.6
DNP
|
2.9
DNP
|
3.4
AA18
|
2.7
DNP
|
1.2
DNP
|
|
$orange
|
7.5
AAA
|
2.8
DNP
|
4.3
AA18
|
1.6
DNP
|
1.7
DNP
|
2
DNP
|
1.6
DNP
|
2
DNP
|
|
$yellow
|
13.4
AAA
|
1.5
DNP
|
7.8
AAA
|
2.9
DNP
|
1.7
DNP
|
1.1
DNP
|
1
DNP
|
3.6
AA18
|
|
$pink
|
15.4
AAA
|
1.3
DNP
|
9
AAA
|
3.4
AA18
|
2
DNP
|
1.1
DNP
|
1.2
DNP
|
4.1
AA18
|
|
$green
|
12.3
AAA
|
1.7
DNP
|
7.2
AAA
|
2.7
DNP
|
1.6
DNP
|
1
DNP
|
1.2
DNP
|
3.3
AA18
|
|
$dark-blue--deep
|
1.3
DNP
|
15.4
AAA
|
1.2
DNP
|
3.3
AA18
|
5.5
AA
|
9.8
AAA
|
11.3
AAA
|
9
AAA
|
2.7
DNP
|
$blue--deep
|
3.5
AA18
|
5.9
AA
|
2
DNP
|
1.2
DNP
|
2.1
DNP
|
3.8
AA18
|
4.3
AA18
|
3.5
AA18
|
1
DNP
|
$orange--deep
|
5.9
AA
|
3.5
AA18
|
3.4
AA18
|
1.3
DNP
|
1.2
DNP
|
2.2
DNP
|
2.5
DNP
|
2
DNP
|
1.6
DNP
|
$yellow--deep
|
11
AAA
|
1.9
DNP
|
6.4
AA
|
2.4
DNP
|
1.4
DNP
|
1.2
DNP
|
1.4
DNP
|
1.1
DNP
|
2.9
DNP
|
$pink--deep
|
11.5
AAA
|
1.8
DNP
|
6.7
AA
|
2.5
DNP
|
1.5
DNP
|
1.1
DNP
|
1.3
DNP
|
1
DNP
|
3.1
AA18
|
$green--deep
|
11.2
AAA
|
1.8
DNP
|
6.5
AA
|
2.4
DNP
|
1.5
DNP
|
1.2
DNP
|
1.3
DNP
|
1.1
DNP
|
3
AA18
|
$dark-blue--fade
|
4.2
AA18
|
4.9
AA
|
2.5
DNP
|
1
DNP
|
1.7
DNP
|
3.1
AA18
|
3.6
AA18
|
2.8
DNP
|
1.1
DNP
|
$blue--fade
|
7.6
AAA
|
2.7
DNP
|
4.4
AA18
|
1.6
DNP
|
1
DNP
|
1.7
DNP
|
2
DNP
|
1.6
DNP
|
2
DNP
|
$orange--fade
|
10
AAA
|
2
DNP
|
5.9
AA
|
2.2
DNP
|
1.3
DNP
|
1.3
DNP
|
1.5
DNP
|
1.2
DNP
|
2.7
DNP
|
$yellow--fade
|
15.4
AAA
|
1.3
DNP
|
8.9
AAA
|
3.3
AA18
|
2
DNP
|
1.1
DNP
|
1
DNP
|
1.2
DNP
|
4.1
AA18
|
$pink--fade
|
16.8
AAA
|
1.2
DNP
|
9.8
AAA
|
3.7
AA18
|
2.2
DNP
|
1.2
DNP
|
1
DNP
|
1.3
DNP
|
4.5
AA
|
$green--fade
|
14.5
AAA
|
1.4
DNP
|
8.5
AAA
|
3.2
AA18
|
1.9
DNP
|
1
DNP
|
1
DNP
|
1.1
DNP
|
3.9
AA18
|
$dark-blue--pale
|
15.8
AAA
|
1.3
DNP
|
9.2
AAA
|
3.4
AA18
|
2.1
DNP
|
1.1
DNP
|
1
DNP
|
1.2
DNP
|
4.2
AA18
|
$blue--pale
|
16.2
AAA
|
1.3
DNP
|
9.4
AAA
|
3.5
AA18
|
2.1
DNP
|
1.2
DNP
|
1
DNP
|
1.3
DNP
|
4.3
AA18
|
$orange--pale
|
16
AAA
|
1.3
DNP
|
9.3
AAA
|
3.5
AA18
|
2.1
DNP
|
1.1
DNP
|
1
DNP
|
1.3
DNP
|
4.3
AA18
|
$yellow--pale
|
18.4
AAA
|
1.1
DNP
|
10.8
AAA
|
4
AA18
|
2.4
DNP
|
1.3
DNP
|
1.2
DNP
|
1.4
DNP
|
4.9
AA
|
$pink--pale
|
18.3
AAA
|
1.1
DNP
|
10
AAA
|
4
AA18
|
2.4
DNP
|
1.3
DNP
|
1.1
DNP
|
1.4
DNP
|
4.9
AA
|
$green--pale
|
18.1
AAA
|
1.1
DNP
|
10
AAA
|
3.9
AA18
|
2.4
DNP
|
1.3
DNP
|
1.1
DNP
|
1.4
DNP
|
4.8
AA
|
$red
|
3.7
AA18
|
5.6
AA
|
2.1
DNP
|
1.2
DNP
|
2
DNP
|
3.6
AA18
|
4.1
AA18
|
3.3
AA18
|
About WCAG 2.0
contrast.
Ref.
contrast-grid.eightshapes.com.