Accessibility is the practice of creating digital products, apps or websites usable for everyone, including people with visual, motor, auditory, speech or cognitive disabilities.
All UX designers should aim to create more accessible design, because better accessibility means products that can be used by more people. Studies have shown that over a billion people suffer from disabilities. Accessible design means that your digital products can be used by all of these people. Better accessibility support also leads to better UX and cleaner code.
We have put together a guide of accessibility testing tools, color contrast checkers and color blindness simulators. This guide is helpful for both UX designers and developers who create web and mobile digital products.
Tools for finding accessible colors for your website or mobile app
Color is one of the main topics that we talk about when it comes to accessibility and design. This is because the colors you choose can greatly impact the way people perceive content and are able to understand it. Poor color choices can lead to users unable to actually view or read content on your website or mobile app.
Contrast
This is a simple macOS app to check colour contrast ratios. This app also is useful to identify colour pairings that are accessible based on the Web Content Accessibility Guidelines 2.0.
Accessible Colour Palette Builder
This is a very useful and great tool that helps you build accessible colour palettes. You can enter up to 6 colours and see the colour matrix to know which colours should be used together that are aesthetic and accessible. It allows you to enter up to 6 colours at a time. This is a great tool that a lot of UX designers and developers like to use because it shows you the relationship between the colours on your palette and see which combinations have a good contrast ratio. A higher contrast ratio is an indicator of better accessibility.
ColourBox
This is a tool that uses a preset algorithm to build accessible colour systems. The tool sorts by colour, hue, saturation and luminosity when picking colour combinations.
Contraste
Contraste is a free and simple app that helps you check the accessibility of text on your website. It checks the accessibility of text against the Web Content Accessibility Guidelines (WCAG). The app allows you to quickly know if a combination of colours, for text and the website background passes the accessibility threshold defined by the WCAG. And thus is accessible to users with visual impairments.
Cloudflare Design Colour Tool
The Cloudflare design colour tool helps you preview different colour combinations with typical elements.
ColourSafe
The Coloursafe tool works by giving your text a background colour and setting a text style. It then shows you the different colours and shades that have the recommended contrast ratio required as per the Web Content Accessibility Guidelines. The ColourSafe tool is a very useful tool to create colour combinations that have a good contrast ratio.
Data Viz Colour Picker and Accessible Colour Generator
The Data Viz Colour Picker is a really helpful too that helps you choose colours for data visualisations like graphs. It helps designers create a palette that has equidistant colours in it which can help users differentiate data.
The same team has created the accessible color generator that shows you the closest variations of a particular color that still meet the Web Content Accessibility Guidelines.
Tools for checking if the contrast on your website meets the web accessibility guidelines
Contrast is the difference in brightness and colour that makes an object or its representation in an image or display distinguishable. It is determined by the difference in the colour and brightness of the object and other objects within the same field of view.
Contrast is really important in UI design because the contrast will determine how readable the text actually is against the background colour. Other key elements on the website should also be clearly differentiated.
“The WCAG has defined a set of guidelines that when followed ensure good accessibility. One specific criteria is focused on Contrast:
Success Criterion 1.4.3 Contrast (Minimum) (Level AA): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no contrast requirement.”
Source: The Website Content Access Guidelines 2.0
Contrast Checker — another free colour accessibility tool that helps check the contrast between the background of an element and the page itself.
Colorable
Colorable is a free web-based contrast tool that takes a set color palette and get contrast values for every possible combination. It includes pass/fail scores for the WCAG accessibility guidelines.
Tools to simulate color blindness
Stark
Stark is a paid Sketch plugin that allows you to simulate different types of colour blindness.
Colour Oracle
This is a free color blindness simulator. It allows you to see colors as seen by colorblind people.
Tools to test accessibility on your website
WAVE
This is a free web accessibility evaluation tool.
Conclusion
With these tools, creating accessible design has become easier than before. Therefore there is no reason for UX designers to not learn more about and create accessible design that can be used by everyone.