root / acorn / accessibility

Accessibility

Text and background combination guidance

Use level 100 for text on backgrounds of levels 0-40.

Use level 0 for text (dark mode) on backgrounds of levels 80-100.

neutral

100 on 0
Hello
WCAG
13.88
AAA
Lc
96.08%
100 on 10
Hello
WCAG
11.25
AAA
Lc
82.67%
100 on 20
Hello
WCAG
8.95
AAA
Lc
69.74%
100 on 30
Hello
WCAG
7.06
AAA
Lc
57.84%
100 on 40
Hello
WCAG
5.44
AA
Lc
46.43%
0 on 70
Hello
WCAG
6.04
AA
Lc
-81.08%
0 on 80
Hello
WCAG
8.13
AAA
Lc
-88.17%
0 on 90
Hello
WCAG
10.76
AAA
Lc
-94.00%
0 on 100
Hello
WCAG
13.88
AAA
Lc
-98.21%
0 on 110
Hello
WCAG
16.60
AAA
Lc
-100.38%

cool

100 on 0
Hello
WCAG
13.74
AAA
Lc
95.78%
100 on 10
Hello
WCAG
11.13
AAA
Lc
82.38%
100 on 20
Hello
WCAG
8.88
AAA
Lc
69.57%
100 on 30
Hello
WCAG
6.98
AA
Lc
57.56%
100 on 40
Hello
WCAG
5.40
AA
Lc
46.27%
0 on 70
Hello
WCAG
5.96
AA
Lc
-80.64%
0 on 80
Hello
WCAG
8.13
AAA
Lc
-88.03%
0 on 90
Hello
WCAG
10.75
AAA
Lc
-93.86%
0 on 100
Hello
WCAG
13.74
AAA
Lc
-97.92%
0 on 110
Hello
WCAG
16.59
AAA
Lc
-100.22%

warm

100 on 0
Hello
WCAG
13.78
AAA
Lc
95.89%
100 on 10
Hello
WCAG
11.17
AAA
Lc
82.49%
100 on 20
Hello
WCAG
8.89
AAA
Lc
69.56%
100 on 30
Hello
WCAG
7.01
AAA
Lc
57.66%
100 on 40
Hello
WCAG
5.40
AA
Lc
46.27%
0 on 70
Hello
WCAG
5.97
AA
Lc
-80.73%
0 on 80
Hello
WCAG
8.15
AAA
Lc
-88.17%
0 on 90
Hello
WCAG
10.78
AAA
Lc
-93.99%
0 on 100
Hello
WCAG
13.78
AAA
Lc
-98.03%
0 on 110
Hello
WCAG
16.61
AAA
Lc
-100.31%

red

100 on 0
Hello
WCAG
13.41
AAA
Lc
91.03%
100 on 10
Hello
WCAG
10.37
AAA
Lc
75.48%
100 on 20
Hello
WCAG
8.10
AAA
Lc
62.55%
100 on 30
Hello
WCAG
6.44
AA
Lc
52.08%
100 on 40
Hello
WCAG
5.16
AA
Lc
43.33%
0 on 70
Hello
WCAG
6.10
AA
Lc
-75.62%
0 on 80
Hello
WCAG
8.10
AAA
Lc
-82.43%
0 on 90
Hello
WCAG
10.69
AAA
Lc
-88.38%
0 on 100
Hello
WCAG
13.41
AAA
Lc
-92.81%
0 on 110
Hello
WCAG
15.65
AAA
Lc
-95.30%

orange

100 on 0
Hello
WCAG
13.46
AAA
Lc
92.45%
100 on 10
Hello
WCAG
10.63
AAA
Lc
77.95%
100 on 20
Hello
WCAG
8.39
AAA
Lc
65.28%
100 on 30
Hello
WCAG
6.77
AA
Lc
55.21%
100 on 40
Hello
WCAG
5.25
AA
Lc
44.64%
0 on 70
Hello
WCAG
6.07
AA
Lc
-77.39%
0 on 80
Hello
WCAG
8.09
AAA
Lc
-84.25%
0 on 90
Hello
WCAG
10.66
AAA
Lc
-90.05%
0 on 100
Hello
WCAG
13.46
AAA
Lc
-94.33%
0 on 110
Hello
WCAG
15.88
AAA
Lc
-96.68%

yellow

100 on 0
Hello
WCAG
13.76
AAA
Lc
95.14%
100 on 10
Hello
WCAG
12.27
AAA
Lc
87.70%
100 on 20
Hello
WCAG
9.84
AAA
Lc
74.67%
100 on 30
Hello
WCAG
7.83
AAA
Lc
62.83%
100 on 40
Hello
WCAG
6.10
AA
Lc
51.24%
0 on 70
Hello
WCAG
5.28
AA
Lc
-76.58%
0 on 80
Hello
WCAG
8.13
AAA
Lc
-87.23%
0 on 90
Hello
WCAG
10.80
AAA
Lc
-93.14%
0 on 100
Hello
WCAG
13.76
AAA
Lc
-97.29%
0 on 110
Hello
WCAG
16.46
AAA
Lc
-99.63%

green

100 on 0
Hello
WCAG
13.45
AAA
Lc
95.96%
100 on 10
Hello
WCAG
11.05
AAA
Lc
83.32%
100 on 20
Hello
WCAG
8.94
AAA
Lc
71.15%
100 on 30
Hello
WCAG
7.11
AAA
Lc
59.48%
100 on 40
Hello
WCAG
5.57
AA
Lc
48.60%
0 on 70
Hello
WCAG
5.38
AA
Lc
-78.08%
0 on 80
Hello
WCAG
7.43
AAA
Lc
-86.35%
0 on 90
Hello
WCAG
10.17
AAA
Lc
-93.25%
0 on 100
Hello
WCAG
13.45
AAA
Lc
-98.45%
0 on 110
Hello
WCAG
16.67
AAA
Lc
-101.42%

