As interest in web accessibility continues to grow, we have been developing tools to make accessibility assessments simpler and easier to understand, alongside our accessibility audit services.
The first release in this effort, the Chrome extension "Area Contrast Checker," is now available.
Background of Development
There are three main types of traditional contrast checkers, and each has its own strengths and weaknesses.
- Automatic scanning
is efficient because it mechanically extracts colors from the entire page, but it tends to produce false positives and missed detections when backgrounds are images or gradients. - Color picker (eyedropper)
accurately measures colors exactly as they appear, but it requires manually sampling one spot at a time, which adds significant workload. - Element selection
is simple because it directly references HTML/CSS information, but it cannot inspect images, and it may not correctly capture the actual rendered state, such as element overlaps or transparency.
Development began with a question from the field: "Is there a way to detect issues easily, accurately, and anywhere?"
A Fourth Approach Unlike Any Before
The answer to that question took shape as the "area analysis" approach, the fourth approach in Area Contrast Checker.
Simply drag to select the area you want to check. The tool analyzes the pixels within that area and automatically detects the two colors: the background and the foreground. Because it targets what users actually see on screen, overlapping elements are not a concern, and images can be inspected as well.
Checking any area you're curious about is as simple as dragging over it.
Key Features
▪️WCAG 2.1 / 2.2 Compliance Evaluation
Based on success criteria 1.4.3, 1.4.6, and 1.4.11, the tool evaluates contrast ratios for regular text (AA: 4.5:1, AAA: 7:1), large text (AA: 3:1, AAA: 4.5:1), and UI components (AA: 3:1).
▪️Support for APCA, the Next-Generation Standard
Supports APCA (Accessible Perceptual Contrast Algorithm), a new contrast standard under consideration for WCAG 3.0 drafts. Instantly displays the font size at which text meets compliance (Lc value).
▪️Hue-Preserving Color Suggestions
When a contrast ratio falls short, the tool suggests a close color that meets the standard while maintaining the original hue.
▪️Advanced Features for Professionals
Supports HEX, RGB, and HSL color formats.
If you want to fine-tune the automatically detected results, you can reselect colors with a pixel-level picker.
Available in Japanese and English.
Download Area Contrast Checker here
At Liberogic, we aim to make accessibility a baseline standard of quality rather than a special consideration.
We've packed this tool with the "wouldn't it be nice if..." ideas we've encountered through web production and accessibility audits. We plan to keep releasing tools that make accessibility more approachable and streamlined. Stay tuned.
