Update brand colours

# What we did

Following a recent accessbility audit, it was found that various components failed colour contrast standards. For example, the following components were found to have an insufficient colour contrast ratio to meet the WCAG 2.1 AAA Contrast (Enhanced) success criteria:

  • Primary CTAs
  • Blue link text
  • White text on a blue background (e.g. h2s)
  • Primary CTAs on a yellow or purple background
  • Pink quotation marks on a grey background
  • Purple promo banners

To address these issues, it was decided that the brand colour palette needed to be updated and, subsequently, a web-safe colour palette, slightly different to that of the offline colour palette, be collated. The following colour adjustments were duly made:

  • Blue (#2881be to #00b1eb)
  • Dark blue (#0076bd to #1d70b8)
  • Pink (#db5e9e to #f162a3)
  • Purple (#8967aa to #ad52a4)
  • Green (#159964 to #00ab92)

We also updated the primary CTAs to match those of the Government Design System (GDS):

  • Primary CTA green (#00703c)
  • Primary CTA dark green (#005a30)

Below are a number of screenshots illustrating how the look and feel of the website changed as a result of the above colour adjustments.

# What we’ll do next

We will continue to check the colour contrast ratio of each and every component that makes up the website and evolve the colour palette as and where needed.

# Homepage prior to the colour update
Screenshot of Homepage prior to the colour update
# Homepage after the colour update
Screenshot of Homepage after the colour update
# Previous 'How can I train to teach' landing page
Screenshot of Previous 'How can I train to teach' landing page
# New 'How can I train to teach' landing page
Screenshot of New 'How can I train to teach' landing page
# Previous 'Get help and support' page
Screenshot of Previous 'Get help and support' page
# New 'Get help and support' page
Screenshot of New 'Get help and support' page