As interest in web accessibility grows, we have been developing tools to support accessibility assessments "more easily and more clearly" as we provide our accessibility assessment service.
As the first step in this initiative, the Chrome extension "Area Contrast Checker" has been released.
Background of Development
There are three main types of conventional contrast checkers, each with its own advantages and disadvantages.
- Automatic scanning type
While efficient because it mechanically extracts data from the entire page, it has the disadvantage of being prone to false positives and missed detections when the background is an image or gradient. - Picker type (eyedropper)
While it can accurately measure the color as it appears, the drawback is that it requires manual extraction of each individual area, which increases the workload. - Element-specific type
While it's easy to use because it directly references HTML/CSS information, it cannot inspect images and may not correctly capture the actual rendering state, such as element overlap and transparency.
A completely new fourth approach
With Area Contrast Checker, we've devised a completely new fourth approach.
Select the area you want to examine by dragging a box around it. The software will analyze the pixels within that area and automatically detect two colors: the background color and the foreground color. Because it targets the "display itself" that the user actually sees, it can inspect images regardless of overlapping elements.
You can easily investigate by simply dragging the area you're interested in.
Main Features
▪️WCAG 2.1 / 2.2 are suitable for judgment
Based on success criteria 1.4.3, 1.4.6, and 1.4.11, the contrast ratios of normal text (AA: 4.5:1, AAA: 7:1), large text (AA: 3:1, AAA: 4.5:1), and UI components (AA: 3:1) are evaluated.
▪️ Complies with the next-generation standard APCA
This software supports the new contrast standard "APCA (Accessible Perceptual Contrast Algorithm)" currently under consideration in the WCAG 3.0 draft. It instantly displays the maximum font size (Lc value) for which the standard is compatible.
▪️Color suggestions that preserve hue
If the contrast ratio is insufficient, the system will suggest an approximate color that meets the standard while maintaining the original color's hue.
▪️Advanced features for professionals
Supports HEX, RGB, and HSL color formats.
- If you want to fine-tune the automatic detection results, you can re-select pixels at a time using the picker.
- Supports two languages: Japanese and English
Download Area Contrast Checker here
At Liberogic, we aim to make accessibility a standard quality but a something that requires special attention.
This tool incorporates all the "wouldn't it be great if..." features we've encountered in web development and accessibility assessments. We plan to continue releasing tools to make accessibility more accessible and smoother. Please look forward to them!
