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

Completion checkbox images don't have sufficient colour contrast

    XMLWordPrintable

Details

    • MOODLE_38_STABLE
    • MOODLE_38_STABLE, MOODLE_39_STABLE
    • MDL-69387-39-2
    • MDL-69387-master-2
    • 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.
    • 0
    • 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

              jpataleta Jun Pataleta
              jpataleta Jun Pataleta
              Simey Lameze Simey Lameze
              Andrew Lyons Andrew Lyons
              Janelle Barcega Janelle Barcega
              Andrew Lyons, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Ilya Tregubov, Laurent David, Sara Arjona (@sarjona), Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Ilya Tregubov, Laurent David, Sara Arjona (@sarjona)
              Votes:
              0 Vote for this issue
              Watchers:
              6 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                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