The Multi-Color Contrast Checker (M3C)

Accessible and readable contrast of text and graphical elements is a key requirement of the universal design of digital interfaces for people with and without disabilities. Many manual and automatic tools have been developed to help designers and developers measure color contrasts, but these tools are limited when it comes to assessing the contrast of three or more colors, the contrast of non-textual elements, as introduced by the Web Content Accessibility Guidelines (WCAG) 2.1, and contrasts for people with visual deficiencies, including Color Vision Deficiencies (CVDs). This paper proposes an open-source, worldwide accessible, and universally designed web-based tool called Multi-Color Contrast Checker (M3C). Our tool provides three novel main functions: (1) A multi-color contrast checker that assesses two or more colors according to their compliance with WCAG 2.1. (2) A color contrast example area that visualizes the effects of the chosen colors on concrete visual example elements typically found in digital interfaces. (3) A CVD simulator for three common types of CVDs. The tool has been assessed for correctness, accessibility, and user experience in both expert and user evaluations, which have confirmed the tool’s usefulness in increasing awareness and knowledge of good color contrasts.