Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

To meet the AAA standards of the WCAG accessibility guidelines text and backgound colours should have a minimum contrast ratio of 7:1.h

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
titleClick for legend

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

Expand

Swatch

Name

Image RemovedImage Added

Image RemovedImage Added

Image RemovedImage Added

Image RemovedImage Added

Image Added

Image RemovedImage Added

Image RemovedImage Added

Image RemovedImage Added

Image RemovedImage Added

Image RemovedImage Added

Image RemovedImage Added

Image RemovedImage Added

Image RemovedImage Added

Image RemovedImage Added

Image RemovedImage Added

Image RemovedImage Added

Image RemovedImage Added

Image RemovedImage Added

Image RemovedImage Added

Image RemovedImage Added

Image RemovedImage Added

Image Added

Image Removed

Image RemovedImage Added