Color Contrast

About this plugin

Measure color contrast using the APCA, BPCA, and WCAG 2 algorithms.

Inspect Mode:

1. Select any layer—preferably text, but frame, group, component, or instance layers also work—to automatically extract the color.
2. Alternatively, you can manually input the color.
3. The calculated contrast value will be displayed below.
4. Click the "Show conformance" button at the bottom to view the WCAG conformance for the selected contrast.

Audit Mode:

1. Select the frame to run the audit for and click run audit button.
2. The plugin lists any contrast violations for both normal and large text.
3. WCAG2 is the default algorithm, but you can switch to other contrast algorithm.
4. 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.