Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-73142

File extension in Essay accepted file type list is failing accessibility color contrast limits

    XMLWordPrintable

Details

    • MOODLE_310_STABLE, MOODLE_311_STABLE, MOODLE_39_STABLE
    • MOODLE_311_STABLE
    • MDL-73142-311
    • MDL-73142-master
    • Hide
      1. Log in as a teacher
      2. Create a quiz activity with an essay question that accepts attachments
      3. Select a few file attachment types from the list
      4. Attempt the quiz (doing so, the quiz background should be blue)
      5. Check the contrast of the smaller file extension text
        • On Chrome: Open the browser dev tools, then click on "Select an element on the page to inspect it" (Upper left-hand corner button) or press Ctrl + Shift + C. Then hover on the list of file extensions. There should be a Contrast section there that displays the value of the colour contrast ratio.
        • On Firefox: Right-click on the list of file extensions and click "Inspect Accessibility Properties". A dev tools window will show up that contains a section called "Colour and Contrast".
      6. Confirm that the contrast ratio value is greater than 4.5.
      Show
      Log in as a teacher Create a quiz activity with an essay question that accepts attachments Select a few file attachment types from the list Attempt the quiz (doing so, the quiz background should be blue) Check the contrast of the smaller file extension text On Chrome: Open the browser dev tools, then click on " Select an element on the page to inspect it " (Upper left-hand corner button) or press Ctrl + Shift + C. Then hover on the list of file extensions. There should be a Contrast section there that displays the value of the colour contrast ratio. On Firefox: Right-click on the list of file extensions and click "Inspect Accessibility Properties". A dev tools window will show up that contains a section called "Colour and Contrast". Confirm that the contrast ratio value is greater than 4.5.

    Description

      The color contrast for the quizzes has been recently addressed within MDL-69392, however, the list of the permitted file types has the file extension in a light shade of grey that fails color contrast against the blue background.

      Contrast is just 4.12 failing against Level AA requirements:

       

      Besides the Quiz component passing the contrast requirements, is the use of a blue background justified?

      We have had feedback from users affected by visual dyslexia who have issues reading the copy despite the more than adequate color contrast because of the blue background/blue text combination. Some of these users use colored lenses to ease the visual stress and they would need a white background.

      Since the ability of completing a quiz is a vital use case, is there a strong enough reason for using a blue background and blue text? If the reason is just the separation of the quiz element from other parts of the page, could this blue be much lighter and/or make use of other separators?

      Attachments

        Activity

          People

            Zanatta Susanna
            Zanatta Susanna
            Tim Hunt Tim Hunt
            Jun Pataleta Jun Pataleta
            Gladys Basiana Gladys Basiana
            Andrew Lyons, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Sujith Haridasan, Tim Hunt, Andrew Lyons, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
            Votes:
            0 Vote for this issue
            Watchers:
            5 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved:
              17/Jan/22

              Time Tracking

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 hour
                1h