Accessible Design: 5 Tools and Resources For Color & Contrast
Prototyping Tools Guide
Accessibility is for everyone, and since the Internet has taken the world by storm, no one should be excluded from the benefits websites and apps have to offer.
This Post’s Focus: Color and Contrast
A good place to start when it comes to accessibility design is designing with color and contrast in mind. The reason is that vision disabilities affect a very wide percentage of the population. In the United States alone, according to the Howard Hughes Medical Institute as referenced in the Color Blind Guide, “about 3.7% of 12 million Americans are colorblind.” And according to the CDC (Centers for Disease Control and Prevention), about 12 million Americans 40 years old or older have a vision impairment. Since interaction with digital interfaces is so important for making a living, and since there are so many that are visually impaired, it should be a no-brainer to make sure that those with these impairments can participate and thrive in this space.
Now that the reason for accessible design has been stated, what can we as UX designers do about it? First, we can be aware, and second, we can have knowledge of what tools currently exist to help our future designs and current designs. So here’s a list of current resources and tools for accessible design.
TOOL 1: COLORSINSPRO by HEXORAL STUDIO
An Adobe XD Plugin
Colorsinspro is a plugin tool where designers can select a group of assets, and measure the contrast of the text versus the background. It gives the score of the design, including a star rating, and even an emoji telling designers how good or bad the contrast is. Right now, it seems it's only for Adobe XD, though the documentation says that it is also a plugin for Figma. I could not find the plugin on Figma, but it may be a plugin coming soon, so if you want to follow Hexoral Studio’s Figma profile, you can be updated if the plugin does come to Figma.
Pros:
- Free plugin
- Shows color contrast scores in an easy-to-understand way
- Accessible color palettes, and color palettes based on color theory
- Has a colorblind simulator
- Generates color gradients and gradient shades
- Has a popular brand color library with an open color library
Cons:
- Is currently only on Adobe XD
- Does not generate a contrast report for an entire artboard, so individual elements need to be selected at a time
TOOL 2: CONTRAST by ROMAN NURIK
A Figma Plugin
Contrast by Roman Nurik addresses the need for a quickly generating contrast report which plainly shows how the contrast of the text on the background scores. Designers can even generate a report for all of the artboards in a project all at once, which helps give a quick snapshot of what needs to be fixed.
Pros:
- Free plugin
- Shows color contrast scores in an easy-to-understand way, specifically highlighting areas needing attention
- Can generate a report for multiple artboards in one project
- The plugin is straight from Github, so this can technically be added as a sketch plugin
Cons:
- Is currently only built for Figma
- Doesn’t have a report for color blind vision
- The report has small text so it can be a bit hard to read
TOOL 3: ABLE by SONDRE KVAM
A Figma Plugin
Able is a plugin made specifically for Figma. It can be used to preview what two layers look like on top of each other with different kinds of vision impairments. It not only gives a contrast score, but a text size score which is very useful when designing for accessibility. It is easy to use but is still currently in development. So, if you are interested in following Able and Sondre’s work, you can follow Sondre’s Figma profile.
Pros:
- Free plugin
- Shows color contrast scores of two elements
- Shows text score
- Has the option to preview visuals with different visual impairments
Cons:
- Is currently only built for Figma
- Only compares contrast for two selected layers, and cannot do multiple layers at a time
- Currently not finished as they want to do more with this plugin
TOOL 4: STARK
A Figma, Sketch, and Adobe XD Plugin
Stark is one of the most robust accessibility prototyping tools out there and can not only has a way of measuring contrast and a way to view from a color blind person’s perspective but has a typography scorer, a place to put in alt-text, and other tools. Their Visual Simulator is new and is luckily a part of their free tier. It makes sense that a tool like this would not be completely free, but at least their contrast scorer and their vision simulator are in the free tier. This one is definitely worth a look if you have some extra dollars to get the Pro version.
Pros:
- Shows color contrast scores of two elements
- Shows text score
- Has the option to preview visuals with different visual impairments
- The contrast and color vision simulators are mostly free to use
Cons:
- Need to pay to unlock everything
- Every once in a while, Stark makes you log in again from the prototyping tool even though you are logged in from the browser, even if just using the free version
TOOL 5: LEONARDOCOLOR.IO
A Web Resource by Adobe
Leonardo is the brainchild of Nate Baldwin. It answers a lot of questions that designers have about really designed with accessibility in mind. Balwin helped reinvent the math behind what is actually color and contrast accessible, and the Leonardo tool takes into account Color Polarity, which many other tools do not (as vision decreases, so does contrast). There are also options to create full-color palettes for both light mode and dark mode. I highly suggest following Nate Baldwin’s work if you are interested in designing for accessibility.
Pros:
- An Adobe open-source project (so it is a free tool)
- Ability to create and test color palettes for both light and dark mode
- Easily create color palettes that are friendly for color blind vision
Cons:
- Currently not a plugin in any prototyping tool
- Cannot view scores of current projects directly
My Thoughts
Designing for color and contrast is only the beginning of designing with accessibility in mind. There’s also designing for those who are completely blind, those with learning disabilities like dyslexia, etc. Sometimes it can be overwhelming, so I believe where designing with accessibility starts is who your audience is while remembering that accessibility is definitely for everyone.
