During June 2018, W3C WAI recommended the new accessibility standard Web Content Accessibility Guidelines 2.1 i.e. WCAG 2.1. Along with many new success criteria specific success criterion is added that speaks about color contrast for non-text content. While the existing 1.4.3 contrast (minimum) and 1.4.6 contrast (Enhanced) still exist.
1.4.11 Non-text contrast
The success criteria says
the following have a contrast ratio of at least 3:1 against adjacent color(s):
User Interface Components
Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
Graphical Objects
Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
Read more about 1.4.11 non-text contrast.
Most of the color contrast testing tools still show the WCAG 2.0 success criteria only. The new color contrast analyzer from The Paciello group can identify the contrast between the non-text content and their background and analyze the conformance including the new WCAG 2.1 success criteria.
About the WCAG 2.1 Color Contrast Analyzer
The new WCAG 2.1 color contrast analyzer was released late 2018 to match with the new success criterion 1.4.11 Non-text contrast. The tool was rebuilt from the scratch using electron. Interestingly most of the features of the tool are accessible by screen reader and keyboard. More keyboard access is added in the future release I believe. Since the user interface is built with HTML elements, using the tool is usable and accessible compared with the old version of CCA.
Features of WCAG 2.1 Color Contrast Analyzer
The most important feature I believe is that allows the users to pick the foreground color and background color from the existing web page, design or any other digital format and find the contrast between them. This feature allows to identify the accurate contrast for existing UI. The other interesting features of the validator are
- Option to provide the foreground and background color values in any of the following formats to identify the contrasts in various WCAG 2.1 success criteria.
- Hex: #FFF, #FFFFFF, #FFFA, #FFFFFFAA
- Names: blue, grey, orange, …
- RGB: rgb(200,200,200), rgba(200,60,60,0.3)
- HSL: hsl(360,100%,50%), hsla(360,60%,50%,0.4)
- Alpha transparency support for foreground colors.
- Color blindness simulator.
- Option to switch foreground and background colors.
- Support to WCAG 2.1 conformance checks.
- Available for both Windows and Mac OS.
Where can I download WCAG 2.1 Color contrast analyzer?
The new CCA tool is developed by The Paciello Group. Additional information of the tool can be found at the Color contrast analyzer page. The code and other information including Mac and Windows versions are at download CCA page.
Download and run the exe file to install. Once the tool is installed it will create an icon on desktop to start using it.