Some readers may have noticed that Scottish Enterprise launched a new brand identity recently.
Our logo was updated, and our typefaces and colour palettes changed.
I’m not a marketer, so that’s not my domain and I have nothing to say about that.
But I am a designer. And, when you’re designing communications material, whether it’s a website, an app, a brochure, a poster, a letter … these things matter. They are constraints you have to design within.
And yet, you have to produce an experience that’s accessible.
Helping our content and UX designers
Our content and UX designers have to negotiate the intersection of our brand palette and accessibility regulations.
So I made a simple thing to see which colour combinations pass accessibility thresholds.
It’s just an HTML <table> with CSS to set foreground and background colours and text to indicate if it conforms at WCAG2.2. Level AA or AAA.
(There’s no Level A conformance for colour contrast, which is a failing IMO.)
You can filter the table to isolate which combinations work at level AA or AAA.
It’s deliberately and intentionally #inaccessible – first time I’ve done so.
The code’s on Github if you’re interested.
Luminosity contrast ratios are all based on Gez Lemon’s colour luminosity contrast analyser.
I'm a service designer in Scottish Enterprise's unsurprisingly-named service design team. I've been a content designer, editor, UX designer and giant haystacks developer on the web for (gulp) over 25 years.