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.
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 should play a supporting role and be used to highlight, contrast, and complement the primary colours.
Status colours are reserved for communicating statuses in the user interface and may be used on badges, icons, form validation and alerts. They may also be used in branding components (e.g. green for golf courses) including photography, illustrations, logos, and PDFs.
Use red in error messages and error states to highlight important information or actions that are potentially disruptive.
Yellow should only be used to communicate warning messages or that progress may be disrupted if an action is taken.
Green should only be used to communicate success and celebrate progress in the interface.
Light blue highlights information that might be useful to a user.
Neutral colours are used to complement our brand colours and in scenarios where attention shouldn’t be drawn to a particular component. Use
$gray-900 for these colours.
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.
If you aren’t sure about a specific colour combination, run it through a colour contrast checker, such as WebAIM’s colour contrast checker.
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:
It can also be used for one-off contrast needs:
You can also specify a base color with our color map functions:
It is recommended to also perform other checks to ensure the contrast passes.