Color

Color Guidelines

Alkami’s Online Relationship Builder (ORB) business banking platform user interface is customizable. We use the controlled variables approach to creating quality user interfaces (UI) for optimal user experiences (UX). In the case of colors, we employ a set group of colors that can be used in limited ways, in order to guide and unify the design.

Neutral Colors

We use the following neutral colors for text and backgrounds:

Mine Shaft #333333
Dove Gray #707070
Silver #C5C5C5
Alto #E0E0E0
Wild Sand #F5F5F5

Messaging Colors

For call to action (CTA) messages or clickable items and links, and/or to indicate warning, error, and success messages, we use the following bolder colors: Forest Green #307B21, Thunderbird #C11826, Orange Roughy #C45413, and Steel Blue #4371AD.

Forest Green #307B21
Thunderbird #C11826
Orange Roughy #C45413
Steel Blue #4371AD

Color Roles

Name Hex Roles Notes
Mine Shaft
#333333
  • Primary text
  • Input field borders
  • Icons
Dove Gray
#707070
  • Secondary text
Alto
#E0E0E0
  • Dividing lines
  • Borders
Wild Sand
#F5F5F5
  • Backgrounds
 This is the darkest background we can use with #707070 Wild Sand colored text, to maintain a **4.5:1** contrast ratio
Forest Green
#307B21
  • Success messages
Thunderbird
#C11826
  • Error or alert messages
Orange Roughy
#C45413
  • Warning or caution messages
Steel Blue
#4371AD
  • Link text
  • Actionable icon

For implementation information please see Utility Classes/Color

Accessibility – Color Contrast

Alkami has committed to ensuring all visual designs meet the minimum color-contrast ratio for normal and large text on a background, as described in the WCAG 2.0, Level AA, Contrast (Minimum): Understanding Success Criterion 1.4.3. For quick reference, these are the contrast ratios outlined for certain elements:

  • Normal-scale text, icons that are not solely decorative, fields, navigation, and small footer text should have a contrast ratio of at least 4.5:1.
  • Large-scale text and images of large-scale text require a contrast ratio of at least 3:1.
  • Incidental text or images of text that are part of a non-actionable user interface component, that are purely for decoration have no contrast requirement.
  • Logo text that is part of a brand logo or brand name has no minimum contrast requirement.

Resources to check contrast ratio:
Tangaguru contrast finder
Sketch plugin Color Contrast Analyser

Do use light and dark values
Don't use a palette with colors of similar values and saturation

Accessibility – Color Blindness

Not everyone sees colors in the same way. Some people can only see certain colors as shades of grey and others don’t see some colors when they are paired with other colors. Therefore, to help ensure accessibility for the majority of screen viewers follow these guidelines:

  • Limit the color palette. Don’t use too many colors.
  • Create contrast by using light and dark values.
  • Avoid problem color combinations. Watch out for combinations that are difficult for those with colorblindness to distinguish. These include: Green and Red; Green and Brown, Blue and Purple, Green and Blue, Light Green and Yellow, Blue and Grey, Green and Grey, and Green and Black. If these combinations cannot be avoided, contrast light and dark values between the two colors.

Resources to check color blind accessibility
Sketch plug Stark

Do use light and dark values
Don't use a palette with colors of similar values and saturation