ScottLogic / blog

The Scott Logic blog
http://blog.scottlogic.com
Other
9 stars 85 forks source link

Blog colours (mostly) do not pass contract checker for accessibility #248

Open chriswilty opened 1 week ago

chriswilty commented 1 week ago

Problem

There are four colour schemes for our blog posts: teal, pink, orange, yellow - see scss/blog-colour-schemes.scss.

Of these, only the pink colour scheme passes contrast checks at AA standard, on a white background:

image

The others fail, with yellow being the worst offender:

image

It's important to note this indicates a general problem with our branding, though the plain white background is clearly not helping, as with a dark background the remaining three pass, e.g.

image

Solution?

For our blog, we might want to consider straying beyond our strict corporate theme colours, even if it just means darkening them a little, e.g.

#EC6F27 image

#27A4AA image

Yellow is never going to pass though, on a white background 🫥

For this issue, I suggest adopting the above darkened colours and removing yellow entirely.