cyan

100 on 0
Hello
WCAG
12.73
AAA
Lc
94.57%
100 on 10
Hello
WCAG
10.45
AAA
Lc
81.95%
100 on 20
Hello
WCAG
8.48
AAA
Lc
70.12%
100 on 30
Hello
WCAG
6.87
AA
Lc
59.73%
100 on 40
Hello
WCAG
5.83
AA
Lc
52.03%
0 on 70
Hello
WCAG
4.79
AA
Lc
-74.45%
0 on 80
Hello
WCAG
6.70
AA
Lc
-83.57%
0 on 90
Hello
WCAG
9.35
AAA
Lc
-91.14%
0 on 100
Hello
WCAG
12.73
AAA
Lc
-97.13%
0 on 110
Hello
WCAG
16.33
AAA
Lc
-100.55%

blue

100 on 0
Hello
WCAG
13.76
AAA
Lc
94.75%
100 on 10
Hello
WCAG
10.67
AAA
Lc
78.95%
100 on 20
Hello
WCAG
8.34
AAA
Lc
65.51%
100 on 30
Hello
WCAG
6.46
AA
Lc
53.46%
100 on 40
Hello
WCAG
4.99
AA
Lc
42.84%
0 on 70
Hello
WCAG
6.12
AA
Lc
-79.79%
0 on 80
Hello
WCAG
8.28
AAA
Lc
-86.97%
0 on 90
Hello
WCAG
10.91
AAA
Lc
-92.76%
0 on 100
Hello
WCAG
13.76
AAA
Lc
-96.85%
0 on 110
Hello
WCAG
16.45
AAA
Lc
-99.27%

violet

100 on 0
Hello
WCAG
13.85
AAA
Lc
94.39%
100 on 10
Hello
WCAG
10.67
AAA
Lc
78.21%
100 on 20
Hello
WCAG
8.30
AAA
Lc
64.71%
100 on 30
Hello
WCAG
6.38
AA
Lc
52.36%
100 on 40
Hello
WCAG
4.93
AA
Lc
41.93%
0 on 70
Hello
WCAG
6.44
AA
Lc
-80.71%
0 on 80
Hello
WCAG
8.49
AAA
Lc
-87.12%
0 on 90
Hello
WCAG
11.09
AAA
Lc
-92.63%
0 on 100
Hello
WCAG
13.85
AAA
Lc
-96.32%
0 on 110
Hello
WCAG
16.32
AAA
Lc
-98.45%

purple

100 on 0
Hello
WCAG
13.96
AAA
Lc
94.20%
100 on 10
Hello
WCAG
11.09
AAA
Lc
79.87%
100 on 20
Hello
WCAG
8.79
AAA
Lc
67.15%
100 on 30
Hello
WCAG
6.82
AA
Lc
55.03%
100 on 40
Hello
WCAG
5.20
AA
Lc
43.67%
0 on 70
Hello
WCAG
6.52
AA
Lc
-80.48%
0 on 80
Hello
WCAG
8.65
AAA
Lc
-87.04%
0 on 90
Hello
WCAG
11.22
AAA
Lc
-92.39%
0 on 100
Hello
WCAG
13.96
AAA
Lc
-96.11%
0 on 110
Hello
WCAG
16.33
AAA
Lc
-98.24%

pink

100 on 0
Hello
WCAG
13.56
AAA
Lc
91.65%
100 on 10
Hello
WCAG
10.48
AAA
Lc
76.04%
100 on 20
Hello
WCAG
8.25
AAA
Lc
63.42%
100 on 30
Hello
WCAG
6.62
AA
Lc
53.34%
100 on 40
Hello
WCAG
5.16
AA
Lc
43.25%
0 on 70
Hello
WCAG
6.20
AA
Lc
-76.43%
0 on 80
Hello
WCAG
8.27
AAA
Lc
-83.31%
0 on 90
Hello
WCAG
10.80
AAA
Lc
-89.00%
0 on 100
Hello
WCAG
13.56
AAA
Lc
-93.43%
0 on 110
Hello
WCAG
15.81
AAA
Lc
-95.82%

Colorful text on default layers guidance

The following guidance applies to colorful text usage on top of our default layer background colors known as canvas and box.

Canvas is the equivalent of the body background color for in-content pages, as well as for any overlay (e.g. panel, modal) background colors for the chrome.

Box is the equivalent of containers / cards.

On canvas

neutral

0 on 100
Hello
WCAG
13.88
AAA
Lc
-98.21%
10 on 100
Hello
WCAG
11.25
AAA
Lc
-83.55%
20 on 100
Hello
WCAG
8.95
AAA
Lc
-69.62%
30 on 100
Hello
WCAG
7.06
AAA
Lc
-57.01%
80 on 0
Hello
WCAG
6.59
AA
Lc
70.94%
90 on 0
Hello
WCAG
8.72
AAA
Lc
77.60%
100 on 0
Hello
WCAG
11.25
AAA
Lc
82.67%
110 on 0
Hello
WCAG
13.45
AAA
Lc
85.45%

cool

0 on 100
Hello
WCAG
13.85
AAA
Lc
-98.03%
10 on 100
Hello
WCAG
11.22
AAA
Lc
-83.39%
20 on 100
Hello
WCAG
8.95
AAA
Lc
-69.59%
30 on 100
Hello
WCAG
7.04
AAA
Lc
-56.86%
80 on 0
Hello
WCAG
6.60
AA
Lc
70.99%
90 on 0
Hello
WCAG
8.73
AAA
Lc
77.63%
100 on 0
Hello
WCAG
11.16
AAA
Lc
82.53%
110 on 0
Hello
WCAG
13.47
AAA
Lc
85.47%

