Differences

This shows you the differences between two versions of the page.

--- usingcolour [2022/12/02 10:46] – removed - external edit (Unknown date) 127.0.0.1
+++ usingcolour [2023/09/26 08:10] (current) – [Colour palette] jsmith
@@ Line 1: / Line 1: @@
+====== 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.
+==== Accessibility ====
+{{ :xerte-usingcolours-contrast.jpg?300|Source:WebAim https://webaim.org/resources/contrastchecker/}}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.  [[https://webaim.org/resources/contrastchecker/|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.
+{{ :xerte-usingcolours-tickcross.jpg?300}}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.
+==== Colour palette ====
+{{ :xerte-usingcolours-colourcodes.jpg?300}}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.
+{{ :xerte-usingcolours-styles.jpg?400}}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.
+{{tag>pagetype all_pages}}