Skip to content

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

Open
@chriswilty

Description

@chriswilty

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    accessibilityAnything related to accessibilityenhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions