Design Standards

Colors

Navigation Colors


   White Text
   Black Text

Green Navigation
R 051 G 153 B 051
# 339933

 

5.7:1 with black (Pass)

3.7:1 with white (Fail)

Fail<24px, Pass>24px

 


   White Text
  Black Text

Blue Navigation
R 000 G 144 B 197
# 0090C5

 

5.8:1 with black (Pass)

3.6:1 with white

Fail<24px, Pass>24px

 


   White Text
   Black Text

Green Dark Navigation
R 000 G 102 B 000
# 006600

 

2.9:1 with black (Fail)

7.2:1 with white (Pass)

 

 

Background Colors


   White Text
   Black Text

Green Background
R 234 G 247 B 229
# EAF7E5

 

18.9:1 with black (Pass)

1.1:1 with white (Fail)


   White Text
   Black Text

Blue Background
R 226 G 246 B 255
# E2F6FF

 

18.9:1 with black (Pass)

1.1:1 with white (Fail)


   White Text
   Black Text

Gray Background
R 240 G 240 B 240
# F0F0F0

 

18.4:1 with Black (Pass)

1.1:1 with white (Fail)


   White Text
   Black Text

White Background
R 255 G 255 B 255
# FFFFFF

 

21:1 with Black (Pass)

1:1 with white (Fail)

Typo Colors


   White Text
   Black Text

Green Typo
R 035 G 126 B 035
# 237E23

 

4.1:1 with black

Fail<24px, Pass>24px

5:1 with white (Pass)


   White Text
   Black Text

Blue Typo
R 000 G 116 B 167
#0074A7

 

4.1:1 with black

Fail<24px, Pass>24px

5.2:1 with white (Pass)


   White Text
   Black Text

Gray Typo
R 051 G 051 B 051
# 333333

 

12.6:1 with white (Pass)

1.7:1 with white (Fail)


   White Text
   Black Text

Black
R 000 G 000 B 000
# 000000

 

21:1 with white (Pass)

1:1 with white (Fail)

 

Lines, Slider Arrows etc.


   White Text
   Black Text

Gray Lines
R 204 G 204 B 204
# CCCCCC

 

13:1 with black (Pass)

1.6:1 with white (Fail)

 

 


   White Text
   Black Text

Gray Lines Background
R 180 G 180 B 180
# B4B4B4

 

10:1 with black (Pass)

2.1:1 with white (Fail)


   White Text
   Black Text

Gray Medium
R 153 G 153 B 153
# 999999

 

7.4:1 with black (Pass)

2.8:1 with white (Fail)

 

Note: 2.8:1 is close to the 3:1 threshold for large text consider darkening slightly


   White Text
   Black Text

Gray Dark
R 102 G 102 B 102
# 666666

 

3.7:1 with black

Fail<24px, Pass>24px

5.7:1 with white (Pass)

Additional Hero Bar Colors Not final!


   White Text
   Black Text

Orange Hero
R 240 G 073 B 043
# F0492B

 

3.7:1 with white
Fail<24px, Pass>24px

5.7:1 with black (Pass)

 

 

 

 


   White Text
   Black Text

Dark Red Hero
R 136 G 019 B 018
# 881312

 

9.8:1 with white (Pass)

2.1:1 with black (Fail)

 

 

 


   White Text
   Black Text

Violet Hero
R 096 G 028 B 087
# 601C57

 

11.7:1 with white (Pass)

1.8:1 with black (Fail)


   White Text
   Black Text

Yellow Hero
R 225 G 169 B 027
# E1A91B

 

2.1:1 with white (Fail)

9.9:1 with black (Pass)


   White Text
   Black Text

Blue Dark Hero
R 000 G 075 B 141
# 004B8D

 

8.8:1 with white (Pass)

2.4:1 with black (Fail)