To meet the AAA standards of the WCAG accessibility guidelines
...
, dark and
...
light colours
...
must have a minimum contrast ratio of 7:1
...
Useful tools:
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)
...
...
| Expand | ||
|---|---|---|
| ||
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 |
Suggestions
Make E and D the same colour.
Make B, C and I the same colour.
Set defaults for G and H across whole school (Eg #222222 on #EEEEEE)
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
...
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.
| Info |
|---|
Bespoke departmental colour combinations can be developed in conjunction with Eden Digital, who will ensure they meet necessary accessibility standards. |
Next: Colour schemes and colour swatches!