| 1 |
efrain |
1 |
---
|
|
|
2 |
layout: docs
|
|
|
3 |
title: "Colour contrast"
|
|
|
4 |
description: "Colour contrast for Moodle UI components"
|
|
|
5 |
date: 2021-03-30T09:40:32+01:00
|
|
|
6 |
draft: false
|
|
|
7 |
tags:
|
|
|
8 |
- 3.9
|
|
|
9 |
---
|
|
|
10 |
|
|
|
11 |
## Accessibile colours
|
|
|
12 |
|
|
|
13 |
In WCAG 2, contrast is a measure of the difference in perceived "luminance" or brightness between two colors (the phrase "color contrast" is never used). This brightness difference is expressed as a ratio ranging from 1:1 (e.g. white on white) to 21:1 (e.g., black on a white).
|
|
|
14 |
|
|
|
15 |
## Common colour contrast issues
|
|
|
16 |
|
|
|
17 |
Most contrast issue, where the ratio is below 4.5:1 in Moodle are found on pages that using a background colour with text on top. For example a striped table with light text. Contrast issues should be qualified as bugs and reported on the Moodle tracker.
|
|
|
18 |
|
|
|
19 |
Moodle's colour set is designed to provide high contrast and maximum brightness. If the Moodle colours are changed using a custom theme make sure you test the contrast of pages like the enrolment table, reports and Moodle activities.
|
|
|
20 |
|
|
|
21 |
To test colour contrast you can use the inbuild functionality of your browser, my favourite extension is the "WCAG Colour contrast checker" for Chrome.
|
|
|
22 |
|
|
|
23 |
## Tables with links
|
|
|
24 |
|
|
|
25 |
This table with links should show no colour contrast issues.
|
|
|
26 |
|
|
|
27 |
{{< example show_markup="false" >}}
|
|
|
28 |
<table class="flexible table table-striped table-hover generaltable generalbox">
|
|
|
29 |
<thead>
|
|
|
30 |
<tr>
|
|
|
31 |
<th scope="col">#</th>
|
|
|
32 |
<th scope="col">Name</th>
|
|
|
33 |
<th scope="col">Email</th>
|
|
|
34 |
<th scope="col">Status</th>
|
|
|
35 |
</tr>
|
|
|
36 |
</thead>
|
|
|
37 |
<tbody>
|
|
|
38 |
<tr >
|
|
|
39 |
<th scope="row"><input type="checkbox" class="m-1" value="" data-action="toggle" data-toggle="master" data-togglegroup="participants-table" data-toggle-selectall="Select all" data-toggle-deselectall="Deselect all"></th>
|
|
|
40 |
<td><a href="#">Bas Brands</a></td>
|
|
|
41 |
<td>bas@example.com</td>
|
|
|
42 |
<td>
|
|
|
43 |
</td>
|
|
|
44 |
</tr>
|
|
|
45 |
<tr>
|
|
|
46 |
<th scope="row"><input type="checkbox" class="m-1" value="" data-action="toggle" data-toggle="master" data-togglegroup="participants-table" data-toggle-selectall="Select all" data-toggle-deselectall="Deselect all"></th>
|
|
|
47 |
<td><a href="#">Chris Cross</a></td>
|
|
|
48 |
<td>chris@example.com</td>
|
|
|
49 |
<td>
|
|
|
50 |
Active
|
|
|
51 |
</td>
|
|
|
52 |
</tr>
|
|
|
53 |
<tr >
|
|
|
54 |
<th scope="row"><input type="checkbox" class="m-1" value="" data-action="toggle" data-toggle="master" data-togglegroup="participants-table" data-toggle-selectall="Select all" data-toggle-deselectall="Deselect all"></th>
|
|
|
55 |
<td>
|
|
|
56 |
<a class="linktest-1" href="#">Irene Ipsum</a><br>
|
|
|
57 |
</td>
|
|
|
58 |
<td>irene@example.com</td>
|
|
|
59 |
<td>@blab</td>
|
|
|
60 |
</tr>
|
|
|
61 |
</tbody>
|
|
|
62 |
</table>
|
|
|
63 |
{{< /example >}}
|