Details

    • Type: Improvement
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 7.6
    • Component/s: UX/UI, Web
    • Labels:
    • Estimate:
      Hours
    • Edition:
      Community
    • Production Notes:
      None

      Description

      Problem:

      We currently use banners with different colors to display different types of message.
      Blue for Info message
      Green for Success message
      Red for Error message
      Orange for Warning message

      Problem, colorblind people hardly distinguish some colors from some others. As a result, they can't get the immediate clue of the importance of a message, and a Warning message can be overlooked, or a Success message might look like a scary warning before they read it and realize it's ok.

      Here are two simulations of different types of colorblindness for non-visually impaired people to realize how similar they look:

      Solution

      Add icons to reinforce the message types. The icons should be universally recognized and provide immediate info at a glance.

      Here's how non-colorblind people would see it:

      Here's how colorblind people would see it.

      Additionally, those icons can provide more info on their meaning on hover to make sure it's easy to learn and understand.

        Attachments

        1. Colorblind-friendly-banners_01.png
          56 kB
          Laura Wacrenier
        2. Colorblind-friendly-banners_02.png
          58 kB
          Laura Wacrenier
        3. Colorblind-friendly-banners_03.png
          60 kB
          Laura Wacrenier
        4. Current_banners_Deuteranopia-Simulation.png
          144 kB
          Laura Wacrenier
        5. Current_banners_Protanopia-Simulation.png
          144 kB
          Laura Wacrenier
        6. New_banners_Deuteranopia-Simulation.png
          147 kB
          Laura Wacrenier
        7. New_banners_Protanopia-Simulation.png
          146 kB
          Laura Wacrenier

          Activity

            People

            • Assignee:
              stas.vilchik Stas Vilchik (Inactive)
              Reporter:
              laura.wacrenier Laura Wacrenier
            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Due:
                Created:
                Updated:
                Resolved: