Accessible design: A story of three Jira icons

Hannah McKenzie
Designing Atlassian
4 min readOct 18, 2022
A close-up of an eye with a rainbow stripe of light overlapping it.
Photo by Harry Quan on Unsplash: A close-up of an eye with a rainbow stripe of light overlapping it.

“Great things are done by a series of small things brought together.”
Vincent Van Gogh

Small things can have a big impact.

Did you know there are different types of color blindness? In Australia, about half a million people live with some degree of color blindness. In the US, it’s closer to 12 million people. Worldwide, there are an estimated 300 million people living with some degree of color blindness; some sources say that number is closer to 350 million.

Many of these people struggle to distinguish green from red.

And up until now, Jira Software’s pull request icons have relied on grey, green, and red to differentiate between open, merged, and declined pull requests:

The original icons: grey (open), green (merged), red (declined).
The original icons: grey (open), green (merged), red (declined).

This is how the icons can look for some different types of color blindness:

An example of how the icons can appear for people with deuteranopia or protanopia: The colors appear in different shades of brown and grey.
How the icons can appear for people with deuteranopia or protanopia.

On a board in a Jira Software project, these icons are small, appearing alongside other small details on each issue, such as story points, assignee avatar, and issue key.

This is an example of a board in a project within Jira’s iOS app. The pull request icons are circled:

A Jira Software project’s board in the iOS app; 4 pull request icons are circled.
A Jira Software project’s board in the iOS app; 4 (original) pull request icons are circled.

Although small, the icons convey meaningful information.

In late 2021, I began my quest to update the development status icons, and make them accessible for colorblind users. It began with a note in the Accessibility team’s Slack channel:

From Hannah McKenzie: “Hi team. I’m curious, are there currently any plans to make Jira’s pull request icons more accessible? At the moment, they’re identical, differentiated only by color.”

A close-up of a hand placing red pins on a map.
Photo by GeoJango Maps on Unsplash: A close-up of a hand placing red pins on a map.

In early 2022, during a Slack discussion with several Designers and Engineers, a rough mockup was created:

Early (rough) ideation of accessible pull request icons.
Early (rough) ideation of accessible pull request icons.

Design conceptualization began, and quickly gained momentum:

Early designs of accessible pull request icons.
Early designs of accessible pull request icons.

After several more discussions and design sparring sessions, the new, accessible pull request icons were born:

The new icons: Open remains the same; merged now incorporates a tick; declined incorporates a cross.
The new icons: Open, merged, declined.

While the icons are still grey, green, and red to indicate open, merged, and declined, they also incorporate a (green) tick for merged, and a (red) cross for declined; the merged icon’s lines join (to signify the merging of the branch), while the declined icon’s lines do not merge.

People who are colorblind can now visually identify different pull request icons on their Jira Software board:

A Jira Software project’s board in the iOS app; 4 (new) pull request icons are circled.
A Jira Software project’s board in the iOS app; 4 (new) pull request icons are circled.

This journey taught me…

  • Keep persevering, even if the journey looks tricky. If you work on a complex product, or within a large organization, you may have to reach out to multiple teams to connect with the right people.
  • Something that appears small in the UI may have involved many different people behind the scenes. Often, it’s a series of small things (in this case, many conversations and sparring sessions) which lead to something great being shipped to customers.
  • Making accessible products is important to everyone, and the small details really do count. Everyone benefits, including people who identify as non-disabled. Did you know that many common products were originally designed for accessibility? Think telephones and electric toothbrushes! Several non-colorblind Designers and Engineers at Atlassian commented on these new pull request icons:

‘I’m not colorblind, but these are far easier to understand at a glance.’

‘This is pure gold. The same icon with different colors confused me; I’d often think, ‘What’s the state of the branch?’ This is such an amazing improvement.’

So this is your reminder to sweat the details — even small things can have a big impact.

Accessible iconography is being designed on an iPad. Other icons are displayed underneath.
Photo by Balázs Kétyi on Unsplash: Accessible iconography is being designed on an iPad. Other icons are displayed underneath.

--

--