• A to Z content style guide
• Colour palettes
• Icons
• Images
• Layout
• Lists
• Maps
• Friendly links (short URLs)
• SEO
• Typography
• Utility classes

Colour Palettes

About

Below are the list of Transport for West Midlands colour palettes.

We have tested our colours against the three most prevalent colour blind anomalies: protanopia, deuteranopia and tritanopia. While in some circumstances, particularly protanopia, colours can appear to be relatively similar.

These issues can be circumvented by not referring to specific colours. For instance, when referring to a green button with the word 'start' in, the phrase 'click the green button to start' would not be helpful. Instead, use 'click the start button', without a colour reference.

W3C AA Accessibility criteria requires the contrast of test to be enhanced, with a contrast ratio upwards of 3:1.

All brand/web colours meet this criteria, though the modal colour 'WM Railway' must only be used for iconography and graphical devices.

The background only colours can only be used as a background colour and they are not intended for any other use.

Using in development

WMNDS SCSS

If you are using WMN Design System's SCSS in development, you shouldn't use the HEX values! Instead you should always use the scss variables instead, for example use get-color(primary) instead of #3c1053. This ensures you are always using the most up-to-date colour. To find out more on how to use the get-color() function in SCSS, please refer to the notes for @function get-color() in _mixins.scss.

Without WMNDS SCSS

If you are not using WMN Design System's SCSS then it is recommended to use the hex values below. It is highly adviseable to set these up as variables in your development enviornment, this ensures that you can easily change them to keep up-to-date with our colour palettes.

If you'd like to see how we have set the variables up, you can check out $palettes in _vars.scss and @function get-color() in _mixins.scss.

Brand colours

// HEX


// SCSS VAR
$get-color(primary);

// HEX


// SCSS VAR
$get-color(secondary);

Modal colours

// HEX


// SCSS VAR
$get-color(bus);

// HEX


// SCSS VAR
$get-color(metro);

// HEX


// SCSS VAR
$get-color(railway);

// HEX


// SCSS VAR
$get-color(susTravel);

// HEX


// SCSS VAR
$get-color(roads);

Web colours

// HEX


// SCSS VAR
$get-color(text);

// HEX


// SCSS VAR
$get-color(cta);

// HEX


// SCSS VAR
$get-color(error);

// HEX


// SCSS VAR
$get-color(warning);

// HEX


// SCSS VAR
$get-color(success);

// HEX


// SCSS VAR
$get-color(information);

Background only colours

// HEX


// SCSS VAR
$get-color(plannedDisruption);

// HEX


// SCSS VAR
$get-color(disable);

// HEX


// SCSS VAR
$get-color(background);