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

Completion checkbox images don't have sufficient colour contrast

XMLWordPrintable

    • MOODLE_38_STABLE
    • MOODLE_38_STABLE, MOODLE_39_STABLE
    • 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

      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.

        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

            jpataleta Jun Pataleta
            jpataleta Jun Pataleta
            Simey Lameze Simey Lameze
            Andrew Lyons Andrew Lyons
            Janelle Barcega Janelle Barcega
            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 - 5 hours, 10 minutes
                5h 10m

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