![Cover image for ๐ or ๐คฎ What do you think of our design? [and a little bit on accessible colour schemes]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq1h9cohxk345nujkygkc.jpg)
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
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:
| 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 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.
Top comments (41)
I'm not sure if I'm missing something obvious here, but what is Inclusivity Hub?
Oh, that is the company name (InHu is short for Inclusivity Hub).
However in the context and as I have never said it before completely understandable and I will add a note to clarify!
I get that, I mean what's the company about?
Oh, I misunderstood ๐คฆโโ๏ธ
You are the first person I am telling on a public platform as we weren't (and still aren't technically ready, just "position of company" ready now) to talk about it! Exciting!
We are building a resource around disability.
It is a database of:
So for example someone with Cerebral Palsy (Condition) may have poor grip strength (Impairment) and so need a specialised tool for gripping a pen so they can write (Solution).
We have linked all the conditions to related impairments and all the impairments to solutions so they feed through to each other (close to 400,000 relations and we aren't done!).
The site will contain loads of healthy living tips, support information, information about what to expect if you are newly diagnosed with a disability / condition, information for employees (rights, funding, tools available etc.) and information for businesses on employing people with disabilities (law, solutions) and for businesses who want to make their service accessible (in the physical world as well as the digital world, so things like ramps, staff training, remote sign language interpretation via video etc.)!
The idea is to provide a load of information and then provide a platform for businesses to sell products.
Initially they will be disability related products but ultimately we just want an accessible shopping platform where people can sell any product or promote any service.
I hope that makes sense, it seems like a lot!
However we have worked a lot on how to structure data so you can literally say "show me information on Parkinson's disease related to being an employee" and it will tailor the information to your needs!
Or you can say "I am a business looking to employ someone who is Blind" and it will give you legal info as well as products and services that will let that person do their job.
Still at least 6 months from launch but we will soon be making some noise about it...might as well start with you! โค
Yay!
That's a lot of stuff on a single site, that means once this launches, this could be the one and only major Hub of information on accesibility.
Also the idea of selling stuff makes it better for the company and others, that's what I call a win-win. I'm just wondering, will the delivery of these software/hardware also be handled by InHu?
Your structuring of data also sounds intresting. Once you can handle data properly, the possibilities are limitless.
Quick question, are you focusing on web accesibility, or general accesibility of digital devices?
Can't wait to see this happen! Wishing you luck ๐
Hehe at least now the name makes sense ๐. Hopefully one day we will expand into other areas on inclusion (hence why we went for that name) but that is at least 5 years away and if it all works!
No we will just be a sales platform initially, getting into logistics and warehousing takes millions. So people order through us, order goes to business, they do their thing.
The only other time we are "in the middle" is if they need alternative communication methods such as an accessible chat system that they do not currently own. But we have been very careful to make sure we aren't included in dispute resolution etc.
Thanks a lot! โค
On the design side of things, your design nicely fits in with the brand values.
You may want to fix the card like others said, or maybe even ditch it like @afif said.
As for the font, I'm suggesting going for a geometric/monospace font, and maybe a custom font for logos and stuff
You can probably try some overalp. Two layers: one with the empty element (having only the borders) and the other with the filled elements. The first layer without too much elements at the background.
It will either give a cool result or ๐คฎ
Worth a go, I will see if I can give that a try later this week as that may be nice and would also work with what I was saying with Mads about generative images.
If it doesn't work for the static content, for a video background having two layers that move at different speeds could be really interesting.
Thanks bud, great suggestion!
Business Card? Haven't seen one of those for years ๐
Joke aside, it looks good!
The pattern reminded me of my own deconstructing art post a while ago!
It was one of those things that I thought about when I was half way through the design as I realised it could be a generative background one day (thanks to your posts!) so that is on the cards!
Business cards may be old hat but they are always handy to have now that we can meet up in person again, you never know who you will bump into and there is something so nice about a physical piece of card!
Plus we will be getting RFID / NFC cards so they are techy!
Cool! ;-)
I would like to tell you change the font
Good point, haven't picked a font yet (in fact, spoilers...going to make our own, don't tell anyone!).
At the moment it is just Century Gothic so that is probably why it doesn't jump out at you (but it is a similar style to the font we will create!)
Great feedback โค
I like this font fonts.google.com/specimen/Spartan do you ?
Or, here's a list for you
fontshop.com/families/century-goth...
A very attractive font, for us it wouldn't work due to the inconsistent height of letters ("t" for example) as that might make things harder to read for people with dyslexia.
We will be designing something similar to fonts.google.com/specimen/Poppins?... and fonts.google.com/specimen/Comforta... but with a wider range of variance and the ability to adjust the axis for italics.
Should be interesting as I have never designed a variable font before!
why don't you try inter
fonts.google.com/specimen/Inter
I will see if that fits with what we are looking for as a good stop gap option!
You will notice the text in the InHu logo is a custom design, so I think a custom font that incorporates those elements in capital letters is the way we are going to go (the "N" is unique I think!).
Plus, how much fun it will be to learn how to create a variable font (if it is anything like the last time I made a font it will take about 2 days! ๐คฃ)
Hi I created a tool to create and maintain colour palettes.
You can specify how to handle each colour variants and test them for contrast accessibility or simulate visual impairments.
Let me know what you think about it if you can:
geenes.app
Took a bit of getting used to but it is really clever!
I will play some more but I like the accessibility bit as a quick reference point!
Bookmarked and when I need a palette next I will test drive it to destruction!
That first design is giving me retro movie theater/roller rink carpet vibes - love it! But you're right, it is pretty busy for the use case!
I really like the energy from that business card example. For a lot of people, accessibility has some boring/tedious/[negative adjective] connotations. However, between the shapes, 'motion', and color scheme, this design is exciting and draws you in!
Thanks Erica, yeah that first image is defo "saved by the bell, top of the pops in the 80s" vibe!
Hopefully our design is a modern twist on that ๐ค as I don't want to have to start designing neon tshirts, wearing leg warmers (or is that 70s?) and carrying a boom box! ๐คฃ
You hit the nail on the head, the idea is to show accessibility doesn't mean boring, hopefully we manage it!
Glad you like it and thanks for all the ego stroking!
It's a cool design! I appreciate the balance between order and chaos (mostly random pattern of shapes, but keeping them in distinct lines).
Tiniest of nitpicks here, wanted to make sure it was intentional: the rectangular shapes on the front and back of the card have different levels of roundedness. More specifically, all the shapes on the front are more rectangular, and all the shapes on the back are more oval.
No not a nitpick, actually a really valid point and a mistake on my part!
I resized the items from the front to the back. Illustrator doesn't change the rounding to account for this so that is why they are different.
No shortcuts for me this time it looks like, I will have to recreate the slightly smaller versions (or convert the shapes to static objects so they can resize).
The desired style is the more rectangular style front the front as the buttons, containers etc. on the site will be similar (big rounded corners).
I suppose my other option is to mix and match them so I can use either style. Maybe I will do that!
Loads to think about!
Great spot, it is annoying me now..."thanks" ๐๐คฃ
I presume the business card will be animated?
I wasnโt sure whether to respond in a silly way or not as I wasnโt sure if you thought this was a digital card. ๐
It will be physical cardboard with NFC.
If this was sarcastic then damn, missed the chance to have some fun!
It was 100% sarcasm, sorry man ๐
Damn...in that case, here is the response I would have given (just won't be as funny now ๐ฃ)
Of course they will be animated. I have allocated ยฃ150 budget per card so I have bought several small LCD screens and had custom PCBs printed.
We are going to strap two screens back to back so it is animated on each side.
Additionally there will be a light strip around the outside so you can say "hey InHu" and it will light up, connect to the nearest Wi-Fi network, contact out servers, then return a suitable insult that is in-keeping with the "angry accessibility guy" theme.
Of course we have also designed them to work as a cluster, so our whole website will be powered purely by the business cards, true distributed computing.
It means I have to travel the world to ensure I have a CDN in every Country though but overall I think it is a cost effective and wonderful idea.
๐๐คฃ๐คฃ
A problem I see with the cards (and I know this is a mockup), is that people's names and emails vary a great deal in length. You'll have to give people short aliases or make the lozenges that contain these details as long as the longest current employee, and hope you don't get anyone else in with a long name, or make the cards inconsistent.
A friend of mine had a name which got truncated on credit cards, for example.
Great points, I did realise I would have to stack the names (First name, new line, surname) and reduce the font size a bit in certain circumstances.
Saying that I reckon there will only be a couple of people have cards anyway...as Mads said in another comment, they are out-dated!
Who knows, maybe the design needs a rethink...great observations and definitely food for thought!
Just a tangential question... how do you pronounce 'InHu'?
Is it 'in-hoo', 'in-huh', or... 'aye-noo'... ? :)
"In Hue"
But technically it should be "In Huh" as it is short for Inclusivity Hub.
I think it will be come running joke of "In Who?" though (oh no, what have I done saying that out loud!) ๐คฃ.
Don't worry, that would be "in whom" and I'm sure nobody will think of it ๐๐