Sarah L. Fossheim

Developer + Designer

Tools for designing good-looking accessible interfaces

It's important for me that everything I design is both accessible, ethical and user friendly. And to be fair, the three really go hand-in-hand. A product cannot be friendly if it's harmful or inaccessible.

Interfaces can be aesthetically pleasing, while also remaining accessible. And luckily, these days there are a lot of tools out there to help us achieve that!

Figma plugin: Color Blind

Color blind for Figma is one of the best tools to test how designs look for people with different types of colorblindness.

Screenshot of the color blind plugin for Figma

It's free and very thorough, but the only downside is that it doesn't work for images. And you have to re-run the plugin and create new copies whenever you make changes.

Screenshot of the color blind plugin for Figma

It's easiest to create a separate accessibility page and run the plugin from there. That way old versions can be kept for comparison without making the main "working" page too cluttered.


Figma plugin: Able

Able is a great option for checking the contrast of text. Select two layers and the plugin will tell you what the values are and whether it passes WCAG accessibility guidelines or not.

Screenshot of the Able plugin for figma


Color inspiration

At first it might feel a bit overwhelming or intimidating when finding out your colors need more contrast, but that doesn't mean you have to go for "ugly" or "boring" colors.

You shouldn't pick the first high-contrast color combination that you come across. In fact, even if a color combination passes the WCAG guidelines, it still might not be fully accessible. For example a combination of very bright colors might have enough contrast, but could become painful on the eyes over time.

Testing colors against accessibility guidelines should happen early-on in the process, enough time should be set aside for it.


I often use color palette generators in combination with Figma's accessibility plugins when deciding on color schemes. They're good for inspiration and push me to explore combinations I usually wouldn't think of.

Colorable is really useful one for that. It randomizes predefined color combinations and includes pass/fail scores for the WCAG accessibility guidelines.

Screenshot of colorable

Instead of using the randomization functionality, you can also paste your own color codes, or modify the hue, saturation and lightness.

The scores get live-updated accordingly, so it's a very easy and user-friendly way of experimenting with different color combinations.


Another good color generator is Khroma. It generates an infinite amount of color combinations based on colors you like, and also includes values with regards to the WCAG.

Screenshot of Khroma

They do still show combinations that fail the guidelines, so make sure to always double-check the values in the info panel.

If in some case an accessible color scheme doesn't meet other (branding) requirements, a possibility is to create "accessibility settings" where people can choose a different color scheme, font or text size.

More than just color

This article mainly focused on tools and resources for color and contrast, but accessibility is a lot more than that.

Font-size, language, animations, scrolling behavior, sounds, patterns and so much more all influence how accessible something is for a wide variety of people.

While I haven't found any tools that can test or automate feedback on those aspects of design, I did compile a list with tips and guidelines that include those aspects as well:

For developers

There are good accessibility tools out there for developers as well, but I'll write a separate list on how I work with accessibility when coding.

As a start, try to navigate your product with VoiceOver on, and turn off css now and then to see if your content is still understandable without it (for example, where do absolutely positioned blocks of text end up when css is turned off).

Posted on 2019-12-21

Hi 👋 I'm Sarah, a multidisciplinary developer and designer, specialized in creating complex and data-heavy products that are accessible, ethical and user friendly. I also enjoy making art with CSS. On here, I frequently write about HTML/CSS, React, Python, UX design, accessibility and data visualizations.

If you like my work, consider sharing this post, buying me a coffee, becoming a patron or connecting with me on Twitter. I'm also on Twitch, CodePen, and GitHub.

Similar post | 2020-01-12

An intro to designing accessible data visualizations

design data a11y

Similar post | 2020-05-20

An introduction to accessible data visualizations with D3.js

a11y front-end tutorial D3.js data