How to design an accessible color scheme

Katie Riley
Mar 6, 2019 · 8 min read
Photo by Harry Quan on Unsplash

But first, what exactly are accessible colors?

How I built a more accessible color scheme

Calculate the contrast ratios of all your existing colors

Choosing the greys

Primary headers, secondary “host” information, tertiary null state
Testing different shades of grey by reducing opacity
Calculating contrast ratio using Stark Sketch plugin

Choosing the bright colors

If your Sketch says RGB, click on the RGB label to change to HSB mode.

Wrapping it all up

Before and after

Envoy Design

Stories and ideas from designers that challenge the…