Each departmental template has two set accent colours - one dark, one light. Departments may choose which of these will be the main colour for grid boxes.
To meet the AAA standards of the WCAG accessibility guidelines, dark and light colours should have a minimum contrast ratio of 7:1 with white text (#fff) and black text (#000) respectively.
The colours must also meet a minimum standard of 4.5:1 contrast ratio with each other and against the white background of LSE Moodle pages.
Approved Colour Combinations
Swatch | Name |
|---|---|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
Bespoke colour combinations can be developed in conjunction with Eden Digital, who will ensure they meet necessary accessibility standards.
Useful tools for creating accessible colour combinations
Adjustable colours within Moodle ‘Grid’ format
A. current selected image container colour
B. current selected image container text colour
C. border colour
D. image container background colour
E. section title text colour when 'Inside' option
F. section title background colour when 'Inside' option
G. section title summary text colour on hover
H. section title summary background colour on hover
I. current selected section colour
Guidelines
A/B, E/F, and G/H must have strong contrast
A should have clear contrast against Moodle page background (currently #fff)
Recommendations
Make E and D the same colour.
Make B, C and I the same colour.
Use school defaults for G and H (G = #222 and H = #EEE)
If using ‘outside’ option, C must be thin enough to allow B to be clearly legible (not greater than 2px)
If E or F has good contrast against #fff, use it as A with the other as the B (either repeating the main colour scheme or inverting it).