warm

0 on 100
Hello
WCAG
13.86
AAA
Lc
-98.12%
10 on 100
Hello
WCAG
11.23
AAA
Lc
-83.47%
20 on 100
Hello
WCAG
8.94
AAA
Lc
-69.54%
30 on 100
Hello
WCAG
7.05
AAA
Lc
-56.94%
80 on 0
Hello
WCAG
6.62
AA
Lc
71.05%
90 on 0
Hello
WCAG
8.75
AAA
Lc
77.68%
100 on 0
Hello
WCAG
11.18
AAA
Lc
82.57%
110 on 0
Hello
WCAG
13.48
AAA
Lc
85.47%

red

0 on 100
Hello
WCAG
12.96
AAA
Lc
-93.22%
10 on 100
Hello
WCAG
10.02
AAA
Lc
-76.32%
20 on 100
Hello
WCAG
7.83
AAA
Lc
-62.52%
30 on 100
Hello
WCAG
6.22
AA
Lc
-51.52%
80 on 0
Hello
WCAG
7.03
AAA
Lc
70.11%
90 on 0
Hello
WCAG
9.28
AAA
Lc
76.85%
100 on 0
Hello
WCAG
11.64
AAA
Lc
82.17%
110 on 0
Hello
WCAG
13.58
AAA
Lc
85.32%

orange

0 on 100
Hello
WCAG
13.21
AAA
Lc
-94.62%
10 on 100
Hello
WCAG
10.43
AAA
Lc
-78.83%
20 on 100
Hello
WCAG
8.24
AAA
Lc
-65.26%
30 on 100
Hello
WCAG
6.65
AA
Lc
-54.63%
80 on 0
Hello
WCAG
6.89
AA
Lc
70.58%
90 on 0
Hello
WCAG
9.07
AAA
Lc
77.18%
100 on 0
Hello
WCAG
11.46
AAA
Lc
82.31%
110 on 0
Hello
WCAG
13.52
AAA
Lc
85.30%

yellow

0 on 100
Hello
WCAG
13.77
AAA
Lc
-97.61%
10 on 100
Hello
WCAG
12.27
AAA
Lc
-89.46%
20 on 100
Hello
WCAG
9.84
AAA
Lc
-75.34%
30 on 100
Hello
WCAG
7.83
AAA
Lc
-62.69%
80 on 0
Hello
WCAG
6.64
AA
Lc
70.57%
90 on 0
Hello
WCAG
8.82
AAA
Lc
77.29%
100 on 0
Hello
WCAG
11.24
AAA
Lc
82.28%
110 on 0
Hello
WCAG
13.45
AAA
Lc
85.25%

green

0 on 100
Hello
WCAG
14.12
AAA
Lc
-99.49%
10 on 100
Hello
WCAG
11.60
AAA
Lc
-85.65%
20 on 100
Hello
WCAG
9.38
AAA
Lc
-72.51%
30 on 100
Hello
WCAG
7.46
AAA
Lc
-60.10%
80 on 0
Hello
WCAG
5.92
AA
Lc
67.53%
90 on 0
Hello
WCAG
8.10
AAA
Lc
75.23%
100 on 0
Hello
WCAG
10.72
AAA
Lc
81.38%
110 on 0
Hello
WCAG
13.28
AAA
Lc
85.12%

cyan

0 on 100
Hello
WCAG
13.98
AAA
Lc
-98.78%
10 on 100
Hello
WCAG
11.48
AAA
Lc
-84.96%
20 on 100
Hello
WCAG
9.31
AAA
Lc
-72.19%
30 on 100
Hello
WCAG
7.55
AAA
Lc
-61.13%
80 on 0
Hello
WCAG
5.39
AA
Lc
65.30%
90 on 0
Hello
WCAG
7.52
AAA
Lc
73.65%
100 on 0
Hello
WCAG
10.24
AAA
Lc
80.65%
110 on 0
Hello
WCAG
13.14
AAA
Lc
84.93%

blue

0 on 100
Hello
WCAG
13.68
AAA
Lc
-97.13%
10 on 100
Hello
WCAG
10.62
AAA
Lc
-79.90%
20 on 100
Hello
WCAG
8.29
AAA
Lc
-65.49%
30 on 100
Hello
WCAG
6.43
AA
Lc
-52.79%
80 on 0
Hello
WCAG
6.81
AA
Lc
70.81%
90 on 0
Hello
WCAG
8.97
AAA
Lc
77.40%
100 on 0
Hello
WCAG
11.31
AAA
Lc
82.33%
110 on 0
Hello
WCAG
13.53
AAA
Lc
85.40%

violet

0 on 100
Hello
WCAG
13.52
AAA
Lc
-96.24%
10 on 100
Hello
WCAG
10.41
AAA
Lc
-78.62%
20 on 100
Hello
WCAG
8.10
AAA
Lc
-64.16%
30 on 100
Hello
WCAG
6.22
AA
Lc
-51.18%
80 on 0
Hello
WCAG
7.07
AAA
Lc
71.97%
90 on 0
Hello
WCAG
9.23
AAA
Lc
78.30%
100 on 0
Hello
WCAG
11.53
AAA
Lc
82.77%
110 on 0
Hello
WCAG
13.58
AAA
Lc
85.50%

purple

0 on 100
Hello
WCAG
13.47
AAA
Lc
-96.01%
10 on 100
Hello
WCAG
10.70
AAA
Lc
-80.39%
20 on 100
Hello
WCAG
8.48
AAA
Lc
-66.73%
30 on 100
Hello
WCAG
6.59
AA
Lc
-53.95%
80 on 0
Hello
WCAG
7.22
AAA
Lc
72.13%
90 on 0
Hello
WCAG
9.37
AAA
Lc
78.28%
100 on 0
Hello
WCAG
11.65
AAA
Lc
82.79%
110 on 0
Hello
WCAG
13.64
AAA
Lc
85.52%

pink

0 on 100
Hello
WCAG
13.04
AAA
Lc
-93.69%
10 on 100
Hello
WCAG
10.08
AAA
Lc
-76.72%
20 on 100
Hello
WCAG
7.93
AAA
Lc
-63.23%
30 on 100
Hello
WCAG
6.37
AA
Lc
-52.63%
80 on 0
Hello
WCAG
7.13
AAA
Lc
70.58%
90 on 0
Hello
WCAG
9.31
AAA
Lc
77.04%
100 on 0
Hello
WCAG
11.69
AAA
Lc
82.36%
110 on 0
Hello
WCAG
13.63
AAA
Lc
85.40%

On box

neutral

0 on 100
Hello
WCAG
13.88
AAA
Lc
-98.21%
10 on 100
Hello
WCAG
11.25
AAA
Lc
-83.55%
20 on 100
Hello
WCAG
8.95
AAA
Lc
-69.62%
30 on 100
Hello
WCAG
7.06
AAA
Lc
-57.01%
40 on 100
Hello
WCAG
5.44
AA
Lc
-45.14%
70 on 20
Hello
WCAG
6.04
AA
Lc
76.65%
80 on 20
Hello
WCAG
8.13
AAA
Lc
84.35%
90 on 20
Hello
WCAG
10.76
AAA
Lc
91.00%
100 on 20
Hello
WCAG
13.88
AAA
Lc
96.08%
110 on 20
Hello
WCAG
16.60
AAA
Lc
98.85%

cool

0 on 100
Hello
WCAG
13.85
AAA
Lc
-98.03%
10 on 100
Hello
WCAG
11.22
AAA
Lc
-83.39%
20 on 100
Hello
WCAG
8.95
AAA
Lc
-69.59%
30 on 100
Hello
WCAG
7.04
AAA
Lc
-56.86%
40 on 100
Hello
WCAG
5.44
AA
Lc
-45.12%
70 on 20
Hello
WCAG
5.98
AA
Lc
76.36%
80 on 20
Hello
WCAG
8.14
AAA
Lc
84.40%
90 on 20
Hello
WCAG
10.77
AAA
Lc
91.04%
100 on 20
Hello
WCAG
13.77
AAA
Lc
95.94%
110 on 20
Hello
WCAG
16.63
AAA
Lc
98.87%

warm

0 on 100
Hello
WCAG
13.86
AAA
Lc
-98.12%
10 on 100
Hello
WCAG
11.23
AAA
Lc
-83.47%
20 on 100
Hello
WCAG
8.94
AAA
Lc
-69.54%
30 on 100
Hello
WCAG
7.05
AAA
Lc
-56.94%
40 on 100
Hello
WCAG
5.44
AA
Lc
-45.08%
70 on 20
Hello
WCAG
5.98
AA
Lc
76.37%
80 on 20
Hello
WCAG
8.16
AAA
Lc
84.45%
90 on 20
Hello
WCAG
10.80
AAA
Lc
91.09%
100 on 20
Hello
WCAG
13.80
AAA
Lc
95.98%
110 on 20
Hello
WCAG
16.63
AAA
Lc
98.88%

red

0 on 100
Hello
WCAG
12.96
AAA
Lc
-93.22%
10 on 100
Hello
WCAG
10.02
AAA
Lc
-76.32%
20 on 100
Hello
WCAG
7.83
AAA
Lc
-62.52%
30 on 100
Hello
WCAG
6.22
AA
Lc
-51.52%
40 on 100
Hello
WCAG
4.99
AA
Lc
-42.47%
70 on 20
Hello
WCAG
6.53
AA
Lc
76.15%
80 on 20
Hello
WCAG
8.67
AAA
Lc
83.52%
90 on 20
Hello
WCAG
11.45
AAA
Lc
90.26%
100 on 20
Hello
WCAG
14.37
AAA
Lc
95.57%
110 on 20
Hello
WCAG
16.76
AAA
Lc
98.73%

orange

0 on 100
Hello
WCAG
13.21
AAA
Lc
-94.62%
10 on 100
Hello
WCAG
10.43
AAA
Lc
-78.83%
20 on 100
Hello
WCAG
8.24
AAA
Lc
-65.26%
30 on 100
Hello
WCAG
6.65
AA
Lc
-54.63%
40 on 100
Hello
WCAG
5.16
AA
Lc
-43.67%
70 on 20
Hello
WCAG
6.37
AA
Lc
76.55%
80 on 20
Hello
WCAG
8.50
AAA
Lc
83.98%
90 on 20
Hello
WCAG
11.20
AAA
Lc
90.59%
100 on 20
Hello
WCAG
14.14
AAA
Lc
95.72%
110 on 20
Hello
WCAG
16.68
AAA
Lc
98.71%

yellow

