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

Accessibility color contrast check not correctly processing rgb() values

XMLWordPrintable

    • MOODLE_401_STABLE, MOODLE_402_STABLE, MOODLE_403_STABLE, MOODLE_404_STABLE, MOODLE_405_STABLE
    • MOODLE_403_STABLE, MOODLE_404_STABLE
    • MDL-78785_403_toolbrickfield_rgbcolorcontrasts
    • MDL-78785_404_toolbrickfield_rgbcolorcontrasts
    • MDL-78785_main_toolbrickfield_rgbcolorcontrasts
    • Hide

      Notes

      • To test this, the site needs to be registered with Brickfield. If you don't have a Brickfield account, you can register here.
      • For free accounts, you may need to delete the site registration for the first site you registered and then create a new registration for the next test site.

      Setup:

      1. Activate your site with Brickfield in "Site administration / Plugins / Admin tools / Accessibility / Brickfield registration" by entering the API and Secret keys.
      2. Enable analysis requests in "Site administration / Plugins / Admin tools / Accessibility / Accessibility toolkit settings"

      Test:

      1. Create a new course
      2. Add a "Text and media area"
      3. Use the editor's source code view and paste the following HTML.

        <p style="color:rgb(255, 255, 255); background:fixed rgb(204, 204, 204) center;">1 This is not contrasty enough.</p>
        <p style="color:rgb(255, 255, 255); background:fixed rgb(0, 0, 0) center;">2 This is contrasty enough.</p>
        <p style="color:rgb(255, 255, 255); background-color:rgb(204, 204, 204);">3 This is not contrasty enough.</p>
        <p style="color:rgb(255, 255, 255); background:fixed rgb(204, 204, 204) center;">4 This is not contrasty enough...</p>
        

      4. Save and go back to the course.
      5. Add the "Accessibility review" block to the course.
      6. Click on the "Submit to Analysis" button to request that the course be analyzed using the accessibility toolkit.
      7. Run the below commands on your favourite terminal:

        php admin/cli/scheduled_task.php --execute='\tool_brickfield\task\update_summarydata'  
        php admin/cli/cron.php

      8. The accessibility toolkit should now correctly find the three contrast errors for paragraphs 1, 3, and 4. (You can also confirm by clicking on the "View accessibility toolkit" button on the Accessibility toolkit block.
      Show
      Notes To test this, the site needs to be registered with Brickfield. If you don't have a Brickfield account, you can register here . For free accounts, you may need to delete the site registration for the first site you registered and then create a new registration for the next test site. Setup: Activate your site with Brickfield in "Site administration / Plugins / Admin tools / Accessibility / Brickfield registration" by entering the API and Secret keys. Enable analysis requests in "Site administration / Plugins / Admin tools / Accessibility / Accessibility toolkit settings" Test: Create a new course Add a " Text and media area " Use the editor's source code view and paste the following HTML. < p style = "color:rgb(255, 255, 255); background:fixed rgb(204, 204, 204) center;" >1 This is not contrasty enough.</ p > < p style = "color:rgb(255, 255, 255); background:fixed rgb(0, 0, 0) center;" >2 This is contrasty enough.</ p > < p style = "color:rgb(255, 255, 255); background-color:rgb(204, 204, 204);" >3 This is not contrasty enough.</ p > < p style = "color:rgb(255, 255, 255); background:fixed rgb(204, 204, 204) center;" >4 This is not contrasty enough...</ p > Save and go back to the course. Add the "Accessibility review" block to the course. Click on the "Submit to Analysis" button to request that the course be analyzed using the accessibility toolkit. Run the below commands on your favourite terminal: php admin /cli/scheduled_task .php --execute= '\tool_brickfield\task\update_summarydata'   php admin /cli/cron .php The accessibility toolkit should now correctly find the three contrast errors for paragraphs 1, 3, and 4. (You can also confirm by clicking on the " View accessibility toolkit " button on the Accessibility toolkit block.

      HTML such as:
      <p style="color:rgb(255, 255, 255); background-color:rgb(0, 0, 0);">RGB value text good contrast</p>
      can cause the css_text_has_contrast to fail. This is due to the check not correctly processing the rgb() value to calculate the relative color contrast ratio for WCAG requirements.

            wuzi1999 Karen Holland
            wuzi1999 Karen Holland
            Meirza Meirza
            Jun Pataleta Jun Pataleta
            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 - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 6 hours, 33 minutes
                6h 33m

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