Colors
Color should be applied throughout a page consistently and be compatible with the brand. Color can indicate which elements are interactive, how they relate to other elements, and their level of prominence. Important elements should stand out the most.
Color Palette
Blues
Blue 1
RGB (0,56,101)
HEX 003865
12.0:1
Blue 2 (Primary)
RGB (0,98,152)
HEX 006298
6.6:1
Blue 4
RGB (0,169,224)
HEX 00A9E0
4:4:1*
Blue 5
RGB (113,197,232)
HEX 71C5E8
6.2:1
Secondary
Ruby
RGB (224,0,77)
HEX E0004D
4.9:1
Orange
RGB (252,76,2)
HEX FC4C02
3.5:1*
Orange 2
RGB (242,169,0)
HEX F2A900
5.9:1
Yellow
RGB (255,199,44)
HEX FFC72C
7.7:1
Purple
RGB (146,39,143)
HEX 92278F
7.2:1
Neutrals
Neutral 1
RGB (63, 63, 63)
HEX 3F3F3F
10.5:1
Neutral 2
RGB (87,87,87)
HEX 575757
7.2:1
Neutral 3
RGB (114,114,114)
HEX 727272
4.8:1
Yellow
RGB (135,135,135)
HEX 878787
3.6:1*
Neutral 5
RGB (191,191,191)
HEX BFBFBF
3.7:1*
Neutral 6
RGB (204,204,204)
HEX CCCCCC
7.5:1
Neutral 7
RGB (223,223,223)
HEX DFDFDF
8.9:1
Neutral 8
RGB (230,230,230)
HEX E6E6E6
9.6:1
Neutral 9
RGB (241,239,239)
HEX F1EFEF
10.5:1
Neutral 10
RGB (247,247,247)
HEX F7F7F7
11.2:1
Neutral 11
RGB (255,255,255)
HEX FFFFFF
12.0:1
Web 1
RGB (135,214,248)
HEX EBF8FE
11.0:1
Accessibility
Text and important elements, like icons, should meet legibility standards when appearing on colored backgrounds, across all screen and device types. WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text. Colors that do not pass accessibility can still be utilized in certain areas as long as readability is not required.
Text colors should be Blue 1 or Neutral 11 while body text should be Neutral 1. If any of the text colors do not pass accessibility, the background color must be changed.
*Note the colors that fail accessibility contrast ratio based on colors displayed