0 on 100
Hello
WCAG
13.77
AAA
Lc
-97.61%
10 on 100
Hello
WCAG
12.27
AAA
Lc
-89.46%
20 on 100
Hello
WCAG
9.84
AAA
Lc
-75.34%
30 on 100
Hello
WCAG
7.83
AAA
Lc
-62.69%
40 on 100
Hello
WCAG
6.10
AA
Lc
-50.53%
70 on 20
Hello
WCAG
5.32
AA
Lc
72.54%
80 on 20
Hello
WCAG
8.20
AAA
Lc
83.98%
90 on 20
Hello
WCAG
10.89
AAA
Lc
90.70%
100 on 20
Hello
WCAG
13.87
AAA
Lc
95.68%
110 on 20
Hello
WCAG
16.60
AAA
Lc
98.66%

green

0 on 100
Hello
WCAG
14.12
AAA
Lc
-99.49%
10 on 100
Hello
WCAG
11.60
AAA
Lc
-85.65%
20 on 100
Hello
WCAG
9.38
AAA
Lc
-72.51%
30 on 100
Hello
WCAG
7.46
AAA
Lc
-60.10%
40 on 100
Hello
WCAG
5.84
AA
Lc
-48.72%
70 on 20
Hello
WCAG
5.29
AA
Lc
72.13%
80 on 20
Hello
WCAG
7.30
AAA
Lc
80.94%
90 on 20
Hello
WCAG
10.00
AAA
Lc
88.64%
100 on 20
Hello
WCAG
13.23
AAA
Lc
94.79%
110 on 20
Hello
WCAG
16.38
AAA
Lc
98.53%

cyan

0 on 100
Hello
WCAG
13.98
AAA
Lc
-98.78%
10 on 100
Hello
WCAG
11.48
AAA
Lc
-84.96%
20 on 100
Hello
WCAG
9.31
AAA
Lc
-72.19%
30 on 100
Hello
WCAG
7.55
AAA
Lc
-61.13%
40 on 100
Hello
WCAG
6.40
AA
Lc
-53.05%
70 on 20
Hello
WCAG
4.75
AA
Lc
69.12%
80 on 20
Hello
WCAG
6.66
AA
Lc
78.70%
90 on 20
Hello
WCAG
9.28
AAA
Lc
87.05%
100 on 20
Hello
WCAG
12.64
AAA
Lc
94.06%
110 on 20
Hello
WCAG
16.21
AAA
Lc
98.33%

blue

0 on 100
Hello
WCAG
13.68
AAA
Lc
-97.13%
10 on 100
Hello
WCAG
10.62
AAA
Lc
-79.90%
20 on 100
Hello
WCAG
8.29
AAA
Lc
-65.49%
30 on 100
Hello
WCAG
6.43
AA
Lc
-52.79%
40 on 100
Hello
WCAG
4.97
AA
Lc
-41.81%
70 on 20
Hello
WCAG
6.21
AA
Lc
76.42%
80 on 20
Hello
WCAG
8.40
AAA
Lc
84.22%
90 on 20
Hello
WCAG
11.07
AAA
Lc
90.80%
100 on 20
Hello
WCAG
13.96
AAA
Lc
95.73%
110 on 20
Hello
WCAG
16.69
AAA
Lc
98.81%

violet

0 on 100
Hello
WCAG
13.52
AAA
Lc
-96.24%
10 on 100
Hello
WCAG
10.41
AAA
Lc
-78.62%
20 on 100
Hello
WCAG
8.10
AAA
Lc
-64.16%
30 on 100
Hello
WCAG
6.22
AA
Lc
-51.18%
40 on 100
Hello
WCAG
4.82
AA
Lc
-40.42%
70 on 20
Hello
WCAG
6.61
AA
Lc
78.35%
80 on 20
Hello
WCAG
8.72
AAA
Lc
85.38%
90 on 20
Hello
WCAG
11.39
AAA
Lc
91.70%
100 on 20
Hello
WCAG
14.22
AAA
Lc
96.17%
110 on 20
Hello
WCAG
16.76
AAA
Lc
98.90%

purple

0 on 100
Hello
WCAG
13.47
AAA
Lc
-96.01%
10 on 100
Hello
WCAG
10.70
AAA
Lc
-80.39%
20 on 100
Hello
WCAG
8.48
AAA
Lc
-66.73%
30 on 100
Hello
WCAG
6.59
AA
Lc
-53.95%
40 on 100
Hello
WCAG
5.02
AA
Lc
-42.18%
70 on 20
Hello
WCAG
6.71
AA
Lc
78.35%
80 on 20
Hello
WCAG
8.91
AAA
Lc
85.54%
90 on 20
Hello
WCAG
11.56
AAA
Lc
91.68%
100 on 20
Hello
WCAG
14.38
AAA
Lc
96.19%
110 on 20
Hello
WCAG
16.83
AAA
Lc
98.92%

pink

0 on 100
Hello
WCAG
13.04
AAA
Lc
-93.69%
10 on 100
Hello
WCAG
10.08
AAA
Lc
-76.72%
20 on 100
Hello
WCAG
7.93
AAA
Lc
-63.23%
30 on 100
Hello
WCAG
6.37
AA
Lc
-52.63%
40 on 100
Hello
WCAG
4.96
AA
Lc
-42.19%
70 on 20
Hello
WCAG
6.59
AA
Lc
76.51%
80 on 20
Hello
WCAG
8.80
AAA
Lc
83.98%
90 on 20
Hello
WCAG
11.49
AAA
Lc
90.44%
100 on 20
Hello
WCAG
14.43
AAA
Lc
95.76%
110 on 20
Hello
WCAG
16.82
AAA
Lc
98.81%

UI graphic element combinations guidance

Use levels 100 on backgrounds 0-40.

neutral

90 on 0
WCAG
10.76
AAA
Lc
91.00%
90 on 10
WCAG
8.72
AAA
Lc
77.60%
100 on 20
WCAG
8.95
AAA
Lc
69.74%
100 on 30
WCAG
7.06
AAA
Lc
57.84%
100 on 40
WCAG
5.44
AA
Lc
46.43%
0 on 70
WCAG
6.04
AA
Lc
-81.08%
10 on 80
WCAG
6.59
AA
Lc
-73.51%
10 on 90
WCAG
8.72
AAA
Lc
-79.34%
10 on 100
WCAG
11.25
AAA
Lc
-83.55%
10 on 110
WCAG
13.45
AAA
Lc
-85.72%

cool

90 on 0
WCAG
10.75
AAA
Lc
90.88%
90 on 10
WCAG
8.71
AAA
Lc
77.48%
100 on 20
WCAG
8.88
AAA
Lc
69.57%
100 on 30
WCAG
6.98
AA
Lc
57.56%
100 on 40
WCAG
5.40
AA
Lc
46.27%
0 on 70
WCAG
5.96
AA
Lc
-80.64%
10 on 80
WCAG
6.58
AA
Lc
-73.39%
10 on 90
WCAG
8.71
AAA
Lc
-79.21%
10 on 100
WCAG
11.13
AAA
Lc
-83.28%
10 on 110
WCAG
13.44
AAA
Lc
-85.57%

warm

90 on 0
WCAG
10.78
AAA
Lc
91.01%
90 on 10
WCAG
8.74
AAA
Lc
77.61%
100 on 20
WCAG
8.89
AAA
Lc
69.56%
100 on 30
WCAG
7.01
AAA
Lc
57.66%
100 on 40
WCAG
5.40
AA
Lc
46.27%
0 on 70
WCAG
5.97
AA
Lc
-80.73%
10 on 80
WCAG
6.61
AA
Lc
-73.52%
10 on 90
WCAG
8.74
AAA
Lc
-79.34%
10 on 100
WCAG
11.17
AAA
Lc
-83.38%
10 on 110
WCAG
13.46
AAA
Lc
-85.66%

red

90 on 0
WCAG
10.69
AAA
Lc
85.72%
90 on 10
WCAG
8.26
AAA
Lc
70.17%
100 on 20
WCAG
8.10
AAA
Lc
62.55%
100 on 30
WCAG
6.44
AA
Lc
52.08%
100 on 40
WCAG
5.16
AA
Lc
43.33%
0 on 70
WCAG
6.10
AA
Lc
-75.62%
10 on 80
WCAG
6.26
AA
Lc
-65.53%
10 on 90
WCAG
8.26
AAA
Lc
-71.48%
10 on 100
WCAG
10.37
AAA
Lc
-75.92%
10 on 110
WCAG
12.10
AAA
Lc
-78.40%

orange

90 on 0
WCAG
10.66
AAA
Lc
87.32%
90 on 10
WCAG
8.42
AAA
Lc
72.82%
100 on 20
WCAG
8.39
AAA
Lc
65.28%
100 on 30
WCAG
6.77
AA
Lc
55.21%
100 on 40
WCAG
5.25
AA
Lc
44.64%
0 on 70
WCAG
6.07
AA
Lc
-77.39%
10 on 80
WCAG
6.39
AA
Lc
-68.46%
10 on 90
WCAG
8.42
AAA
Lc
-74.27%
10 on 100
WCAG
10.63
AAA
Lc
-78.54%
10 on 110
WCAG
12.54
AAA
Lc
-80.89%

yellow

90 on 0
WCAG
10.80
AAA
Lc
90.15%
90 on 10
WCAG
9.63
AAA
Lc
82.72%
100 on 20
WCAG
9.84
AAA
Lc
74.67%
100 on 30
WCAG
7.83
AAA
Lc
62.83%
100 on 40
WCAG
6.10
AA
Lc
51.24%
0 on 70
WCAG
5.28
AA
Lc
-76.58%
10 on 80
WCAG
7.25
AAA
Lc
-79.08%
10 on 90
WCAG
9.63
AAA
Lc
-84.99%
10 on 100
WCAG
12.27
AAA
Lc
-89.14%
10 on 110
WCAG
14.68
AAA
Lc
-91.48%

green

90 on 0
WCAG
10.17
AAA
Lc
89.81%
90 on 10
WCAG
8.35
AAA
Lc
77.17%
100 on 20
WCAG
8.94
AAA
Lc
71.15%
100 on 30
WCAG
7.11
AAA
Lc
59.48%
100 on 40
WCAG
5.57
AA
Lc
48.60%
0 on 70
WCAG
5.38
AA
Lc
-78.08%
10 on 80
WCAG
6.10
AA
Lc
-72.51%
10 on 90
WCAG
8.35
AAA
Lc
-79.41%
10 on 100
WCAG
11.05
AAA
Lc
-84.61%
10 on 110
WCAG
13.69
AAA
Lc
-87.58%

cyan

90 on 0
WCAG
9.35
AAA
Lc
87.57%
90 on 10
WCAG
7.68
AAA
Lc
74.94%
100 on 20
WCAG
8.48
AAA
Lc
70.12%
100 on 30
WCAG
6.87
AA
Lc
59.73%
100 on 40
WCAG
5.83
AA
Lc
52.03%
0 on 70
WCAG
4.79
AA
Lc
-74.45%
10 on 80
WCAG
5.50
AA
Lc
-69.75%
10 on 90
WCAG
7.68
AAA
Lc
-77.33%
10 on 100
WCAG
10.45
AAA
Lc
-83.32%
10 on 110
WCAG
13.40
AAA
Lc
-86.73%

blue

