AVC + WCAG Contrast Checker

About

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