TintSense
Get the plugin
Core Scanning Free v1.2.0

WCAG Contrast Scan

Automated text contrast scanning against WCAG 2.1 AA and AAA targets, powered by multi-layer alpha blending and character-level range inspection.

Accurate contrast calculation where standard tools fail

Most basic contrast checkers simply grab the fill of a text layer and the fill of the frame directly behind it. In modern UI design, however, text rarely sits on a single flat opaque rectangle. Text frequently rests over semi-transparent cards, nested auto-layout containers, backdrop blurs, or grouped vector illustrations.

TintSense implements a recursive background resolution engine combined with character-level text range scanning, ensuring that your contrast ratios reflect the actual pixels your users see on their screens.

The Mathematical Foundation

WCAG 2.1 defines contrast ratio as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Luminance is calculated using the sRGB gamma transfer function: Y = 0.2126 × R + 0.7152 × G + 0.0722 × B after converting non-linear 8-bit channels into linear space.

What makes TintSense's scan engine unique?

1. Multi-Layer Porter-Duff Alpha Compositing

When a text layer sits over a semi-transparent card (e.g. rgba(255, 255, 255, 0.8)) that itself rests on a dark background, TintSense recursively walks the Figma scene graph. It applies W3C Porter-Duff "Source Over" compositing:

C_out = C_source × α_source + C_backdrop × α_backdrop × (1 - α_source)

This compositing pipeline accurately blends opacity, parent frame opacities, and layer visibility flags, preventing false passes or misleading failure flags.

2. Character-Level Text Range Inspection

A single Figma text node can contain multiple colors, font sizes, or weights (for example, a sentence where one keyword is highlighted or bolded). While standard plugins evaluate only the first character, TintSense examines sub-ranges via getRangeFills and getRangeFontName. If a subtle muted sub-phrase fails WCAG standards while the surrounding headline passes, TintSense flags the exact failing sub-range.

3. Automatic Normal vs. Large Text Thresholds

WCAG specifies different contrast ratios depending on the visual weight of typography:

WCAG 2.1 CONTRAST COMPLIANCE THRESHOLDS LEVEL AA & AAA
Normal Text (< 18pt or < 14pt bold)

Body text, captions, metadata, buttons:

Level AA: 4.5:1 Level AAA: 7.0:1
Large Text (≥ 18pt or ≥ 14pt bold)

Headlines, display titles, prominent banner callouts:

Level AA: 3.0:1 Level AAA: 4.5:1

4. Custom Ratio Targets

Need to satisfy custom design system rules or internal enterprise requirements (e.g. 5.0:1 for elevated brand accessibility)? TintSense allows you to switch from preset AA/AAA targets to Custom Ratio mode in settings, letting you define precise normal and large text targets.

How to use in Figma

  1. Select any text layer, nested auto-layout frame, or screen artboard.
  2. Open TintSense or press ⌘ R to initiate a scan.
  3. Review pass/fail status, contrast ratios, and background color sources directly in the plugin inspector panel.