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

Layout selector icon images in the grading interface do not have enough colour contrast

XMLWordPrintable

    • MOODLE_311_STABLE
    • MOODLE_310_STABLE, MOODLE_311_STABLE
    • MDL-72895-master
    • Hide

      Initial setup

      1. Make sure the Ghostscript is installed on your system.
      2. Make sure the Ghostscript path is correct in your config.php.
      3. Make sure the Zlib library is installed on your system.
      4. Create a course or use the existing one.
      5. Create a student account or use the existing one.
      6. Create an Assignment activity, make sure Annotate PDF is checked in the Feedback types section.

      Testing

      1. Log in as a student account.
      2. Go to the Assignment activity.
      3. Submit a PDF file.
      4. Log in as a teacher/admin account.
      5. Go to the Assignment activity.
      6. Click on the Grade button.
      7. Verify that you will see three navigation buttons in the bottom right corner.
      8. Verify that the colour contrast of the buttons is now 5.47:1 (Greater than 3:1)
        • Using the DevTools, inspect a light grey background button and copy the value of the background-color property
        • Click the right button on a layout selector icon and open it in a new tab
        • In the new tab, click the right button again on the layout selector icon and choose "Inspect"
        • In the elements panel of the DevTools inspector, confirm you see something like

          <path xmlns="http://www.w3.org/2000/svg" style="fill:#495057;" ...



          ** Copy the number after "fill"; that's the icon (foreground) colour

        • Got to https://webaim.org/resources/contrastchecker/
        • Carry on the test using as foreground color the icon one and as background color the color of the button.
      Show
      Initial setup Make sure the Ghostscript is installed on your system. Make sure the Ghostscript path is correct in your config.php. Make sure the Zlib library is installed on your system. Create a course or use the existing one. Create a student account or use the existing one. Create an Assignment activity, make sure Annotate PDF is checked in the Feedback types section. Testing Log in as a student account. Go to the Assignment activity. Submit a PDF file. Log in as a teacher/admin account. Go to the Assignment activity. Click on the Grade button. Verify that you will see three navigation buttons in the bottom right corner. Verify that the colour contrast of the buttons is now 5.47:1 ( Greater than 3:1 ) Using the DevTools, inspect a light grey background button and copy the value of the background-color property Click the right button on a layout selector icon and open it in a new tab In the new tab, click the right button again on the layout selector icon and choose "Inspect" In the elements panel of the DevTools inspector, confirm you see something like <path xmlns="http://www.w3.org/2000/svg" style="fill:#495057;" ... ** Copy the number after "fill"; that's the icon (foreground) colour Got to https://webaim.org/resources/contrastchecker/ Carry on the test using as foreground color the icon one and as background color the color of the button.
    • HQ Team International CI H2-21

      The image icons in the layout selector do not have sufficient colour contrast of 3:1 against the buttons' grey background

        1. image-2021-10-29-09-52-46-149.png
          image-2021-10-29-09-52-46-149.png
          63 kB
        2. layout selector.png
          layout selector.png
          0.8 kB
        3. MDL-72895_master_Step 7.png
          MDL-72895_master_Step 7.png
          114 kB
        4. MDL-72895_master_Step 8.png
          MDL-72895_master_Step 8.png
          36 kB
        5. MDL-72895_v310_Step 7.png
          MDL-72895_v310_Step 7.png
          114 kB
        6. MDL-72895_v310_Step 8.png
          MDL-72895_v310_Step 8.png
          36 kB
        7. MDL-72895_v311_Step 7.png
          MDL-72895_v311_Step 7.png
          98 kB
        8. MDL-72895_v311_Step 8.png
          MDL-72895_v311_Step 8.png
          36 kB
        9. MDL-72895 layout selector after.png
          MDL-72895 layout selector after.png
          0.7 kB

            huongn@moodle.com Huong Nguyen
            lameze Simey Lameze
            Simey Lameze Simey Lameze
            Victor Déniz Falcón Victor Déniz Falcón
            Angelia Dela Cruz Angelia Dela Cruz
            Votes:
            0 Vote for this issue
            Watchers:
            6 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 3 hours, 6 minutes
                3h 6m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.