Adaptive, accessible and automated colour for Design Systems

Calibrating contextual colours to be readable and recognisable anywhere.

Example of reality and expectation before we tackled the subject.

Navigating through digital colours

Example of the scale of theoretically visible colour chroma under RGB model.
Comparison of ideal colour space and true colour space. (The illustration above are created to reflect Munsell chroma units that been referenced in Atlas of the Munsell Color System.)
Example of colour hues performance of the WCAG contrast ratio on a light background.
Example of colour hues performance of the WCAG contrast ratio on a dark background.

Capturing the colour we know

Perceptual colours in real life.
The RGB “contextual” colours.
Example of the adjustment of our design system’s positive $success green.
Example of the adjustment of design system’s informative blue $info.

Not one, but many…

Colour structure
Contextual colours on UI background shades.
Lightness adjustment by font’s size.

And so, adding the magic (or automatic execution)

Where the magic happens?

Wrapping up

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store