UX Design Guides
Color & Icons

The visual style of an interface - the use of visual treatments including patterns, gradients, and color hue, tint, and shading.

Color can communicate meaning, improve decision-making, and guide users through a system. In addition, the visual style can communicate the voice and personality of an organization, through the intentional use of visual style

Guiding Principles

  • Minimize Decoration — Reduce the cognitive need to interpret and parse content by using visual elements (e.g., lines and drop shadows) sparingly.
  • Be Consistent & Reinforce Meaning — Associate a single color or visual style with objects, states, or functions that have the same (or very similar) meanings to lessen the cognitive load on users (e.g. blue indicates an action). Whenever possible, leverage existing color palettes or styles to reinforce their meaning.
  • Accessibility — Don’t rely on color alone to convey information. Colors that are used need a contrast ratio of at least 4.5:1 (accessibility WCAG 2.0 AA criteria 1.4.3).

Design Recommendations

Color Use

  • Blue — actionable elements (i.e., links, buttons, select tables)
  • Gray - disabled states for actionable elements; “Draft” state for data objects in a state management flow
  • Yellow — warnings or critical changes that suggest future interaction; “Suspended” state for data objects in a state management flow
  • Red — error messages and conditions that block a task from completion; “Canceled” state for data objects in a state management flow
  • Green — success messages to indicate a task was completed; “Completed” state for data objects in a state management flow
  • Teal — relevant but non-critical information; “Ready” state for data objects in a state management flow

Icons

  • One symbol per function — Each unique symbol should map to a unique and specific function, to call attention to an action.
  • Use as buttons or links — Icons can be used for either buttons or links as a space-saving technique. In these cases, be sure to use a tooltip for an icon label (where hovering over an action icon will produce a tooltip containing its label (e.g., Edit)).
  • Put next to object identifier — Information icons should be placed immediately next to the identifier of the object they describe (typically on the left for functions or menu items).JJ
  • Sometimes visual subtle — Information icons should avoid drawing undue attention away from other elements
  • High contrast icons — Icons with high contrast relative to other elements on the page should be used only when it is vital to draw the user’s eye to critical information (e.g., form validation or error message icons)
  • Accessibility — In cases where the icon is displayed with accompanying text, care must be given to keep the icon hidden from screen readersso the action text isn't announced twice.