- Legacy Colors
- Accessibility Colors
|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|
- 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.
Use charcoal for
- Main copy (charcoal-base).
- Muted copy (charcoal-lighter).
Use cloud for
- Default component borders (cloud-base).
Use blue for
- primary buttons
- checkmarks and radio buttons
- highlight form fields
- text links
Use red for
- errors in form fields
- destructive buttons
- error alerts
Use green for
- success alerts
Yellow is used for content that requires users to make a decision that is of a low priority. Use yellow for
- warning alerts
- unfulfilled status
Orange is used for content that requires an action that is of a medium priority. Use orange for
- overdue status
Information 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