Behat testing Please run the Behat testing below: mdk behat -r --tags=@atto_accessibilitychecker mdk behat -r --tags=@tiny_accessibilitychecker Verify that both succeed without errors. Inline CSS Choose Atto as Text Editor on the Editor Preferences. Navigate to Edit Profile. In the description, click the Show More button and then the HTML button to show source code or text mode. Fill in with: <div style= "background-color: #34274f;" >     <p style= "color: #333;" >Low contrast 1 .</p>     <ol>         <li style= "color: #fff;" >High contrast</li>         <li style= "color: #333;" >Low contrast 2 </li>     </ol> </div> Click the HTML button once again to change the mode to HTML. Click the Accessibility Checker button. Verify you will see the below information: The colours of the foreground and background text do not have enough contrast. To fix this warning, change either foreground or background colour of the text so that it is easier to read.   1 . Low contrast 1 .   2 . Low contrast 2 Click each link and verify you will be focused on the current text in the editor. >> Please repeat the whole process by using TinyMCE as the Text editor. To show source code/text mode and the accessibility checker you can navigate to the Tools menu. Class CSS at Additional HTML - 1 Choose Atto as Text Editor on the Editor Preferences. Navigate to Site Admin >> Appearance >> Additional HTML At the Within HEAD (additionalhtmlhead), fill the form with the below text: <style> #test_mdl76673 {    background-color: #34274f; } #test_mdl76673 li {    color: #ffffff; } </style> And click the Save Changes button. Create a new course. Turn on the edit mode and Add "Text and media area". In the Text, click the Show More button and then the HTML button to show source code or text mode. Fill in with: <div id= "test_mdl76673" >     <p>Low Contrast</p>     <ol>         <li>High Contrast 1 </li>         <li>High Contrast 2 </li>     </ol> </div> Click the HTML button once again to change the mode to HTML. Click the Accessibility Checker button. Verify you will see the below information: The colours of the foreground and background text do not have enough contrast. To fix this warning, change either foreground or background colour of the text so that it is easier to read.   1 . Low Contrast Click the Low Contrast text link and verify you will be focused on the current text in the editor. Class CSS at Additional HTML - 2 Choose Atto as Text Editor on the Editor Preferences. Navigate to Site Admin >> Appearance >> Additional HTML At the Within HEAD (additionalhtmlhead), fill the form with the below text: <style> #test_mdl76673 {    background-color: #34274f; } #test_mdl76673 li, #test_mdl76673 p {    color: #ffffff; } </style> And click the Save Changes button. Create a new course. Turn on the edit mode and Add "Text and media area". In the Text, click the Show More button and then the HTML button to show source code or text mode. Fill in with: <div id= "test_mdl76673" >     <p>Low Contrast</p>     <ol>         <li>High Contrast 1 </li>         <li>High Contrast 2 </li>     </ol> </div> Click the HTML button once again to change the mode to HTML. Click the Accessibility Checker button. Verify you will see the below information: Congratulations, no accessibility problems found! >> Since the TinyMCE cannot apply the CSS so we don't need to test it.