Improve color accessibility of Canary Deployments pods
Problem to solve
In &896, we performed an audit of GitLab (Release features) to ensure that we are following standard WCAG standards in terms of Use of Color.
1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
In Release, when Canary Deployments is set up, the pods displayed in the Deploys Board section are presented in multiple colors. A running pod (filled green) looks very similar to an empty blue pod when color is removed.
Further details
This is also true for users that have Deuteranopia (red-green colorblindness). Red and Green become quite similar. I received feedback from ZJ, who is colorblind, that in general our Red and Green tones are very similar and it's difficult to distinguish actions that are labeled with those colors.
Tooltips are the only clue to indicate the meaning of the status of the pods. But tooltips might not be accessible to users in mobile devices or when using screen-readers to navigate the page. Since this appears to be an instance where color is partially the only visual means of conveying information, we should probably add in an additional visual cue for the pods statuses.
Proposed solution
Action items for @rverissimo
-
Propose UI solution -
Validate accessibility of color with color blind users or tools -
Validate with UI designer and UX team