New colour selection tools and features: parameters, bookmarklet, colour test page

The department 2.2 Web and Design, in collaboration with the imperia team of the CIT, has developed new tools and features for colour selection:

  • A page for contrast testing of colours with a clear, configurable display of accessible colours has been developed
  • The parameters for colours in the meta-info area of the main section have been redefined and supplemented with colour selection and contrast information
  • A colour preview or colour swap tool based on a bookmarklet has been developed
All tools take into account the new WCAG 2.2 criterion 1.4.3 (AA), according to which colours used for text (or text in images) should have a minimum contrast of 4.5:1. Since this standard must be met for new appearances, the tools are intended to assist in colour selection and settings and to facilitate decisions.

WCAG 2.2 contrast testing – All 16,777,216 web colours

The page "WCAG 2.2 contrast testing – All 16,777,216 web colours" contains, in addition to a test tool that evaluates the contrast of any colour to white, a colour overview/selection for accessible colours. The latter is configurable with many setting options and is intended to facilitate the visual selection of suitable and accessible colours with its colour tile display.

Colour parameters in the meta-info area

The colour parameters in the meta-info area have been redefined and the functionality improved. The parameter now uses the HTML colour picker of a browser and calculates and evaluates contrasts.

Instruction: If a colour value is not in the internal colour list with existing colours, the system selects a colour as similar as possible from this list when entered manually. New colour values must still be entered into this internal list if they have never been used before. To do this, send your desired colours to or.support@uni-muenster.de. Only colours with the required minimum contrast of 4.5:1 will be entered.

Bookmarklet: colour swap tool

The bookmarklet is a small script that can be called up via a bookmark on imperia web pages of the University of Münster and enables the temporary exchange of primary and secondary colours via a small form window. It is intended to facilitate the testing of colours and colour combinations for web pages without the colour parameters in the meta area having to be set or the developer tools of a browser being required.

You can find the bookmarklet and information on installation in the accordion "colours" on the design elements page in the Web guidelines of the Web and Design department.