Uploaded image for project: 'SonarQube'
  1. SonarQube
  2. SONAR-10681

Facet content does not have enough contrast with background

    XMLWordPrintable

    Details

    • Estimate:
      Minutes
    • Edition:
      Community

      Description

      According to the Lighthouse report the content in the sidebar doesn't have enough contrast with the background.
      This is probably not the only place where it occurs. Grey on grey contrasts should be checked thoroughly everywhere.

      Solution

      We currently use different shades of grey® to create some contrast between "primary text" = #444444 and "secondary text" = #777777.

      This is a pattern we should keep but we need to adjust the colors to make sure we are WCAG AA compliant. 

      Let's replace throughout SonarQube:

      • #777777 by #666666 (secondary text)

      As a result of this change, we need to adjust the "primary text" color to keep the existing contrast between primary and secondary text.

      • Replace #444444 by #333333.

       

      In addition to the sidebar, I added a few screenshots with green square indicators to illustrate where this problem occurs. 

       

        Attachments

        1. 4a30724a60832248d44e0bfc691b840118115934.jpeg
          4a30724a60832248d44e0bfc691b840118115934.jpeg
          22 kB
        2. issues.png
          issues.png
          561 kB
        3. measures.png
          measures.png
          281 kB
        4. projectoverview.png
          projectoverview.png
          362 kB
        5. projects.png
          projects.png
          366 kB
        6. rules.png
          rules.png
          453 kB
        7. screenshot-1.png
          screenshot-1.png
          218 kB
        8. screenshot-2.png
          screenshot-2.png
          22 kB

          Activity

            People

            Assignee:
            wouter.admiraal Wouter Admiraal
            Reporter:
            stas.vilchik Stas Vilchik (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Dates

              Due:
              Created:
              Updated:
              Resolved: