Color Palette

Course Color Palette

This complimentary color palette was chosen so that multiple colors could be used in combination (for example, in charts and graphs) while maintaining appropriate contrast or displayed in gray scale. However, you will still want to be intentional when combining colors (notice that burgundy and black are very close and may not be suitable as combinations for all graphics).

• Blue = #1a4586 (Dark Cerulean) / R 26 | G 69 | B 134
• Orange =  #B35C32 (Ruddy Brown) / R 179 | G 92 | B 50
• Teal = #06908F (Dark Cyan) / R 6 | G 144 | B 143
• Burgundy = #390b15 / R 57 | G 11 | B 21
• Black = #000000

White text is compliant on all of the grey scale shades:

• Sonic Silver = #717171 / R 113 | G 113 | B 113 (4.88 contrast with white)
• Dim Gray = #676767 / R 103 | G 103 | B 103
• Onyx = #404040 / R 64 | G 64 | B 64
• Eerie Black = #1919198 / R 25 | G 25 | B 25
• Black = #000000

Alternate colors for white

Need more colors to contrast with a white background or text? Use the Alternate color palette:

Accessibility Considerations

Use WebAIM to test the color contrast ratio.

Ideally, all text should achieve AAA compliance. However, text should NEVER fall below AA compliance for both accessibility and general usability.

• Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
• WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).
• WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Blue

• Blue may be used as a primary color in graphs and charts.
• Blue may also be used with white text for normal or large text.

Orange

• Orange may be used as a primary color in graphs and charts.
• Orange may also be used as a background color with white text for large or normal text; not recommended for use with small text and should be used carefully.

Teal

• Teal may be used as a primary color in graphs and charts.
• Teal may be used as a background color with black text for large or normal text; not recommended for use with small text and should be used carefully.

Burgundy

• Burgundy may be used as a background color with white text for large or normal text.