-
Bug
-
Resolution: Fixed
-
Critical
-
4.1, 4.4.4, 4.5.1
-
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:
- Go to the 'out of the box' Moodle 4.1 demo site.
- Log in as a teacher.
- Set the default editor to the new TinyMCE in the User preferences.
- Go to some text on any page and edit it.
- Select some text and choose Format > <code>.{}
- The text appears pink with a background colour in the text editor.
- Click Save.
- 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.
- has been marked as being related by
-
MDL-83646 Text within code blocks in the Tiny editor can have poor contrast
-
- Open
-
-
MDL-83647 The code highlighter filter can display text within code blocks that have poor colour contrast
-
- Open
-
- has to be done after
-
MDL-81910 UX Review - The <code> colour for TinyMCE is not accessible
-
- Closed
-