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 text , dark and backgound 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 .hUseful tools:contrast ratio with each other and against the white background of LSE Moodle pages.
Approved Colour Combinations
| Expand | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
| Info |
|---|
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
Contrast combination rules for grid format
F must have strong contrast against E
H must have strong contrast against G
B must have strong contrast against A
A should have strong contrast against Moodle page background (currently #fff)
| title | Click for legend |
|---|
Adjustable colours within Moodle ‘Grid’ format
A. current selected image container colour
B
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.
Set Use school defaults for G and H across whole school (Eg #222222 on #EEEEEE(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).
Colour ideas
#657697 - Ducksoup
Swatch
Name
