Celebrate World Accessibility Day with Adobe Colour

Accessible design starts with colour choice, and Adobe Colour is creating tools to bring accessibility directly into colour creation.

Building Tools for Accessibility

21st May is Global Accessibility Awareness Day, but for Adobe Colour, accessibility is on our minds 365 days a year. Colour Vision Deficiency, more commonly referred to as colour blindness affects about 8% of the world population. When you add in contrast sensitivity, age related vision degeneration and other issues, this is a serious portion of the population who can benefit from accessible visual design.

When designing with colour, it helps to think from the start about accessible design. Factoring in how your users perceive the colour choices you are making early on will save you valuable time. Too often this step still happens after the colour ideation phase, meaning that you have to go back to the colouring board to find new hues that work with your design concepts. Adobe Colour is rethinking how and where designers make their accessibility checks, and bringing the process directly into the colour wheel.

Photo by petrroudny / Adobe Stock

Conflict Lines

For people affected by colour blindness, combinations of certain hues and shades can cause confusion trying to distinguish between colours. Adobe Colour’s new accessibility tools allow you to check your theme for three types of colour blindness. Deuteranopia and Protanopia are both types of red-green colour blindness. People with these types of colour blindness have trouble distinguishing between reds, greens, browns and oranges. Tritanopia is a type of blue-yellow colour blindness and causes confusion between blue and green, purple and red, and yellow and pink. The accessible colour wheel targets all three of these types of colour blindness and provides a simulated view of how your theme will appear to those affected by each type.

Using the accessible colour wheel, problematic colour combinations are flagged by our conflict lines, which highlight which swatches are indistinguishable. This allows you to create five colour palettes with swatches that are distinct from each other for all audiences.

Conflict lines will connect swatches that are not distinct from each other under at least one type of colour blindness. Use the simulator below the colour sliders to determine how colours will be viewed in all three types of colour blindness. Simulation view shows according to the most severe side of the colour blind spectrum for each type.

Conflict Guides

Once you identify which swatches have problems, you can easily resolve them in a natural manner using the colour wheel or sliders, and our conflict guides, which appear on the colour wheel when a swatch is activated to guide you into avoiding problematic colour zones for all types of colour blindness. Use the guides by avoiding connecting any line with another swatch puck.

When you save a theme without conflicts from the accessibility tools, it will automatically be tagged and displayed with a badge indicating it was created on our accessibility tools. This allows you to quickly see which themes are colour conflict free when browsing your Libraries.

Building Accessible Tools

While we have been hard at work designing tools for accessibility, we have also been taking a look at how accessible those tools are. The Colour website is now fully responsive, ensuring that the experience is comfortable and easy to use on a variety of devices.

Photo by Golden Sikorka / Adobe Stock

We know that navigating web content with accessibility tech can be a frustrating experience. . For those who visit Adobe Colour with mobile accessibility devices, we have made the design fully responsive, meaning it will perform well on a variety of screen sizes. Sliders and colour fields can all now be changed with arrow keys for easy natural adjustments, and you can use tab navigation throughout the complete create experience. We have also implemented a better flow for users who visit Adobe Colour’s create tools with screenreading software, reducing the friction of navigating each section. If you visit Adobe Colour with a screenreader or accessibility device please let us know how you find the experience, and what we can do better.

What’s Next?

Next up we are working on accessibility tools for contrast, including text and graphic elements. We are also building workflows to help design themes for Monochromacy and other kinds of colour sensitivity. We would love to know how you use the Colour service, do reach out to the team by selecting the feedback icon in the header menu, and let us know what features you want to see from Adobe Colour.

Photo by Aurielaki / Adobe Stock

#MadeWithAdobeColor

We are so excited to see what you create, and we would love to continue the conversation! While sharing your work on Behance, don’t forget to select Adobe Colour under “Tools Used” for the opportunity so we can see the beautiful things you create. Be sure to tag them with #AdobeColor on social media.

As always, follow us through the Creative Cloud social channels (Facebook, Twitter, and Instagram) and on the Adobe Drawing Instagram!