Colors
#
Color Palette- Legacy Colors
- Accessibility Colors
#
Color Usage#
General GuideDo | Don't |
---|---|
Light color as a background + corresponding text color | A dark color as background |
White text + a primary color as background | A light color as background + white text |
Text in a dark color + white background | |
Light color as background + corresponding dark color text |
#
Accessibility- Color constrast ratios must meet WCAG 2.0 AA guidelines for contrast accessibility, which states the color contrast ratio between the foreground (eg text and images) and background must be at least 4.5:1. Color contrast ratios can be tested using WebAIM contrast checker.
#
CharcoalUse charcoal for
- Main copy (charcoal-base).
- Muted copy (charcoal-lighter).
#
CloudUse cloud for
- Default component borders (cloud-base).
#
BlueUse blue for
- highlights/hover
- primary buttons
- checkmarks and radio buttons
- highlight form fields
- text links
#
RedUse red for
- errors in form fields
- destructive buttons
- error alerts
#
GreenUse green for
- success alerts
#
YellowYellow is used for content that requires users to make a decision that is of a low priority. Use yellow for
- warning alerts
- unfulfilled status
#
OrangeOrange is used for content that requires an action that is of a medium priority. Use orange for
- overdue status
#
References#
Out of scopeInformation on colors and their usage guidelines do not consider the following:
- Color in data visualizations (charts & bar graphs)
- Hub navigation colors
- Hub top bar colors
- iQ brand colors within Hub