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:-

https://www.vecteezy.com/vector-art/2070759-creative-abstract-dynamic-geometric-elements-pattern-design

and

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:

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

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

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 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 (by @5t3ph) that will help you generate an accessible colour scheme and check contrast (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:

Description of colours:

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 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! and we can only capture about 40% of accessibility errors automatically!).

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 if you want to learn more.