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

Insufficient colour contrast between link text and normal text

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      Test on Boost and Classic

      1. Go to the login page
      2. 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.)
      3. 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)"
      4. Log in as a teacher in a course and go to the grade book.
      5. Inspect the colour of the non-link texts within the table (e.g. the email addresses, grades).
      6. Confirm that their colour is set to "#212529"
      7. Open the Notifications popover.
      8. Inspect the colour of the non-link texts within the popover.
      9. 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:
    • Pull from Repository:
    • Pull 3.8 Branch:
    • Pull 3.8 Diff URL:
    • Pull 3.9 Branch:
    • Pull 3.9 Diff URL:
    • Pull 3.10 Branch:
      MDL-69389-310
    • Pull 3.10 Diff URL:
    • Pull Master Branch:
      MDL-69389-master
    • Pull Master Diff URL:
    • 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

        1. after-patch.png
          after-patch.png
          35 kB
        2. before-patch.png
          before-patch.png
          35 kB
        3. example-login-page.png
          example-login-page.png
          9 kB
        4. Screenshot_1.png
          Screenshot_1.png
          192 kB
        5. Screenshot_2.png
          Screenshot_2.png
          166 kB

          Activity

            People

            Assignee:
            jpataleta Jun Pataleta
            Reporter:
            jpataleta Jun Pataleta
            Peer reviewer:
            Bas Brands
            Integrator:
            Sara Arjona (@sarjona)
            Tester:
            Janelle Barcega
            Participants:
            Component watchers:
            Andrew Nicols, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
            Votes:
            0 Vote for this issue
            Watchers:
            4 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 - 2 hours, 27 minutes
                2h 27m