Barbican brand

The Barbican Centre uses distinct colours for each of its artforms, e.g. cinema, theatre, and contemporary music. This means that as people move around the website, the colour palette changes to give a visual indication of where they are.

For example the main brand colour used for the homepage is a vibrant orange, while art and design-related content have a hot pink masthead and accent colour.

---

Accessibility issues

As a team we undertook accessibility training and completed a site-wide audit, which flagged some issues.

We learned that not all of the artform colours met WCAG international standards because the colour contrast was not high enough. This meant that some users, particularly those with visual impairments like colour vision deficiency, might struggle to use our website.

We also discovered that some components on our homepage did not follow best practice guidelines, such as a large hero video which auto-played when the site loaded.

---

Agreeing scope and priorities

Our biggest challenges were:

• Improving colour contrast to make text accessible
• Keeping the colours for each artform roughly the same as they already were (because of brand recognition and to continue aligning with designs in print)
• Collaborating with each department to ensure they were happy with their altered colours
• Getting approval to change the main ‘Barbican orange’ to a slightly darker shade, so that it was WCAG Level AAA compliant
• Maintaining a harmonious colour palette while considering all the above

---

Collaborating

As a team we went back and forth mocking-up several options, testing each colour and colour combinations with tools such as WebAIM’s Contrast Checker. This continued until we found colours that all met Level AAA while working well together.

Once we were confident we had strong options for a palette, stakeholders (the owners of each artform) were looped in so that we could all discuss why we’d arrived at the proposed solution and get sign-off for implementation.