Accessible contrasts

In Accessible Contrasts, we develop a new and innovative online tool, called Color Contrast Checker & Designer 2.1, to analyze, select and understand accessible contrasts of simple and complex color combinations that comply with the WCAG 2.1 requirements at levels AA and AAA.

The purpose of the project is to increase the accessibility and readability of visual information on websites as well as other ICT applications. The project will address the needs of people with low vision and other visual impairments, individuals with color vision variations and defects, as well as others who have challenges in interpreting visual information such as the elderly and people with cognitive disabilities. 

A closed door within a stone wall. The door is decorated with a high contrast diamond-shaped pattern in black and yellow.
Photo by Pixabay

Good contrast in digital applications is one of the most important means for increasing the technical availability of visual information for the visually impaired, people with impaired color vision or other vision variations. The importance of contrasts has been emphasized in international standards such as WCAG 2.0 and 2.1, which have become part of Norwegian legislation. The main goal of this project is to increase the accessibility of visual information as well as make it easier to comply with the WCAG 2.1 standard. In this project, we will develop an online tool to support developers, testers, designers, and representatives from municipalities and other authorities to analyze, select and visualize accessible contrasts of simple and complex color combinations to meet the requirements defined in the WCAG 2.1 standard. In addition, the tool can be used to increase awareness and knowledge about different types of color vision variations, including color vision deficiencies. We will develop an openly accessible, universally designed, and digital tool with:

Two main functions

  • An evaluation function, the “color contrast checker”, which analyzes the contrast between multiple colors taken from a web page or an information graphic. The tool will analyze whether all possible color combinations conform to the success criteria defined in WCAG 2.1. The function will have an interface for the simulation of various vision variation models such as color vision deficiency. 
  • A visualization function, the “color visualizer”, which shows the correlation between contrast, readability, and accessibility of colors selected in a graphical user interface. The function will show concrete and representative examples of how different color combinations for text, buttons, maps, diagrams, information graphics, etc. affects the accessibility and readability of visual information. 

The tool will include an interface for simulating various visual impairments. In addition, we will investigate a design function, the “color combination selector”, which will help the user to choose two or more colors that meet the success criteria defined in WCAG 2.1. This function should help designers and developers to select color combinations that conform to both legal requirements, functional needs, and other user wishes related to aesthetics by giving the user the greatest possible control over parameters such as hue, saturation, and brightness. The tool itself will be universally designed with input from stakeholders and will be available online and free for everyone to use. 

Results will be published on this page.

Name: Accessible contrasts

Period: 2022-2023

Funding: The Norwegian Directorate for Children, Youth and Family Affairs (Bufdir)

Application (webpage):

https://norskregnesentral.github.io/m3c/