Design for everyone — Colour accessibility and naming conventions | Colour theory Pt 7
How to ensure that the design could be collaborated and be usable for everyone with disabilities?
How to name the colours in a colour palette
If you are a sole designer, the naming conventions could be of least concern. But if it is a collaborated project, make sure the naming conventions of the colours are proper.
An approach that could work for everyone, without need to explain the logic behind it:
{usage of the colour}/{variations}
If the usage of the colour is primary with different shades, used for “default”, “active”, “hover” and “inactive”, the naming could be:
primary/default,
primary/active
primary/hover
primary/inactive
This is called functional naming convention. We describe colours without even mentioning their names(like green, red, etc)
So even a colour blind designer or a new member in a team can use the colours for the design!
This approach is clear, scalable and universal working for all small, medium and large scale projects!
Colours accessibility
Design for everyone irrespective of their Physical, Auditory and Visual disabilities.
Colour accessibility enables the people with visual impairments use the UI. The concept of semantic colours is all about colour accessibility!
People suffering from monochromatic vision cannot distinguish hues so they can only see different shades of grey, so value of colour is more important than the other attributes of colour.
We can create good contrast between the shades by changing the value of the colour so that users with monochromatic vision can distinguish them.
A few colour vision deficiency:
Monochromatic Vision — No colours, only grey shades
Protanopia Colour Blindness — Perceive red colours as darker colours, usually red appears to be dark green.
Blue cone Monochromacy — Can not see the blue colour properly.
Validate your colour palette with contrast ratio
Refer Web Content Accessibility Guidelines(WCAG), the best practise is to have a level of AA and AAA contrast ratio in the design.
AA score for minimum contrast: minimum 4.5:1 for normal text and minimum 3:1 for large or bold text
AAA score for enhanced contrast: minimum 7:1 for normal text and minimum 4.5:1 for large or bold text.
Online tool to measure contrast ratio:
Coolors.co — for creating colour palettes and check contrast ratio.
Tools for accessibility
Stark — Figma, Sketch and AdobeXD plugin. — let’s you check the colour contrast ratio and simulate different colour deficiency. Select the art board and run the plugin
Contrast — Figma: Lets you check the contrast ratio, available for unlimited scans. Also scans entire design to find text contrast ratio.
whocanuse.com — An amazing website to check contrast ratio and how colour combinations can affect different people with visual impairments. — Can simulate the dark mode and visibility under sunlight in a phone screen!
Online tools for colour palette creation
khroma.co — use AI to create personalised colour palettes!
Next Steps
To get a practical experience, go to your favourite website and find the contrast ratio of the elements by inspecting in the developer tools. See if it meets the WCAG standard. See if the website is designed for everyone. Try the plugin mentioned in your favourite design tool to get an accessibility report.
In next blog we will see how to apply a colour palette to a website!
References and useful resources
Skillshare course by Arash Ahadzadeh — Create Amazing Color Schemes for Your UI/UX Design Projects
Figma for design.
Youtube Channel by Ran Segall: https://www.youtube.com/c/FluxWithRanSegall
Youtube Channel — PiXimperfect