To meet the AAA standards of the WCAG accessibility guidelines text and backgound colours should 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