90 on 0
WCAG
10.91
AAA
Lc
89.83%
90 on 10
WCAG
8.46
AAA
Lc
74.02%
100 on 20
WCAG
8.34
AAA
Lc
65.51%
100 on 30
WCAG
6.46
AA
Lc
53.46%
100 on 40
WCAG
4.99
AA
Lc
42.84%
0 on 70
WCAG
6.12
AA
Lc
-79.79%
10 on 80
WCAG
6.43
AA
Lc
-69.74%
10 on 90
WCAG
8.46
AAA
Lc
-75.52%
10 on 100
WCAG
10.67
AAA
Lc
-79.62%
10 on 110
WCAG
12.77
AAA
Lc
-82.04%

violet

90 on 0
WCAG
11.09
AAA
Lc
89.92%
90 on 10
WCAG
8.54
AAA
Lc
73.74%
100 on 20
WCAG
8.30
AAA
Lc
64.71%
100 on 30
WCAG
6.38
AA
Lc
52.36%
100 on 40
WCAG
4.93
AA
Lc
41.93%
0 on 70
WCAG
6.44
AA
Lc
-80.71%
10 on 80
WCAG
6.54
AA
Lc
-69.50%
10 on 90
WCAG
8.54
AAA
Lc
-75.01%
10 on 100
WCAG
10.67
AAA
Lc
-78.70%
10 on 110
WCAG
12.57
AAA
Lc
-80.83%

purple

90 on 0
WCAG
11.22
AAA
Lc
89.69%
90 on 10
WCAG
8.91
AAA
Lc
75.36%
100 on 20
WCAG
8.79
AAA
Lc
67.15%
100 on 30
WCAG
6.82
AA
Lc
55.03%
100 on 40
WCAG
5.20
AA
Lc
43.67%
0 on 70
WCAG
6.52
AA
Lc
-80.48%
10 on 80
WCAG
6.87
AA
Lc
-71.41%
10 on 90
WCAG
8.91
AAA
Lc
-76.76%
10 on 100
WCAG
11.09
AAA
Lc
-80.48%
10 on 110
WCAG
12.97
AAA
Lc
-82.61%

pink

90 on 0
WCAG
10.80
AAA
Lc
86.33%
90 on 10
WCAG
8.35
AAA
Lc
70.72%
100 on 20
WCAG
8.25
AAA
Lc
63.42%
100 on 30
WCAG
6.62
AA
Lc
53.34%
100 on 40
WCAG
5.16
AA
Lc
43.25%
0 on 70
WCAG
6.20
AA
Lc
-76.43%
10 on 80
WCAG
6.39
AA
Lc
-66.35%
10 on 90
WCAG
8.35
AAA
Lc
-72.04%
10 on 100
WCAG
10.48
AAA
Lc
-76.47%
10 on 110
WCAG
12.22
AAA
Lc
-78.86%

neutral

0 on 0
WCAG
13.88
AAA
Lc
-98.21%
10 on 0
WCAG
11.25
AAA
Lc
-83.55%
20 on 0
WCAG
8.95
AAA
Lc
-69.62%
30 on 0
WCAG
7.06
AAA
Lc
-57.01%
40 on 0
WCAG
5.44
AA
Lc
-45.14%
70 on 0
WCAG
4.89
AA
Lc
63.24%
80 on 0
WCAG
6.59
AA
Lc
70.94%
90 on 0
WCAG
8.72
AAA
Lc
77.60%
100 on 0
WCAG
11.25
AAA
Lc
82.67%
110 on 0
WCAG
13.45
AAA
Lc
85.45%

cool

0 on 0
WCAG
13.85
AAA
Lc
-98.03%
10 on 0
WCAG
11.22
AAA
Lc
-83.39%
20 on 0
WCAG
8.95
AAA
Lc
-69.59%
30 on 0
WCAG
7.04
AAA
Lc
-56.86%
40 on 0
WCAG
5.44
AA
Lc
-45.12%
70 on 0
WCAG
4.84
AA
Lc
62.96%
80 on 0
WCAG
6.60
AA
Lc
70.99%
90 on 0
WCAG
8.73
AAA
Lc
77.63%
100 on 0
WCAG
11.16
AAA
Lc
82.53%
110 on 0
WCAG
13.47
AAA
Lc
85.47%

warm

0 on 0
WCAG
13.86
AAA
Lc
-98.12%
10 on 0
WCAG
11.23
AAA
Lc
-83.47%
20 on 0
WCAG
8.94
AAA
Lc
-69.54%
30 on 0
WCAG
7.05
AAA
Lc
-56.94%
40 on 0
WCAG
5.44
AA
Lc
-45.08%
70 on 0
WCAG
4.85
AA
Lc
62.96%
80 on 0
WCAG
6.62
AA
Lc
71.05%
90 on 0
WCAG
8.75
AAA
Lc
77.68%
100 on 0
WCAG
11.18
AAA
Lc
82.57%
110 on 0
WCAG
13.48
AAA
Lc
85.47%

red

0 on 0
WCAG
12.96
AAA
Lc
-93.22%
10 on 0
WCAG
10.02
AAA
Lc
-76.32%
20 on 0
WCAG
7.83
AAA
Lc
-62.52%
30 on 0
WCAG
6.22
AA
Lc
-51.52%
40 on 0
WCAG
4.99
AA
Lc
-42.47%
70 on 0
WCAG
5.29
AA
Lc
62.75%
80 on 0
WCAG
7.03
AAA
Lc
70.11%
90 on 0
WCAG
9.28
AAA
Lc
76.85%
100 on 0
WCAG
11.64
AAA
Lc
82.17%
110 on 0
WCAG
13.58
AAA
Lc
85.32%

orange

