Color Contrast
Measure color contrast using APCA, BPCA, WCAG 2 algorithms
Plugin Preview
About this plugin
Measure color contrast using the APCA, BPCA, and WCAG 2 algorithms.Inspect Mode:Select any layer—preferably text, but frame, group, component, or instance layers also work—to automatically extract the color.Alternatively, you can manually input the color.The calculated contrast value will be displayed below.Click the "Show conformance" button at the bottom to view the WCAG conformance for the selected contrast.Audit Mode:Select the frame to run the audit for and click run audit button.The plugin lists any contrast violations for both normal and large text.WCAG2 is the default algorithm, but you can switch to other contrast algorithm.In the list, you can click on any row to focus that layer on the canvas, you can shift + click on any row to open that layer in the inspect mode.If you aren't familiar with the BPCA or APCA algorithms, check out this article Color contrast, a deep dive.
Plugin Details
| Version | 7 |
|---|---|
| Created | June 6, 2024 |
| Last Updated | December 19, 2024 |
| Category | Accessibility tools |
| Creator | mohan vadivel |
| Stats | 133 installs, 29 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/index.html
- main:dist/code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the Accessibility tools category.
Stark - Contrast & Accessibility Checker
Fix Color Contrast and Typography issues and add WCAG annotations for a smooth design to dev handoff
Contrast
Quickly check and scan for contrast issues on gradients, images, blends, and fills.
Color Palettes ( Colorsinspo ) : Color & Accessibility Tools
A free suite of integrated Color & Accessibility tools - 10+ tools free access 🔥