Designer’s Toolbox: Create visually accessible experiences using Stark

Designer Toolbox is a series where we explore the niche apps, extensions, and other tools that help make our day-to-day design work just a little bit nicer. View all Designer Toolbox posts

Accessibility is a crucial aspect of design that sometimes can get overlooked when designing products. Although designers and companies alike are becoming more aware of accessibility standards and aim to design more accessible products, the tools available for checking a design’s level of accessibility have not always been the friendliest or the easiest to use.

Enter Stark, a free plugin for Sketch that allows designers to easily check readability contrast, simulate color blindness in real time, and then tweak your designs based on that feedback. So far, we’ve found Stark to be especially useful when working on color palettes for data visualization, and for easily checking readability contrast within files.

Stark makes it easy to simulate how work is perceived through the eyes of someone who is colorblind. It allows you to quickly flip between the eight colorblindness profiles while having the freedom to move and resize the Stark window around your file as you compare. You can also easily export these simulations as .png files to share with team members or include in client presentations.

 

Launch Stark quickly to begin simulating colorblindness profiles

Launch Stark using SketchRunner to quickly begin comparing colorblindness profiles within your Sketch files

 

You can also quickly check the contrast between two layers using Stark. To do this, flip to the contrast tab in the window and select two ungrouped layers in your Sketch file that you’d like to compare. Click the ‘check contrast’ button, and Stark analyzes the contrast ratings using WCAG 2.0 standards.

 

Select two layer in your Sketch file to compare their contrast and readability levels

Select two layers in your Sketch file to compare them against color contrast guidelines

 

Bonus: Use the Stark window to simulate colorblindness in other applications such as websites and exported files in addition to your Sketch files. This feature makes for easy comparisons of different content, and seems like it could be useful when conducting website or product reviews during the beginning stages of a project redesign.

 

Drag other windows  underneath Stark to simulate colorblindness profiles beyond your Sketch file

Drag other windows underneath Stark to simulate colorblindness profiles beyond your Sketch file

 

So far we’ve really enjoyed using Stark and having it readily available when I need it. It’s a clean and lightweight plugin that can truly increase accessibility awareness. I’d recommend Stark to anyone who is looking to create better experiences that aim to be accessible to everyone.

Get Stark 

For more on improving accessibility for visually impaired users, check out our in-depth post, “Improve Accessibility for Users Who are Visually Impaired with These 9 Tips” 

Subscribe to our newsletter to receive more content like this.
Our monthly newsletter is targeted at those with an interest in UX design, research, and strategy.