Details
-
Type:
Bug
-
Status: Closed
-
Priority:
Minor
-
Resolution: Fixed
-
Affects Version/s: 3.8.4
-
Component/s: Accessibility, Course, Course completion
-
Testing Instructions:
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.
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. - Copy testcompletion.php
-
Affected Branches:MOODLE_38_STABLE
-
Fixed Branches:MOODLE_38_STABLE, MOODLE_39_STABLE
-
Epic Link:
-
Pull from Repository:
-
Pull 3.9 Branch:
MDL-69387-39-2 -
Pull 3.9 Diff URL:
-
Pull 3.10 Branch:
MDL-69387-310-2 -
Pull 3.10 Diff URL:
-
Pull Master Branch:
MDL-69387-master-2 -
Pull Master Diff URL:
-
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
Issue Links
- will help resolve
-
-
- Open
-
