Area Contrast Checker - Drag to Scan WCAG & APCA Color Accessibility
リベロジック株式会社 · Developer Tools
Media
6 items
Description
Drag-to-scan A11y contrast tool. Pixel analysis works reliably on images and gradients. Supports WCAG 2.1/2.2 and APCA. Traditionally, there have been three ways to measure contrast ratios in web accessibility (a11y). However, each has its trade-offs: 1. Automated Scanners While efficient for page-wide audits, these often struggle with images and gradients, leading to false positives or false negatives. 2. Eyedropper Pickers These are accurate but tedious. Manually selecting color pairs one by one is time-consuming and prone to human error in high-volume tasks. 3. Element-Based Inspectors These read computed HTML/CSS values directly. However, they often fail to account for the actual rendered visuals, such as overlapping elements, transparency, or complex layering. Area Contrast Checker introduces a "fourth approach" to bridge these gaps. By analyzing actual rendered pixels from a screenshot of the rendered page, it automatically identifies foreground and background colors. The result is a measurement based on exactly what the user sees. 🔍 How to Use 1. Click the extension icon to start the check. 2. Drag to select the area you want to inspect. 3. Contrast ratios and WCAG compliance results appear instantly. ⭐ Key Features ▪️ Area-Based Automated Analysis Just drag to select. The tool analyzes pixels to identify foreground and background colors automatically. It works accurately on images, gradients, overlays, Canvas elements, and complex visual layers. ▪️ WCAG 2.1 / 2.2 Compliance Evaluate contrast based on Success Criteria 1.4.3 and 1.4.11. Get instant ratings for Normal Text (AA: 4.5:1, AAA: 7:1), Large Text (AA: 3:1, AAA: 4.5:1), and UI Components (AA: 3:1). ▪️ APCA Support Go beyond WCAG 2.x with the Accessible Perceptual Contrast Algorithm (APCA) being considered for WCAG 3.0. Instantly see Lc values showing which font sizes meet the criterion. ▪️ Hue-Preserving Color Suggestions When contrast falls short, the tool suggests WCAG-compliant alternatives while preserving the original hue. Copy the new color codes directly into your design or code. Prefer a safety margin over the bare minimum? Choose a suggestion margin in Settings (+0.3 / +0.7, or Lc +5 / +10 for APCA) (v1.5.0). ▪️ Live Color Suggestions Preview (v1.4.0) Click a suggested color in "Color suggestions" to instantly preview the change on the selected area. See exactly how your content will look before applying the fix. ▪️ OKLCH Color Format Support (v1.3.0) View and copy colors in the OKLCH perceptual color space — a modern, human-friendly format increasingly adopted in CSS and design tools. ▪️ One-Click Color Copy (v1.2.0) Copy foreground and background color codes instantly with the copy button for each color. Paste directly into your design tools or code. ▪️ Built for Professionals - Retina/High-DPI Support: Automatically accounts for device pixel ratios for precise sampling on all screens. - Manual Picker Mode: Need to fine-tune the results? Manually select specific pixels for complete control. - Multiple Color Formats: View and copy colors in HEX, RGB, HSL, or OKLCH. - Page Interaction Mode (v1.1.0): Hold Alt (Option on Mac) to temporarily interact with the page — click, hover, or navigate — without leaving the checker. 📊 Comparison with Other Tools Area Contrast Checker combines the precision of pixel-level sampling with the speed of area selection. There is no need to pick colors manually or hunt through the DOM. It transforms accessibility audits, design reviews, and inclusive design workflows into a faster, more reliable process. ⚠️ Disclaimer Color detection is an estimate based on pixel distribution within the selected area. Complex background patterns or subtle color combinations may produce results that differ from the intended colors. For precise measurements, use Manual Picker Mode to re-select colors. This tool does not guarantee final accessibility compliance decisions. 🔒 Privacy We do not collect any data. The tool makes no network requests. Screenshots are processed entirely within the browser's memory and are never saved or transmitted externally.