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

Text within the inline <code> tags have poor contrast

XMLWordPrintable

    • HQ 2024 Planning I4 Moppies

      When you want to display text in TinyMCE as <code> format the pink colour (#E83E8C) is not accessible against a white background: https://webaim.org/resources/contrastchecker/?fcolor=E83E8C&bcolor=FFFFFF

      This relates to the Moodle Academy Intro to Accessibility course page: https://moodle.academy/mod/book/view.php?id=1071&chapterid=1130

       

      To replicate:

      1. Go to the 'out of the box' Moodle 4.1 demo site.
      2. Log in as a teacher.
      3. Set the default editor to the new TinyMCE in the User preferences.
      4. Go to some text on any page and edit it.
      5. Select some text and choose Format > <code>.{}
      6. The text appears pink with a background colour in the text editor.
      7. Click Save.
      8. On the page the background colour disappears and the font colour is the inaccessible pink (#E83E8C).

       

      UX Proposal

      Replace the current color (#E83E8C) with #DB1A74. The new shade offers a contrast ratio of 4.75:1, ensuring AA compliance for both normal and large text, as well as any graphical or UI elements.

        1. doucusaurus-code-style.png
          doucusaurus-code-style.png
          113 kB
        2. image-2022-12-05-15-59-07-770.png
          image-2022-12-05-15-59-07-770.png
          395 kB
        3. MDL-76563.png
          MDL-76563.png
          265 kB
        4. screenshot-1.png
          screenshot-1.png
          25 kB
        5. Screenshot 2024-10-22 at 11.58.37.png
          Screenshot 2024-10-22 at 11.58.37.png
          282 kB

            mikelmartíncorrales Mikel Martín Corrales
            jgramp-moodle Jessica Gramp
            Laurent David Laurent David
            Jun Pataleta Jun Pataleta
            Ron Carl Alfon Yu Ron Carl Alfon Yu
            Votes:
            4 Vote for this issue
            Watchers:
            12 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 34 minutes
                34m

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