0 on 0
WCAG
13.21
AAA
Lc
-94.62%
10 on 0
WCAG
10.43
AAA
Lc
-78.83%
20 on 0
WCAG
8.24
AAA
Lc
-65.26%
30 on 0
WCAG
6.65
AA
Lc
-54.63%
40 on 0
WCAG
5.16
AA
Lc
-43.67%
70 on 0
WCAG
5.17
AA
Lc
63.14%
80 on 0
WCAG
6.89
AA
Lc
70.58%
90 on 0
WCAG
9.07
AAA
Lc
77.18%
100 on 0
WCAG
11.46
AAA
Lc
82.31%
110 on 0
WCAG
13.52
AAA
Lc
85.30%

yellow

0 on 0
WCAG
13.77
AAA
Lc
-97.61%
10 on 0
WCAG
12.27
AAA
Lc
-89.46%
20 on 0
WCAG
9.84
AAA
Lc
-75.34%
30 on 0
WCAG
7.83
AAA
Lc
-62.69%
40 on 0
WCAG
6.10
AA
Lc
-50.53%
70 on 0
WCAG
4.31
AA Icons
Lc
59.13%
80 on 0
WCAG
6.64
AA
Lc
70.57%
90 on 0
WCAG
8.82
AAA
Lc
77.29%
100 on 0
WCAG
11.24
AAA
Lc
82.28%
110 on 0
WCAG
13.45
AAA
Lc
85.25%

green

0 on 0
WCAG
14.12
AAA
Lc
-99.49%
10 on 0
WCAG
11.60
AAA
Lc
-85.65%
20 on 0
WCAG
9.38
AAA
Lc
-72.51%
30 on 0
WCAG
7.46
AAA
Lc
-60.10%
40 on 0
WCAG
5.84
AA
Lc
-48.72%
70 on 0
WCAG
4.29
AA Icons
Lc
58.73%
80 on 0
WCAG
5.92
AA
Lc
67.53%
90 on 0
WCAG
8.10
AAA
Lc
75.23%
100 on 0
WCAG
10.72
AAA
Lc
81.38%
110 on 0
WCAG
13.28
AAA
Lc
85.12%

cyan

0 on 0
WCAG
13.98
AAA
Lc
-98.78%
10 on 0
WCAG
11.48
AAA
Lc
-84.96%
20 on 0
WCAG
9.31
AAA
Lc
-72.19%
30 on 0
WCAG
7.55
AAA
Lc
-61.13%
40 on 0
WCAG
6.40
AA
Lc
-53.05%
70 on 0
WCAG
3.85
AA Icons
Lc
55.71%
80 on 0
WCAG
5.39
AA
Lc
65.30%
90 on 0
WCAG
7.52
AAA
Lc
73.65%
100 on 0
WCAG
10.24
AAA
Lc
80.65%
110 on 0
WCAG
13.14
AAA
Lc
84.93%

blue

0 on 0
WCAG
13.68
AAA
Lc
-97.13%
10 on 0
WCAG
10.62
AAA
Lc
-79.90%
20 on 0
WCAG
8.29
AAA
Lc
-65.49%
30 on 0
WCAG
6.43
AA
Lc
-52.79%
40 on 0
WCAG
4.97
AA
Lc
-41.81%
70 on 0
WCAG
5.04
AA
Lc
63.01%
80 on 0
WCAG
6.81
AA
Lc
70.81%
90 on 0
WCAG
8.97
AAA
Lc
77.40%
100 on 0
WCAG
11.31
AAA
Lc
82.33%
110 on 0
WCAG
13.53
AAA
Lc
85.40%

violet

0 on 0
WCAG
13.52
AAA
Lc
-96.24%
10 on 0
WCAG
10.41
AAA
Lc
-78.62%
20 on 0
WCAG
8.10
AAA
Lc
-64.16%
30 on 0
WCAG
6.22
AA
Lc
-51.18%
40 on 0
WCAG
4.82
AA
Lc
-40.42%
70 on 0
WCAG
5.36
AA
Lc
64.95%
80 on 0
WCAG
7.07
AAA
Lc
71.97%
90 on 0
WCAG
9.23
AAA
Lc
78.30%
100 on 0
WCAG
11.53
AAA
Lc
82.77%
110 on 0
WCAG
13.58
AAA
Lc
85.50%

purple

0 on 0
WCAG
13.47
AAA
Lc
-96.01%
10 on 0
WCAG
10.70
AAA
Lc
-80.39%
20 on 0
WCAG
8.48
AAA
Lc
-66.73%
30 on 0
WCAG
6.59
AA
Lc
-53.95%
40 on 0
WCAG
5.02
AA
Lc
-42.18%
70 on 0
WCAG
5.44
AA
Lc
64.95%
80 on 0
WCAG
7.22
AAA
Lc
72.13%
90 on 0
WCAG
9.37
AAA
Lc
78.28%
100 on 0
WCAG
11.65
AAA
Lc
82.79%
110 on 0
WCAG
13.64
AAA
Lc
85.52%

pink

0 on 0
WCAG
13.04
AAA
Lc
-93.69%
10 on 0
WCAG
10.08
AAA
Lc
-76.72%
20 on 0
WCAG
7.93
AAA
Lc
-63.23%
30 on 0
WCAG
6.37
AA
Lc
-52.63%
40 on 0
WCAG
4.96
AA
Lc
-42.19%
70 on 0
WCAG
5.34
AA
Lc
63.11%
80 on 0
WCAG
7.13
AAA
Lc
70.58%
90 on 0
WCAG
9.31
AAA
Lc
77.04%
100 on 0
WCAG
11.69
AAA
Lc
82.36%
110 on 0
WCAG
13.63
AAA
Lc
85.40%