😍 or 🤮 What do you think of our design? [and a little bit on accessible colour schemes]
Tags: a11y, webdev, showdev, discuss
Published: 2021-08-10 09:48:33

Super short and positive (for once...I seem to have been on a bit of a naughty streak!) post. 

Finally at the stage of building the front end for Inclusivity Hub (shorted to InHu - our company). After much deliberation and fiddling we have settled on the colour scheme and have a rough idea of the branding!

So I thought I would share the design for feedback (negative feedback and constructive feedback is more than welcomed!).

At the same time, I thought I would show how little adjustments / certain thought processes mean that you can create an accessible colour palette that is (hopefully) appealing and share that with you too!

## Let's start with the final design!
Start at the end and work backwards!

I won't bore you with the thought process too much as to why we chose the "stripes", I will just share the inspiration behind the design, which bits we liked and then the final product.

### Inspiration
I liked the following two images:-
![geometric background with diagonal rounded rectangles, circles with lines through them, dots and dashes in a pink, purple and dark blue colour scheme with yellow highlights](https://static.vecteezy.com/system/resources/previews/002/070/759/large_2x/creative-abstract-dynamic-geometric-elements-pattern-design-vector.jpg)
https://www.vecteezy.com/vector-art/2070759-creative-abstract-dynamic-geometric-elements-pattern-design

and 
![vector background with uniform rectangles at 45 degree angle, fully rounded ends, evenly spaced in a ](https://static.vecteezy.com/system/resources/previews/001/936/591/large_2x/abstract-pink-and-blue-gradient-color-rounded-line-diagonal-pattern-on-black-background-vector.jpg)
https://www.vecteezy.com/vector-art/1936591-abstract-pink-and-blue-gradient-color-rounded-line-diagonal-pattern-on-black-background

The first one was too busy though and the second one was too uniform. We wanted something in between and I, in particular wanted to see a more friendly colour scheme with a bit more variance in colours!

### The anchor design
After a bit of fiddling I finalised an idea and got to work designing. 

And here is the "anchor design" around which our branding will be built:
![Dark purple background with 45 degree rounded rectangles, hollow circles with thick outlines and filled circles with multiple colours that are bright and vibrant.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l62yq3zhgzw7y5d8d2rb.jpg)

Bright, colourful and I could tell you a whole story about why we chose certain things but, in the end, this is what we ended up with.

Needs some minor spacing tweaks but it is 95% of the way there.

### I always like to do the business cards next
To see if a design "works in the real world" I think business cards are a great place to start.

They are easy to make (so if you hate the design you can scrap it without wasting too much time) and they have two sides so you can try a light theme and a dark theme on one product.

Yet again, without all the design fluff, here are the rough designs for the cards:-

#### Front
![The InHu logo sat on top of the background with a drop shadow to make it look like it is floating. The InHu logo is a white circle with a thick pink outline with a slight gap at the bottom containing the text InHu split dark purple for "In" and pink for "Hu" with a little curve at the bottom within the white circle in dark purple also. Due to weighting on the "I" and the "U" being stronger and the small curved line at the bottom it looks like a smiling face. The background is dark purple with 45 degree rounded rectangles, hollow circles with thick outlines and filled circles with multiple colours that are bright and vibrant.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yrf6fxpoe25el8ql0pqo.jpg)

Not much different, just the company logo on top (with slightly adjusted colours to match new colour scheme)! "Floating" the logo with a drop shadow was the best way to make it stand out and remove some of the flatness from the design.

#### Back
![White background with the same colourful circles, rounded rectangles and outlined shapes. The shapes are located at the top and bottom of the card to allow space in the middle for text. There is placeholder text for person name and position to the left and to the right there are 3 rounded rectangles stacked vertically, each with an icon to the left of them to represent their contents. The 3 rounded rectangles contain placeholder text for a phone number, email address and the web address](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p4qxz13586oghsflxv5l.jpg)

Carrying the lines over to the top and bottom while leaving a decent amount of white space in the middle gives the basis for printed things such as invoices, letters etc.

I am still not quite happy with it but it is close to the end product! 

So, yet again, what do you think?

## Accessibility considerations
Now that you have seen the design, let's talk a little bit about accessibility.

The design is not just a background / visual interest. It is the basis of the colour palette for the company for all other printed and digital media.

So we had to make sure that contrast was good.

If you want to know the exact details of colour contrast requirements then the [colour contrast checker from WebAim](https://webaim.org/resources/contrastchecker/) is a great tool to play with that has explanations below.

I will just give the cliff notes:
For text we want a minimum of 3:1 for cases where we can use large text or for controls (to be used sparingly though!). For most text we want at least 4.5:1 contrast so we can use normal sized text.

For the main body text we want at least 7:1 contrast so that it is easy to read.

That is basically it!

But that does get quite complicated when designing a colour palette. 

For example, orange is a low contrast colour with white. So to make an orange that meets the minimum standards of 3:1 you have to make it quite dark.

Yellow is out of the question with white, so that is for use on / with dark colours and as decoration.

Why am I picking out those colours in particular? Because we as developers use them for warnings, statuses etc. as they are the expected colours. We need to have at least one colour between "red" and "green" so we decided to make a dark orange as part of the colour scheme.

### Is there a method you can use to get it right?
There are a lot of [tools you can use](https://dev.to/5t3ph/generate-accessible-button-colors-with-buttonbuddy-41mg) (by @5t3ph) that will help you generate an accessible colour scheme and [check contrast](https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o) (by @alvaromontoro). They are really handy for steering you towards an accessible palette and checking contrast!

The problem is that if you start that way you will end up avoiding colours that you may want to use.

The trick is to get a colour scheme you like without thinking about accessibility. 

Then you adjust the darkness / lightness / hue on colours with low contrast and see if the scheme still works. 

If there are colours that you want to use but you cannot get the contrast high enough, mark them as decorative colours.

I find the best way to do it is to lay the colour palette out in blocks and then add the contrast ratios on top of them. Then you can easily see which ones you can use in which situations.

An example of this is as follows:
![Described immediately below due to too much information](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbhcldgpsy2o2tc74xwe.jpg)

**Description of colours**: 

| Colour | Hex Colour Background | Hex Colour Text | Contrast Ratio |
| --- | --- | --- | --- |
| Primary background | #522876 | white | 10.9 |
| Primary logo | #7E4998 | white | 6.4 |
| Secondary logo | #A55A9F | white | 4.6 |
| Pink (danger) | #E02367 | white | 4.6 |
| Orange (warning) | #EA5A1F | white | 3.5 |
| **Amber (decorative)** | #F49955 | white | **2.2 (too low)** |
| Purp 2 (Primary) | #694F9C | white | 6.6 |
| Dark Blue (info) | #304D9C | white | 7.9 |
| Light Blue (widgets) | #304D9C | white | 5.1 |
| Primary Text | white | #444444| 9.7 |
| Deselect text | #E1E1E4 | #444444 | 7.5 |
| Disabled text | #B1B1B1 | #444444 | 4.5 |
| Dark theme 1 | #757575 | white | 4.6 |
| Dark theme 2 | #444444 | white | 9.7 |
| Purple ancillary | #F5F0F8 | #423262  | 5.84 |
| Blue ancillary | #DDEDFB | #304D9C  | 6.61 |
| Green ancillary | #E3F1E5 | #26602E | 6.4 |
| Red ancillary | #FDF2F6 | #B21F59 | 5.9 |
| Orange ancillary | #FEF2EA | #BD421C | 4.8 |
| Grey 1 ancillary | #E1E1E4 | #444444 | 7.5 |
| Grey 2 ancillary | #B1B1B1 | #333333 | 5.9 |

By doing it this way it makes it easy to pick out which colours can be used for what!

Oh and if you like the colour scheme **feel free to use it**.

### Shouldn't you be going for WCAG AAA colour contrast as an accessibility advocate?
Good point, you obviously know accessibility, can we be friends? 😋

The answer is no, we are geared up to produce high contrast versions of our printed media.

Our digital products (that we control) will all have options to turn on a high contrast mode (and turn on automatically with media queries) under a prominent custom build accessibility settings section.

The people who say your site should be [WCAG AAA compliant](https://www.w3.org/WAI/WCAG2AAA-Conformance) from the beginning are just a little too militant. (there are 3 levels, A, AA and AAA, with AAA being "superstar" or "above and beyond" status). 

WCAG AA is a standard that about 1% of companies manage to achieve (about [97.4% of websites have automatically detectable errors on their home pages!](https://webaim.org/projects/million/#wcag) and we can only [capture about 40% of accessibility errors automatically](https://accessibility.blog.gov.uk/2017/02/24/what-we-found-when-we-tested-tools-on-the-worlds-least-accessible-webpage/)!).

So I am more than happy to say that is our yard stick for "when digital products load" if we can then provide controls to make things AAA rated...we will join a handful of companies in the world that have ever achieved that, so I think that is a fair compromise!

## So what is next?
So now we have the base design (and after feedback from you!) we will finalise the base design and design outwards from there.

The next thing I would normally design is a "style tile". If you haven't heard of it, it is essentially a single page branding guidelines with core principles demonstrated. There is a [great site about style tiles](http://styletil.es/) if you want to learn more.