Color

The Opportunity Standard color system is a predefined set of combinations created to be inclusive for people with vision impairments. The combinations have been…

  • Tested for adequate color contrast meeting Web Content Accessibility Guidelines (WCAG) 2.1 AA compliance.

  • Tested for perceived color contrast.

  • Tested through simulation to accommodate color blindness.

There are two color palettes available for users to choose, light or dark, based on their preference (using the theme utility). They are both made of a base color scale with a split complementary set of primary, secondary, and tertiary colors.

Base Scale Anchor Link Base Scale

The base scale is used for background colors. The scale starts at the main background assignment. Tints and shades begin on either side of the main assignment.

  • Background Scale 0
  • Main Background Scale 1
  • Background Scale 2
  • Background Scale 3
  • Background Scale 4

Primary, Secondary, and Tertiary Colors Anchor Link Primary, Secondary, and Tertiary Colors

Primary, secondary, and tertiary color assignments are used for interactive elements (such as links and buttons) and highlighting areas of emphasis (such as alerts and badges). The assignments for the primary, secondary, and tertiary colors use a specific tint or shade from the main assignment to ensure adequate contrast in each theme.

  • Primary
  • Secondary
  • Tertiary

Background and Text Anchor Link Background and Text

The background and body text are assigned initial colors with adequate contrast in both themes using the class bg on the document body.

Body text color. The background color is set to this element's container.

Additionally, there are assignments for brand, alternative and emphasized text colors. Each assignment is available as a CSS color utility using Tailwindcss.

Brand Color

Alternative text color.

Text color with emphasis.

Utility classes for brand, alternative, and emphasis text are text-brand, text-alt, or text-em respectively.

Global Objects

Global objects and other components use different background color assignments to distinguish their position or draw attention to themselves in the user interface (UI). For example, the Navigation, Menu, and Attribution global elements all use different background color assignments.

Alerts

The default, primary, secondary, and tertiary Alerts are assigned background and text color corresponding with their urgency.

Information

Default status alert background and text color for general alert callouts.

Information

Primary status alert background and text color for informational messages.

Success

Secondary status alert background and text color for success messages.

Utility classes for primary, secondary, and tertiary Alerts are c-alert-status-primary, c-alert-status-secondary, or c-alert-status-tertiary respectively.

Buttons

The default, primary, secondary, and tertiary Buttons are assigned background and text color corresponding with their type.

Utility classes for primary, secondary, and tertiary Buttons are btn-primary, btn-secondary, or btn-tertiary respectively.

Color Scales Anchor Link Color Scales

Each assignment for colors are pulled from a full scale for blue, green, or yellow. Every color in each scale is available as a CSS color utility using Tailwindcss. These color utilities do not change between themes.

Primary (blue)

  • Blue Dark 1
  • Main Blue
  • Blue Light 1
  • Blue Light 2
  • Blue Light 3

Secondary (green)

  • Green Dark 2
  • Green Dark 1
  • Green Main
  • Green Light 1
  • Green Light 2
  • Green Light 3

Tertiary (yellow)

  • Yellow Dark 4
  • Yellow Dark 3
  • Yellow Dark 2
  • Yellow Dark 1
  • Main Yellow
  • Yellow Light 1
  • Yellow Light 2
  • Yellow Light 3
Accent Colors

Two additional colors, red and purple, are included with limited use as accent colors. Red is assigned to light theme Question validation messages. Purple is assigned to Code comments.

  • Main
  • Main

Color Usage Anchor Link Color Usage

Below is a list of percentages that describe the proportional occurrence of colors in the UI palette. These amounts are not precise. Generally, use of color should strike a balance between neutral and vibrant colors to effectively draw attention to elements that require a user’s attention.

  • Background Colors
    • Background Scale 0
    • Background Scale 0
    • Background Scale 0
    • Background Scale 0
    • Background Scale 0
  • Primary Color, 25%
  • Secondary Color, 15%
  • Tertiary Color, 5%
  • Accent Colors
    • Red, 2.5%
    • Purple, 2.5%

  • The background color scale should be predominant in the UI at around 50%.

  • The primary color should be the next with around 25% and secondary color at 15%.

  • The tertiary color should only be utilized for 5% of the palette.

  • Accent colors, either red or purple, should only be utilized for around 2.5% of the palette each.