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

Insufficient colour contrast between link text and normal text

XMLWordPrintable

    • MOODLE_38_STABLE
    • MOODLE_38_STABLE, MOODLE_39_STABLE
    • MDL-69389-master
    • 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 "
    • 0
    • International 4.0 - Sprint 4, International 4.0 - Sprint 5

      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.

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

            jpataleta Jun Pataleta
            jpataleta Jun Pataleta
            Bas Brands Bas Brands
            Sara Arjona (@sarjona) Sara Arjona (@sarjona)
            Janelle Barcega Janelle Barcega
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 2 hours, 27 minutes
                2h 27m

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