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

Warning colours in bootstrapbase have too low contrast for AA accessibility

    XMLWordPrintable

Details

    • MOODLE_28_STABLE, MOODLE_29_STABLE, MOODLE_30_STABLE
    • MOODLE_28_STABLE, MOODLE_29_STABLE
    • wip_MDL-50869_master
    • Hide
      1. Use a Moodle installation that is accessible from the web.
      2. Select the 'Clean' theme.
      3. Create a quiz with one question with feedback.
      4. Take the quiz and show the feedback.
      5. Run the site though 'http://wave.webaim.org/' and confirm for contrast is acceptable.
      6. In a course, create a page and add the following to the content in HTML mode:

        <p>MDL-50869<br></p><div class="control-group warning">.control-group.warning<p class="control-label">.control-label</p> input<input> <div class="input-prepend">.input-prepend <div class="add-on">.add-on</div></div></div><p class="text-warning">.text-warning<br></p><p></p><div class="environmenttable">.environmenttable<p class="warn">p.warn</p></div><p></p><p class="statuswarning">.statuswarning</p><div id="page-admin-report-backups-index">#page-admin-report-backups-index <p class="backup-warning">.backup-warning</p></div><p class="maintenancewarning warning">.maintenancewarning.warning</p><div class="formulation">.formulation select.partiallycorrect,<select class="partiallycorrect"> <option value="mdl">Moodle</option>
          <option value="bb">BlackBorg</option>
          <option value="wp">Wordpress</option>
          <option value="vi">Vi</option></select></div><div class="formulation">.formulation input.partiallycorrect<input class="partiallycorrect"></div><p class="connecting">.connecting<br></p><p><br></p>
        

      7. Which contains all of the selectors that use @warningText when you search the LESS files of the '/theme/bootstrapbase/less' folder. Confirm that all are visually acceptable, type as required into the input boxes. You will find that the maintenance selector floats on the page.
      Show
      Use a Moodle installation that is accessible from the web. Select the 'Clean' theme. Create a quiz with one question with feedback. Take the quiz and show the feedback. Run the site though 'http://wave.webaim.org/' and confirm for contrast is acceptable. In a course, create a page and add the following to the content in HTML mode: <p>MDL-50869<br></p><div class="control-group warning">.control-group.warning<p class="control-label">.control-label</p> input<input> <div class="input-prepend">.input-prepend <div class="add-on">.add-on</div></div></div><p class="text-warning">.text-warning<br></p><p></p><div class="environmenttable">.environmenttable<p class="warn">p.warn</p></div><p></p><p class="statuswarning">.statuswarning</p><div id="page-admin-report-backups-index">#page-admin-report-backups-index <p class="backup-warning">.backup-warning</p></div><p class="maintenancewarning warning">.maintenancewarning.warning</p><div class="formulation">.formulation select.partiallycorrect,<select class="partiallycorrect"> <option value="mdl">Moodle</option> <option value="bb">BlackBorg</option> <option value="wp">Wordpress</option> <option value="vi">Vi</option></select></div><div class="formulation">.formulation input.partiallycorrect<input class="partiallycorrect"></div><p class="connecting">.connecting<br></p><p><br></p> Which contains all of the selectors that use @warningText when you search the LESS files of the '/theme/bootstrapbase/less' folder. Confirm that all are visually acceptable, type as required into the input boxes. You will find that the maintenance selector floats on the page.

    Description

      Given the themes forum post: https://moodle.org/mod/forum/discuss.php?d=316936 which demonstrates that the 'alert' box colour is not accessible. This is defined in: https://github.com/moodle/moodle/blob/MOODLE_29_STABLE/theme/bootstrapbase/less/bootstrap/variables.less#L233-L234 and applied here: https://github.com/moodle/moodle/blob/MOODLE_29_STABLE/theme/bootstrapbase/less/moodle/question.less#L225-L229. Interestingly, Bootstrap V3 has fixed this: https://github.com/twbs/bootstrap/blob/master/less/variables.less#L507-L508.

      Therefore I suggest that 'bootstrap-override.less' has:

      @warningText:             #8a6d3b;
      

      Attachments

        Issue Links

          Activity

            People

              gb2048 Gareth J Barnard
              gb2048 Gareth J Barnard
              John Okely John Okely
              David Monllaó David Monllaó
              Jetha Chan Jetha Chan
              Andrew Lyons, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Huong Nguyen, Bas Brands, Mathew May
              Votes:
              1 Vote for this issue
              Watchers:
              6 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                14/Sep/15