Skip to content
ASP Digital Design System

Colour Audit: Reviewing the colours used within the Frontend library

For this audit, we ran through the following process:

Collecting Colours

To find all the Material Design colours, a search for material design variables (using “$md-“) was carried out in all scss files within the Frontend repo.

With that list of Material Design variables, a JavaScript array was created with the Material Design variable name and hex value.

https://m2.material.io/design/color/the-color-system.html#color-theme-creation

A second JavaScript array of was made of available colours, including:

All Open Colour colour variables (using “$oc-” for the search term):

  • variable name
  • hex value
  • and a Boolean, whether they are currently in used in the Frontend repo

https://yeun.github.io/open-color/

ASP brand colour variables (using “$asp-” for the search term):

  • variable name
  • hex value

Exceptions

If a specific component should be following another component’s colour scheme (e.g. the alert component uses the colours from the asp-notification component), where that was the only reference to a specific Material Design colour.

Then, that colour was dropped from the list of Material Design colours to be replaced.

As part of continuous improvement a component’s colour scheme (e.g. alert) may be reviewed at a later date.

As part of this process; rgba colours were noted.

Digital comparison function for nearest colour

Each used Material Design colour was entered into a JavaScript function to find the nearest colour, against the array of available colours.

Visual comparison chart for the nearest colour

As an extra stage, a chart was created to show the Material Design colour against the proposed colour, and. allow a scrollable palette chart on the same screen. This allowed all available colours to be shown against the Material Design colour and proposed colour, in order to visually determine, if a closer solution was available.

The screenshot below shows:

  • The Material Design colour to be replaced (top)
  • The proposed replacement colour (bottom)
  • Scrollable chart of available palettes (right)

{IMAGE}

Lightening (/darkening) for a nearer colour

During the visual and digital comparisons -- if the colour matches weren’t close enough: The nearest or second nearest available colour, could be lightened or darkened to an increment of 5%, if necessary to an increment of 2.5% using the @sass:colour lightening functionality.

Preparation of proposed colours for UX designer review

After the process described above, a chart of colours was presented to a UX designer for review.

The screenshot below shows:

  • The Material Design colour to be replaced (left of each block)
  • The proposed replacement colour (right of each block)

{IMAGE}

Considerations

Consideration was given to:

  • The contrast to white and black for accessibility.
  • A further function was created to see if the colour contrasted more with white or black.
  • If a variant of Open Colour is already in use.

In the example (below); the variable $asp-black has been modified and lightened.

Working within modifying colours by increments of 2.5%:

  • Option 2 -- is slightly darker than Option 1 and therefore contrasts with black more than white. This would mean that any potential colours used with this as background would need reviewing.
  • Option 1 -- would be chosen as the colour contrast with white more than black (same as the equivalent material design colour).

.scss variable naming convention

Taking the colour and the weight(/variant) from material design and using the same just prepending asp to the start, for example:

  • $md-green-500 = $asp-green-500
  • $md-blue-50 = $asp-blue-50
  • $md-yellow-a400 = $asp-yellow-a400

Published 26 February 2024
Last updated 11 June 2024