This neat colour-blind simulator and contrast checker for Sketch called Stark aims to help designers think about and design with accessibility in mind right from the very beginning of the product building process. I’ve been searching for a tool like this for a while, as currently I have to manually copy and paste my colours to Webaim’s checker to check for accessibility and contrast.
I’m so impressed with it – it’s fast, addresses real-world problems and is quite eye-opening with regards the colour blindness aspect. What’s more, I can now check my designs directly within Sketch. Using the preview window, I can select from the simulator and contrast checker to ensure my designs are as great for those who don’t see the way a typical person does.
What is colour blindness?
Most of us share a common colour vision sensory experience. However, some people – my Dad included – have a colour vision deficiency, which means their perception of colours is different from what most of us see. The most severe forms of these deficiencies are referred to as colour blindness. People with colour blindness aren’t aware of differences among colours that are obvious to the rest of us. According to the National Eye Institute, as many as 8 percent of men and 0.5 percent of women with Northern European ancestry have the common form of red-green colour blindness. Stark has the ability to test all types of colour blindness, eight in total, all from a dropdown so you can see how your designs will display for these people.
How to install Stark
I use Sketch Toolbox to search for and install my plugins, so fire that up and search for Stark. Click install.
Now restart Sketch if you have it open to refresh your list of plugins.
We have a recipe app called Flavr, which I’d like to test for accessibility before coding begins.
Firstly I’d like to test for colour blindness so I select my art board and from the Plugins menu choose Stark and hover over Simulate Colorblindness and select one of the 8 settings to test.
We’ll be presented with a screen like so:
Now my design is rendered exactly how a person with this type of colour blindness would see and interpret my design. We can select other types to simulate from the dropdown menu and the design will refresh accordingly. We can also export this as an image to peruse later.
Checking colour contrast
I’d like to now check the contrast of the colours I have chosen against WCAG 2.0 standards. As designers, we need to ensure great readability and legibility of our text. Thanks to Stark, this is simple to do. Select two layers on your art board that you’d like to compare and from the Plugins menu choose Stark and hover over Check Contrast. Here I am checking the grey text against the white background.
Some seriously amazing work by @imcatnoone and team – well done. Our community is better for this kind of thinking, we need more of it in the design tools space.