FEATURES
The ultimate UI design guide
Selecting the perfect colours for your design goes way beyond
aesthetics: it can inform the entire hierarchy of your siteW
hen it comes to UI design,
colour is habitually one of
the first things that we
enjoy dabbling with but we’re taught
that diving straight into visual design
is a bad thing. This is certainly true,
however when it comes to visual
consistency, colour should be a top
concern because it plays other roles.
Colour in UI design can be mighty
effective but since some users (many,
actually) suffer from various types
of visual disabilities, it’s not always
reliable. That being said, it’s not
necessarily about the specific colour
that’s being used, but rather the type
of colour. This may not be true when it
comes to branding since colour is used
for emotional impact in this regard but,
in UI design, colour is also used for
communicating intent, meaning and, of
course, visual hierarchy.The three types of
colour
Colours hold meaning, so it’s important
to not have too many of them. Too
many meanings results in more things
that the user has to understand and
remember – not to mention more colour
combinations for us to worry about.
Generally speaking, this would be the
recommended format:
O A call-to-action colour (also the main
brand colour)O A neutral light colour (ideal for text-
heavy content)
O A neutral dark colour (better for UI
elements or dark mode)
O For all of the above, a slightly lighter
and darker variationThis enables the following:
O Dark mode will be easily achievable
O Our CTA colour will never conflict
with other colours
O In any scenario we’ll be able to
emphasise and de-emphasisepick the right palette
Set up your palette
With your UI design tool of choice,
create one fairly large artboard (tap A)
for each colour (named ‘Brand’, ‘Neutral
/ Light’ and ‘Neutral / Dark’). Then, in
each artboard, create additional smaller
rectangles displaying the darker and
lighter variations of the colour and also
the other colours themselves.
I would consider slightly lighter and
darker as 10% extra white and 10%
extra black respectively. When you’re
done, display a copy of the typographic
styles on each artboard. The colour of
these text layers should be neutral light,
except on the neutral light artboard
where they should be neutral dark.Contrast
Next we’ll need to check our colours
for optimal colour contrast. There are
a variety of tools that can do this, for
example the Stark plugin (https://getstark.
co) for Sketch and Adobe XD or Contrast
for macOS (https://usecontrast.com) –
however, an online solution such as
Contrast Checker (https://contrastchecker.
com) or Colour Contrast Checker (https://
webaim.org/resources/contrastchecker) will
do just fine.
Check the colour contrast for each
combination and tweak the colours
accordingly. If you’re not sure what
colours to use, try using Color Safe’s
(http://colorsafe.co) recommendations.WCAG 2.1 Checklist
https://uxtricks.design/blogs/
ux-design/accessibility-
standards
This checklist works through
the dos and don’ts of designing
for accessibility, broken down
by disability type. It also runs
through colour contrast.A11y Project
https://a11yproject.com
The A11y Project is a massive
hub for all things accessibility
related. It includes resources,
tools, tips, tutorials and is
created by the maker of the
Stark plugin and receives
funding from InVision.Colors
http://clrs.cc/a11y
Colors is a set of 90 colour
combinations that have the
appropriate amount of colour
contrast in order to satisfy the
WCAG 2.0 Guidelines – some of
them even manage to meet the
AAA standard.Stark
https://getstark.co
The Stark plugin is compatible
with Sketch and Adobe XD and
helps you check colour contrast
and simulate colour blindness
directly from the canvas.
Support for Figma and InVision
Studio coming very soon.Top tools and resources
Above Color Safe’s recommendations can help you select
colour combinations that have sufficient contrastAbove Creating artboards displaying your chosen colour
palette means that they’re to hand whenever you need them