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

Border of <blockquote> tags has insufficient colour contrast

XMLWordPrintable

    • MOODLE_401_STABLE, MOODLE_403_STABLE, MOODLE_404_STABLE
    • MOODLE_401_STABLE, MOODLE_403_STABLE, MOODLE_404_STABLE
    • MDL-82948-401
    • MDL-82948-403
    • MDL-82948-404
    • MDL-82948-main
    • Hide
      Notes
      1. Test on the following combinations:
        • Theme: Boost and Classic
        • LTR (e.g. English) and RTL (e.g. Arabic, Hebrew) languages
      Test
      1. Edit your profile.
      2. Edit using the source code view and paste the following blockquote example from MDN. 

        <div>
        		 
          <blockquote cite="https://www.huxley.net/bnw/four.html">
        		 
            <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
        		 
          </blockquote>
        		 
          <p>—Aldous Huxley, <cite>Brave New World</cite></p>
        		 
        </div>

      3. Save the changes.
      4. Inspect the colour of the side border for the blockquote tag.
      5. Confirm is now a bit darker and more distinguishable than before and that it has a border colour of "#8f959e"
      Show
      Notes Test on the following combinations: Theme: Boost and Classic LTR (e.g. English) and RTL (e.g. Arabic, Hebrew) languages Test Edit your profile. Edit using the source code view and paste the following blockquote example from MDN . < div > < blockquote cite = "https://www.huxley.net/bnw/four.html" > < p >Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</ p > </ blockquote > < p >—Aldous Huxley, < cite >Brave New World</ cite ></ p > </ div > Save the changes. Inspect the colour of the side border for the blockquote tag. Confirm is now a bit darker and more distinguishable than before and that it has a border colour of " #8f959e "

      The styling of the <blockquote> tag has a grey border that uses "$gray-400" which has a default value of "#ced4da". Against a white background, this has a colour contrast ratio of 1.49:1, which does not meet the minimum contrast ratio of 3:1 according to the WCAG Success Criterion 1.4.11 Non-text Contrast (Level AA).

        1. MDL-82948.png
          MDL-82948.png
          684 kB

            jpataleta Jun Pataleta
            jpataleta Jun Pataleta
            Raquel Ortega Raquel Ortega
            Huong Nguyen Huong Nguyen
            Ron Carl Alfon Yu Ron Carl Alfon Yu
            Votes:
            0 Vote for this issue
            Watchers:
            5 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 hour, 28 minutes
                1h 28m

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