Colour

Confluence provides a range of colours designed to be accessed, understood, and used by all people regardless of their age, background, or ability. The colours referenced in the system are a mix of primary brand colours, secondary brand colours, status colours, and shades.

Primary colours

White is used frequently as a background and flood colour while our primary blue is reserved for emphasis in the form of primary buttons and links.

Secondary colours

Secondary colours should play a supporting role and be used to highlight, contrast, and complement the primary colours.

Status colours

Danger

Use red in error messages and error states to highlight important information or actions that are potentially disruptive.

Warning

Yellow should only be used to communicate warning messages or that progress may be disrupted if an action is taken.

Success

Green should only be used to communicate success and celebrate progress in the interface.

Information

Light blue highlights information that might be useful to a user.

Neutral colours

Neutral colours are used to complement our brand colours and in scenarios where attention shouldn’t be drawn to a particular component. Use $gray-100 through $gray-900 for these colours.

Accessibility

The contrast between the colour of an element’s text and its background should be high enough that low-vision users can read it. City of Winnipeg websites must pass Level AA WCAG Colour Contrast Requirements. Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

Bootstrap’s colour contrast function

One additional function included in Bootstrap is the colour contrast function, color-yiq. It utilizes the YIQ colour space to automatically return a light (#fff) or dark (#111) contrast colour based on the specified base colour. This function is especially useful for mixins or loops where you’re generating multiple classes.

For example, to generate gray colour swatches:

@each $color, $value in $grays {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

It can also be used for one-off contrast needs:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

You can also specify a base color with our color map functions:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

It is recommended to also perform other checks to ensure the contrast passes.