Create inclusive learning with Guroo Pro’s Web Accessibility Contrast Checker. Enhance your themes to ensure your learning meets Web Content Accessibility Guidelines 2.0 (WCAG) guidelines.
What?
The Web Accessibility Checker is a powerful feature, exclusive to Guroo Pro, to assist you in ensuring that your chosen colours and contrasts used in eLearning modules adhere to WCAG accessibility guidelines. By providing you with a comprehensive overview of colour combinations and contrasts within your selected theme, The Web Accessibility Check identifies where colour choice falls short. To further assist you, the feature provides suggestions and recommendations of colours and theme choices to help improve overall accessibility for people with visual impairments.
How?
To check if your modules are meeting WCAG, check out the video below. Or continue reading the instructions provided.
Setup Instructions:
1. To create a new theme, navigate to the Themes tab located under the Assets option in the top menu. Then select Add Theme. You will be prompted to name your theme before you can begin editing.
2. Once the (below) pop up window appears - it will automatically open to the General Settings tab. Here, you will be able to pick your theme colours. Where each colour along the side menu coincides with the preview of your theme.
3. Once your colours are chosen, The Web Accessibility Check will alert you to any contrast issues with your chosen colours/text/or backgrounds. You can find this under the Web Accessibility tab.
4. Each potential issue is individually listed here and is easily fixed by clicking the Resolve action that coincides with the problem area you wish to fix. This will open up a window similar to the one below.
5. From here, you will be directed to change the colour of any object that is an accessibility issue. You want to make sure the object you wish to change is highlighted before editing it (for instance, ‘font colour’ is selected, so that is what will be changing colours when I make the selection on the right of the screen.
6. We have included suggestions at the bottom of this pop-up page to assist you in selecting the right colour that will allow for an accessible theme. Note: the colour suggestion may not always be the “prettiest” colour to use, but it will make your theme accessible. Ultimately, the decision is up to you, the designer.
If you're not happy with the suggested choice, you can choose another colour altogether, and the checker will let you know if your new colour has resolved the contrast issue.
7. Once you have no alerts left under the Web Accessibility Check tab, your theme is accessible and meets WCAG requirements.