Media
5 items
Description
Check APCA perceptual contrast and WCAG 2.x contrast ratios directly in your browser. Accessibility does not begin at the audit stage. It begins during design. You may have been told that color must meet specific contrast thresholds. But how will you know how those combinations are actually perceived? How will text perform against the chosen background? How will contrast behave in light and dark themes? And what will happen when color vision deficiencies are taken into account? Accessible design is not about passing a number, just to reach a minimum ratio. It is about ensuring that visual contrast supports real perception and usability. AVC + WCAG Contrast Checker was created to support that process. What It Calculates: WCAG 2.x Contrast Ratios Standard luminance-based contrast ratio WCAG AA / AAA evaluation Immediate PASS / FAIL feedback APCA (Advanced Perceptual Contrast Algorithm) Lc value calculation Perceptual contrast interpretation More realistic contrast evaluation for modern interfaces APCA is particularly relevant for: Light text on dark backgrounds Thin or lightweight fonts Modern UI systems and component libraries Perceptual validation beyond legacy ratio thresholds Core Features 1. Single Color Pair Analysis a) Quickly test one text/background combination: b) WCAG ratio c) APCA Lc value d) Visual contrast interpretation e) Immediate compliance feedback Ideal for fast audits and design reviews. 2. Dynamic Color Matrix allow to a) Add multiple colors and automatically generate all possible combinations. b) Text vs background permutations c) Swap button for instant inversion d) Simultaneous APCA and WCAG evaluation e) Rapid validation of design systems and token sets Ideal for: - Design system testing - Brand palette validation - Theme verification - Useful for accessibility audits when automated checks are not enough. 3. Color Blindness Simulation Simulate common types of color vision deficiency: - Protanopia - Deuteranopia - Tritanopia - Achromatopsia - Partial anomalies and what is important, calculation are also adjusted in these modes. Useful for: - UX reviews - Accessibility audits - Inclusive design validation 4. EyeDropper Integration - Pick any color directly from your screen using the built-in EyeDropper API. - You can also enter or copy HEX values manually. 5. Export Options Generate documentation-ready outputs: - HTML report export (includes results from both analysis tabs) - PNG snapshot export 6. Persistent Local Storage The extension stores: - Saved colors - Matrix entries - Theme preference - Simulation settings All data is stored locally in Chrome, using the storage permission. Who is this for? - Accessibility specialists - WCAG auditors - UX designers - Testers and FE developers - Digital compliance teams - Design system maintainers If you work with contrast compliance, perceptual validation, or inclusive UI systems — this tool supports your workflow. When to Use It - During accessibility audits - While reviewing UI components - When validating design tokens - When testing light and dark themes - When preparing compliance documentation - When evaluating perceptual contrast using APCA