Details
-
Bug
-
Status: Open (View Workflow)
-
Minor
-
Resolution: Unresolved
-
N/A
Description
As identified by cafuego on JENKINS-65124, Jenkins build status symbols suffer from Accessibility issues for those users with color-blindness. Specifically, the new build status symbols introduced in PR # 5065 are not distinguishable for color-blind users.
(I am not a UI/UX expert and not not have a color-blindness condition; just raising the issue)
The issue may extend across other features where red/green/yellow is used to distinguish categories (eg: Pipeline Stage View Plugin, plugins using eCharts-API, warnings-ng-plugin, Job Configuration History, Test Results Analyzer and more.
Recommendation to convert this to its EPIC and separate create issues for known plugins with issues, as done for tables-to-divs issue.
However, before addressing any specific issues, a review of and a recommendation on "standard colors" and style guide be developed such that plugin developers can reference standardized css class color library with defined colors (eg: class="color-warning"),
Background information on the color problem can be found here.
Color blindness: how to design an accessible user interface
DEFECTIVE COLOR VISION AND TRAFFIC SIGNALS
Color Blindness & Web Design
Users who have color-blindness conditions or UI/UX experts may wish to be engaged/provide feedback.
A recommendation may be to embed information symbols or patterns in an alternate shade as suggested in the traffic lights and as seen in the Mozilla browser compatibility chart.
Additional information is available from work SonarQube performed on the issue:
Concerning the usage of colors, Accessibility issues, SONAR-11959: Colorblind-friendly coverage treemaps.
Unrelated Jenkins instance feedback on color.
Attachments
Issue Links
- is related to
-
-
- Closed
-
-
-
- Open
-
-
-
- Open
-
-
-
- Open
-
-
-
- Closed
-
-
JENKINS-54017 Plot for Color blind
-
- Open
-
-
JENKINS-65837 Build Status icon (in the build history/queue widget) is confusing, unclear if it will cancel build or take me to console log
-
- Open
-
- relates to
-
-
- Open
-
Activity
cafuego I understand that the colors are hard to distinguish. But since the icons use different symbols as well (check mark, cross, etc.) I wonder why this is not sufficient yet. Or do you have a suggestion on what to change?
I am not sure how accurate it is, but I used the Toptal website Colorblind Web Page Filter to produce the following composite across the four documented color issues.
It would seem the primary issue for the build-status icons would be similarities in green / red shades used for the check mark and the X as well as similarities in the blue/green shades for ellipses and check mark. Keep in mind, the colors should be distinguishable over each vertical.
The broader issue would be using consistent color-blind safe tones / images across all Jenkins features like pipelines, charts, etc.
[ O ] Bildschirmfoto 2021-06-11 um 16.06.23.png
[ P ] Protanopia - red/green color blindness; anomalous red cones
[ D ] Deutanopia - red/green color blindness; anomalous green cones
[ T ] Tritanopia - blue/yellow color blindness; anomalous blue cones
[ G ] Greyscale/achromatopsia - quick check for all forms of colorblindness
Ian Williams
added a comment - - edited I am not sure how accurate it is, but I used the Toptal website Colorblind Web Page Filter to produce the following composite across the four documented color issues.
It would seem the primary issue for the build-status icons would be similarities in green / red shades used for the check mark and the X as well as similarities in the blue/green shades for ellipses and check mark. Keep in mind, the colors should be distinguishable over each vertical.
The broader issue would be using consistent color-blind safe tones / images across all Jenkins features like pipelines, charts, etc.
[ O ] Bildschirmfoto 2021-06-11 um 16.06.23.png
[ P ] Protanopia - red/green color blindness; anomalous red cones
[ D ] Deutanopia - red/green color blindness; anomalous green cones
[ T ] Tritanopia - blue/yellow color blindness; anomalous blue cones
[ G ] Greyscale/achromatopsia - quick check for all forms of colorblindness
It's even worse for blind people.
Previous versions had a reasonable "alt" text (e.g. "Successful -> Console") which is gone now.
Alexander Mai
added a comment - - edited It's even worse for blind people.
Previous versions had a reasonable "alt" text (e.g. "Successful -> Console") which is gone now. Ian Williams
added a comment - maial, totally agree the of "alt" text should be (required) as universal as possible, certainly for all core features (not sure how that works on something like Blue Ocean UI of charts, etc.).
This issue was split off from another regarding the visual distinction of the new weather icons.
I would suggest also creating a separate Issue for "Accessibility issue - Images lacking "alt" text", link to EPIC - JENKINS-62268 Jenkins UI Accessibility, and provide some examples and suggested guidance if necessary. Depending on the scope, a "Recommendation to convert this to its EPIC and separate create issues for known plugins with issues, as done for tables-to-divs issue" may also be advisable.
Ian Williams
added a comment - maial , totally agree the of "alt" text should be (required) as universal as possible, certainly for all core features (not sure how that works on something like Blue Ocean UI of charts, etc.).
This issue was split off from another regarding the visual distinction of the new weather icons.
I would suggest also creating a separate Issue for " Accessibility issue - Images lacking "alt" text ", link to EPIC - JENKINS-62268 Jenkins UI Accessibility, and provide some examples and suggested guidance if necessary. Depending on the scope, a " Recommendation to convert this to its EPIC and separate create issues for known plugins with issues, as done for tables-to-divs issue " may also be advisable. Alexander Mai
added a comment - ianw Thanks for your advice.
I've created JENKINS-65923. (see also JENKINS-573 ...)
Alexander Mai
added a comment - ianw Thanks for your advice.
I've created JENKINS-65923 . (see also JENKINS-573 ...) 
Frad
added a comment - thanks a lot for advise! I'll try this Just came across a Blog post on GitHub in which they describe making colorblind themes available. May be a useful reference.
Ian Williams
added a comment - - edited Just came across a Blog post on GitHub in which they describe making colorblind themes available. May be a useful reference. 
timja, drulli, cafuego, dduportal, issue created as promised in Jenkins UX SIG - Jun 9, 2021. Added link to minutes.
cc: tampa