[MDL-69389] Insufficient colour contrast between link text and normal text - Moodle Tracker

XML

Word

Printable

Details

Type: Bug
Status: Closed
Priority: Minor
Resolution: Fixed
Affects Version/s: 3.8.4
Fix Version/s: 3.8.5, 3.9.2
Component/s: Accessibility
Labels:

Testing Instructions:
Hide

Test on Boost and Classic

Go to the login page

Open the browser's dev tools and inspect the colour of the normal texts (e.g. site title, Is this your first time here, remember username, etc.)

Confirm that their colour is set to "#212529"
Note: If its "color" CSS style is set to "inherit" you'll probably see the color in RGB, e.g. "rgb(33, 37, 41)"

Log in as a teacher in a course and go to the grade book.

Inspect the colour of the non-link texts within the table (e.g. the email addresses, grades).

Confirm that their colour is set to "#212529"

Open the Notifications popover.

Inspect the colour of the non-link texts within the popover.

Confirm that their colour is set to "#212529"
Show
Test on Boost and Classic Go to the login page Open the browser's dev tools and inspect the colour of the normal texts (e.g. site title, Is this your first time here, remember username, etc.) Confirm that their colour is set to " #212529 " Note: If its " color " CSS style is set to " inherit " you'll probably see the color in RGB, e.g. " rgb(33, 37, 41) " Log in as a teacher in a course and go to the grade book. Inspect the colour of the non-link texts within the table (e.g. the email addresses, grades). Confirm that their colour is set to " #212529 " Open the Notifications popover. Inspect the colour of the non-link texts within the popover. Confirm that their colour is set to " #212529 "
Affected Branches:
MOODLE_38_STABLE
Fixed Branches:
MOODLE_38_STABLE, MOODLE_39_STABLE
Epic Link:
Moodle Accessibility Audit
Pull from Repository:
git://github.com/junpataleta/moodle.git
Pull 3.9 Branch:
~~MDL-69389~~-39
Pull 3.9 Diff URL:
https://github.com/junpataleta/moodle/compare/e290345cd6...MDL-69389-39
Pull 3.10 Branch:
~~MDL-69389~~-310
Pull 3.10 Diff URL:
https://github.com/junpataleta/moodle/compare/96fac6d9ce...MDL-69389-310
Pull Master Branch:
~~MDL-69389~~-master
Pull Master Diff URL:
https://github.com/junpataleta/moodle/compare/a04309d40e...MDL-69389-master

Story Points:
0
Sprint:
International 4.0 - Sprint 4, International 4.0 - Sprint 5

Description

According to https://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G183, links and normal text should have at least a colour contrast ratio of 3:1.

From the WebAIM blog entry "WCAG 2.0 and Link Colors":

So if you combine these two requirements, in order to be Level AA conformant, your page must have all of the following:

A 4.5:1 contrast between the non-link text color and the background.
A 4.5:1 contrast between the link text color and the background.
A 3:1 contrast between the link text color and the surrounding non-link text color.

Currently, the normal text has a colour of "#373A3C" while links have a colour of "#1177D1" which results in a colour contrast ratio of 2.5:1.

Attachments

Options
- Sort By Name
- Sort By Date
- Ascending
- Descending
- Thumbnails
- List
- Download All

Attachments

after-patch.png
35 kB
10/Aug/20 5:25 PM
before-patch.png
35 kB
10/Aug/20 5:27 PM
example-login-page.png
9 kB
03/Aug/20 4:52 PM
Screenshot_1.png
192 kB
27/Aug/20 9:49 AM
Screenshot_2.png
166 kB
27/Aug/20 9:49 AM

Activity

People

Assignee:: Jun Pataleta

Reporter:: Jun Pataleta

Peer reviewer:: Bas Brands

Integrator:: Sara Arjona (@sarjona)

Tester:: Janelle Barcega

Participants:: Bas Brands, CiBoT, Janelle Barcega, Jun Pataleta, Sara Arjona (@sarjona)

Component watchers:: Andrew Lyons, Dongsheng Cai, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze

Votes:: 0 Vote for this issue

Watchers:: 4 Start watching this issue

Dates

Created:: 03/Aug/20 4:51 PM

Updated:: 01/Sep/20 3:03 PM

Resolved:: 28/Aug/20 12:21 AM

Fix Release Date:: 14/Sep/20

Time Tracking

Estimated:

Not Specified

Remaining:

Logged:

2h 27m