Text Contrast Checker (APCA WCAG3)

About this plugin

APCA Contrast Checker evaluates text accessibility using the Accessible Perceptual Contrast Algorithm (APCA) for WCAG 3. Unlike traditional WCAG 2 tools, it provides more perceptually accurate assessments by considering font size, weight, and purpose to ensure truly readable designs.

APCA Contrast Checker for WCAG 3

The APCA Contrast Checker plugin brings the next generation of accessibility standards to Figma, implementing the Accessible Perceptual Contrast Algorithm (APCA) developed for WCAG 3 (formerly known as "Silver").

Why APCA Instead of WCAG 2?

Traditional contrast ratios used in WCAG 2 have significant limitations - they treat all color pairs equally regardless of their perceptual differences, often allowing unreadable dark color combinations to "pass" while flagging perfectly readable light combinations as "failures."

APCA solves these problems by:

1. Accounting for human perception of contrast based on modern vision research
2. Considering text properties (size, weight, purpose) when determining readability
3. Providing appropriate contrast levels for different reading scenarios
4. Delivering more accurate evaluations for both light and dark modes

Key Features

1. Text Property Analysis: Automatically detects and evaluates font size, weight, and color
2. Context-Aware Evaluation: Adjusts contrast requirements based on text purpose (body text, headings, UI labels, or non-text elements)
3. Conformance Levels: Indicates both Bronze (general) and Silver (detailed) level compliance
4. WCAG 2 Compatibility: Shows approximate WCAG 2 ratio equivalents for reference
5. Visual Contrast Meter: Displays contrast levels with an intuitive visual indicator
6. Detailed Recommendations: Provides specific guidance to improve readability
7. Interactive Controls: Adjust text properties and see results in real-time
8. Font Size Guidance: Includes minimum font size recommendations based on contrast level and weight

How to Use

1. Select any text layer in your Figma design
2. The plugin will automatically evaluate the contrast between the text and its background
3. Adjust font size, weight, or purpose using the controls to see how they affect compliance
4. Use the recommendations to improve accessibility
5. Swap text and background colors with one click to test inverse color schemes

About APCA and Conformance Levels

APCA provides two conformance levels:

1. Bronze Level: General guidelines suitable for basic contrast evaluation without reference to lookup tables.
2. Silver Level: More detailed requirements using font size and weight lookup tables for greater accuracy and flexibility.

This plugin implements the full APCA algorithm (Beta 0.1.9 G-4g) and follows the official lookup tables published by Myndex Research, the developers of APCA.

Upgrade your accessibility workflow with perceptually accurate contrast checking that goes beyond simple ratios to ensure your designs are truly readable for all users.