Using colour

Xerte offers a lot of flexibility around the use of colour. You can change, for example, the colour of text, highlighting, backgrounds and hotspot outlines. There are two main issues to bear in mind when using different colours.

You need to ensure that there is sufficient contrast between text and background colours to ensure legibility. Xerte has been designed so that the default colours and project themes meet WCAG 2.1 AA accessibility requirements, in both the authoring interface and the learner view. However, both font colours and backgrounds can be changed quite easily, and if you have any doubts about contrast you need to check it. WebAIM is a website that allows you to check WCAG 2.1 AA contrast compliance, if you know the HTML colour codes for the colours you want to use. In the example shown, the combination of colours (foreground colour #A39000 and background colour #FFFFFF) has failed the test.

You also need to be aware that there are differences in the ways people perceive (and distinguish between) colours. This means you should avoid tasks which are dependent, for example, on learners being able to distinguish between sections of text in two or more colours. This doesn't mean that you cannot use colours, but that you may need to use additional means (e.g. bold, italics and underlining) to provide an alternative way of distinguishing different sections of text. This caveat also applies to feedback - in Xerte release 3.10, for example, ticks and crosses were added to the use of colour (green for correct, red for wrong) in providing feedback on the Gap Fill page.

If you are using multiple colours (beyond black and white) for a project or a course, you may want to choose a palette of colours to use consistently. There are websites which provide examples of colour palettes designed by contributors, but check that if you use these palettes you are compliant with copyright and any other restrictions on use. Once you have decided on a colour palette, note down the HTML colour codes and use these to find the colours in Xerte - this will enable you to ensure consistency, compared to clicking on colours in a large matrix.

The Styles in text editors also provide a quick and easy way to mark up text and add colour to a page. These enable you, for example, to convert some plain text into a panel with white text on coloured panel, or to add a vertical highlight bar to the left of some text.