Skip to main content

Tools for designing good-looking accessible interfaces

Posted on

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: a menu is open where different types of color blindness can be selected

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: the same screen (colored card layout) simulated for different types of color blindness

t'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.

Alternatives

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: it shows the two selected colors, their color contrast for large text and small text, the contrast ratio and a preview with text

Alternatives

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.

Colorable

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.

Colorable interface: large colored type on a colored background, the text color and background color can be set by the user, and contrast ratio and AAA/AA/AA Large/Fail label are shown

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.

Khroma

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.

Khroma screenshot: differently colored cards with colored text. The name of the colors are written on the cards, and when selecting a card it shows the hex and rgba code along with WCAG Ratio

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).

Hi! 👋🏻 I'm Sarah, an independent developer, designer and accessibility advocate, located in Oslo, Norway. You might have come across my photorealistic CSS drawings, my work around dataviz accessibility, or EthicalDesign.guide, a directory of learning resources and tools for creating more inclusive products. You can follow me on social media or through my newsletter or RSS feed.

💌 Have a freelance project for me or want to book me for a talk? Contact me through collab@fossheim.io.

If you like my work, consider:

Sign up for notifications and extra content

Subscribe to my newsletter to receive a notification when a new post goes live. I will also send occasional newsletter-only content about front-end development, accessibility and ethical/inclusive design.

You'll need to confirm your email address. Check your spam folder if you didn't receive the confirmation email.

Similar posts

View post archive