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

Completion checkbox images don't have sufficient colour contrast

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide
      SVG and PNG comparison
      1. Copy testcompletion.php to your moodle instance's root folder.
      2. Open testcompletion.php on your browser.
      3. Compare the SVG and PNG columns.
      4. Confirm that they look the same at 100% zoom.
      Colour check
      1. Right-click each SVG icon, then select "Open image in new window".
      2. Go to the window/tab where the icon was opened.
      3. Inspect the icon. You may zoom the viewport for easier viewing.
      4. Hover on each "<path>" element and check the fill attributes. You'll see the specific part of the icon get highlighted.
      5. Confirm that the part with the grey colour has the fill attribute set to "#949494"
      6. Confirm that the part with the green colour has the fill attribute set to "#79a128"
      7. Confirm that the part with the blue colour has the fill attribute set to "#6393ee"
        Note: No need to check the red parts because these have been left unchanged.
      Show
      SVG and PNG comparison Copy testcompletion.php to your moodle instance's root folder. Open testcompletion.php on your browser. Compare the SVG and PNG columns. Confirm that they look the same at 100% zoom. Colour check Right-click each SVG icon, then select " Open image in new window ". Go to the window/tab where the icon was opened. Inspect the icon. You may zoom the viewport for easier viewing. Hover on each " <path> " element and check the fill attributes. You'll see the specific part of the icon get highlighted. Confirm that the part with the grey colour has the fill attribute set to " #949494 " Confirm that the part with the green colour has the fill attribute set to " #79a128 " Confirm that the part with the blue colour has the fill attribute set to " #6393ee " Note: No need to check the red parts because these have been left unchanged.
    • Affected Branches:
      MOODLE_38_STABLE
    • Fixed Branches:
      MOODLE_38_STABLE, MOODLE_39_STABLE
    • Pull 3.8 Branch:
      MDL-69387-38-2
    • Pull 3.9 Branch:
      MDL-69387-39-2
    • Pull 3.10 Branch:
      MDL-69387-310-2
    • Pull Master Branch:
      MDL-69387-master-2
    • Story Points:
      0
    • Sprint:
      International 4.0 - Sprint 4, International 4.0 - Sprint 5

      Description

      The course completion checkbox images in the course page lack colour contrast and do not pass the WCAG AA requirement for colour contrast ratio for non-text elements of 3:1.

      Currently, they have a fill of "#999999" which has a colour contrast ratio of 2.84:1. Changing this to a bit darker colour of "#949494" gives us a contrast ratio of 3.03:1.

      Some checkbox images with blue checkmarks (e.g. pix/i/completion-manual-y.svg) have a fill colour of "#76A1F0" which has a contrast ratio of 2.58.1. Changing this to a darker colour of "#6393EE" gives us a colour contrast ratio of 3.02:1 against a white background.

        Attachments

        1. 69387-after.png
          69387-after.png
          9 kB
        2. 69387-before.png
          69387-before.png
          8 kB
        3. image-2020-09-02-13-55-14-305.png
          image-2020-09-02-13-55-14-305.png
          122 kB
        4. testcompletion.php
          1 kB

          Issue Links

            Activity

              People

              Assignee:
              jpataleta Jun Pataleta
              Reporter:
              jpataleta Jun Pataleta
              Peer reviewer:
              Simey Lameze
              Integrator:
              Andrew Nicols
              Tester:
              Janelle Barcega
              Participants:
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Sara Arjona (@sarjona), Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Sara Arjona (@sarjona)
              Votes:
              0 Vote for this issue
              Watchers:
              7 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                14/Sep/20

                  Time Tracking

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