Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-65850

Accessibility issue - Icon / Symbol Palette colors

    • Icon: Bug Bug
    • Resolution: Unresolved
    • Icon: Minor Minor
    • core
    • N/A

      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.

          [JENKINS-65850] Accessibility issue - Icon / Symbol Palette colors

          Ian Williams created issue -
          Ian Williams made changes -
          Link New: This issue is related to JENKINS-65124 [ JENKINS-65124 ]
          Ian Williams made changes -
          Description Original: 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|https://github.com/jenkinsci/jenkins/pull/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|https://plugins.jenkins.io/pipeline-rest-api/], plugins using [eCharts-API|https://plugins.jenkins.io/echarts-api/], [warnings-ng-plugin|https://github.com/jenkinsci/warnings-ng-plugin/blob/master/doc/Documentation.md], [Job Configuration History|https://plugins.jenkins.io/jobConfigHistory], [Test Results Analyzer|https://plugins.jenkins.io/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|https://issues.jenkins.io/secure/Dashboard.jspa?selectPageId=20741] 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|https://uxdesign.cc/color-blindness-in-user-interfaces-66c27331b858]
           [DEFECTIVE COLOR VISION AND TRAFFIC SIGNALS|https://midimagic.sgc-hosting.com/sigvison.htm#colorblind]

          *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|https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#browser_compatibility].

          !image-2021-06-09-10-42-17-478.png!

          Additional information is available from work SonarQube performed on the issue:
           [Concerning the usage of colors|https://community.sonarsource.com/t/concerning-the-usage-of-colors-to-indicate-something-colorblind/5306/7], [Accessibility issues|https://community.sonarsource.com/t/accessibility-issues/6160], SONAR-11959: [Colorblind-friendly coverage treemaps|https://jira.sonarsource.com/browse/SONAR-11959].
           Unrelated [Jenkins instance feedback on color|https://community.plone.org/t/jenkins-accessibility-feedback/3614].
           [Color Blindness & Web Design|https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html]
          New: 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|https://github.com/jenkinsci/jenkins/pull/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|https://plugins.jenkins.io/pipeline-rest-api/], plugins using [eCharts-API|https://plugins.jenkins.io/echarts-api/], [warnings-ng-plugin|https://github.com/jenkinsci/warnings-ng-plugin/blob/master/doc/Documentation.md], [Job Configuration History|https://plugins.jenkins.io/jobConfigHistory], [Test Results Analyzer|https://plugins.jenkins.io/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|https://issues.jenkins.io/secure/Dashboard.jspa?selectPageId=20741] 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|https://uxdesign.cc/color-blindness-in-user-interfaces-66c27331b858]
           [DEFECTIVE COLOR VISION AND TRAFFIC SIGNALS|https://midimagic.sgc-hosting.com/sigvison.htm#colorblind]
           [Color Blindness & Web Design|https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html]

          *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|https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#browser_compatibility].

          !image-2021-06-09-10-42-17-478.png!

          Additional information is available from work SonarQube performed on the issue:
           [Concerning the usage of colors|https://community.sonarsource.com/t/concerning-the-usage-of-colors-to-indicate-something-colorblind/5306/7], [Accessibility issues|https://community.sonarsource.com/t/accessibility-issues/6160], SONAR-11959: [Colorblind-friendly coverage treemaps|https://jira.sonarsource.com/browse/SONAR-11959].

          Unrelated [Jenkins instance feedback on color|https://community.plone.org/t/jenkins-accessibility-feedback/3614].
          Ian Williams made changes -
          Link New: This issue is related to JENKINS-65837 [ JENKINS-65837 ]
          Ulli Hafner made changes -
          Attachment New: Bildschirmfoto 2021-06-11 um 16.06.23.png [ 54983 ]
          Ulli Hafner made changes -
          Description Original: 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|https://github.com/jenkinsci/jenkins/pull/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|https://plugins.jenkins.io/pipeline-rest-api/], plugins using [eCharts-API|https://plugins.jenkins.io/echarts-api/], [warnings-ng-plugin|https://github.com/jenkinsci/warnings-ng-plugin/blob/master/doc/Documentation.md], [Job Configuration History|https://plugins.jenkins.io/jobConfigHistory], [Test Results Analyzer|https://plugins.jenkins.io/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|https://issues.jenkins.io/secure/Dashboard.jspa?selectPageId=20741] 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|https://uxdesign.cc/color-blindness-in-user-interfaces-66c27331b858]
           [DEFECTIVE COLOR VISION AND TRAFFIC SIGNALS|https://midimagic.sgc-hosting.com/sigvison.htm#colorblind]
           [Color Blindness & Web Design|https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html]

          *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|https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#browser_compatibility].

          !image-2021-06-09-10-42-17-478.png!

          Additional information is available from work SonarQube performed on the issue:
           [Concerning the usage of colors|https://community.sonarsource.com/t/concerning-the-usage-of-colors-to-indicate-something-colorblind/5306/7], [Accessibility issues|https://community.sonarsource.com/t/accessibility-issues/6160], SONAR-11959: [Colorblind-friendly coverage treemaps|https://jira.sonarsource.com/browse/SONAR-11959].

          Unrelated [Jenkins instance feedback on color|https://community.plone.org/t/jenkins-accessibility-feedback/3614].
          New: 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|https://github.com/jenkinsci/jenkins/pull/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)

           !Bildschirmfoto 2021-06-11 um 16.06.23.png|thumbnail!

          The issue may extend across other features where red/green/yellow is used to distinguish categories (eg: [Pipeline Stage View Plugin|https://plugins.jenkins.io/pipeline-rest-api/], plugins using [eCharts-API|https://plugins.jenkins.io/echarts-api/], [warnings-ng-plugin|https://github.com/jenkinsci/warnings-ng-plugin/blob/master/doc/Documentation.md], [Job Configuration History|https://plugins.jenkins.io/jobConfigHistory], [Test Results Analyzer|https://plugins.jenkins.io/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|https://issues.jenkins.io/secure/Dashboard.jspa?selectPageId=20741] 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|https://uxdesign.cc/color-blindness-in-user-interfaces-66c27331b858]
           [DEFECTIVE COLOR VISION AND TRAFFIC SIGNALS|https://midimagic.sgc-hosting.com/sigvison.htm#colorblind]
           [Color Blindness & Web Design|https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html]

          *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|https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#browser_compatibility].

          !image-2021-06-09-10-42-17-478.png!

          Additional information is available from work SonarQube performed on the issue:
           [Concerning the usage of colors|https://community.sonarsource.com/t/concerning-the-usage-of-colors-to-indicate-something-colorblind/5306/7], [Accessibility issues|https://community.sonarsource.com/t/accessibility-issues/6160], SONAR-11959: [Colorblind-friendly coverage treemaps|https://jira.sonarsource.com/browse/SONAR-11959].

          Unrelated [Jenkins instance feedback on color|https://community.plone.org/t/jenkins-accessibility-feedback/3614].
          Ian Williams made changes -
          Attachment New: O-PDTG.png [ 54987 ]
          Ian Williams made changes -
          Attachment Original: O-PDTG.png [ 54987 ]
          Ian Williams made changes -
          Attachment New: O-PDTG.png [ 54988 ]
          Ian Williams made changes -
          Link New: This issue is related to JENKINS-54017 [ JENKINS-54017 ]
          Ian Williams made changes -
          Link New: This issue is related to JENKINS-65923 [ JENKINS-65923 ]

            Unassigned Unassigned
            ianw Ian Williams
            Votes:
            1 Vote for this issue
            Watchers:
            5 Start watching this issue

              Created:
              Updated: