TintSense is a Figma plugin that automatically scans text layers in your designs and evaluates their contrast ratios against WCAG 2.1 AA and AAA standards. It detects foreground and background colors — including alpha-composited and gradient backgrounds — using full Porter-Duff compositing with support for all Figma blend modes. Results are displayed as visual overlay badges directly on your Figma canvas, giving you instant, actionable feedback without leaving your design workflow.

The free tier includes full WCAG contrast scanning with AA and AAA evaluation for both normal and large text, batch analysis across selected frames with results grouped by frame, and a compact Mini Mode for quick rescans. The scanner handles complex layer stacks — multiple fills, semi-transparent layers, and nested frames — to accurately determine the effective foreground and background colors for every text node.

TintSense Pro unlocks a powerful suite of advanced accessibility tools: APCA (WCAG 3 draft) readability scoring with polarity-aware Lc values and font-size-dependent thresholds; color-blind safety simulation for Protanopia, Deuteranopia, and Tritanopia using Viénot et al. (1999) transformation matrices; a weighted composite accessibility score (0–100 with letter grades A–F) combining WCAG conformance, APCA readability, color-blind resilience, and typography quality; multi-point gradient analysis with risk classification; a contrast heatmap overlay color-coded by compliance level; Smart Fix suggestions that binary-search HSL lightness to find the nearest compliant color with minimal visual change; a rule-based recommendation engine with prioritized, severity-coded suggestions; and exportable HTML, JSON, and CSV reports for stakeholder sharing.

Built with a clean, modular architecture featuring dependency injection, a message bus for plugin-to-UI communication, feature flags for Free/Pro tier gating, and a remote license validation system hosted on Cloudflare Workers. TintSense is designed for performance — viewport-aware badge rendering caps at 20 simultaneous badges with batch processing and collision avoidance, ensuring smooth operation even on large design files.

Year 2025
Role Plugin Development, UI/UX Design, Accessibility Engineering
Client Fionn

Features

WCAG Contrast Scan

Automatically scans all text nodes and calculates contrast ratios against WCAG 2.1 AA and AAA standards for both normal and large text. Handles complex layer stacks with Porter-Duff alpha compositing and all Figma blend modes.

APCA Readability Scoring

Advanced Perceptual Contrast Algorithm (WCAG 3 draft) with polarity-aware Lc values, font-size-dependent thresholds (45/50/60 Lc), and tiered readability levels — Gold, Silver, and Bronze.

Color Blind Safety

Simulates Protanopia, Deuteranopia, and Tritanopia using Viénot et al. (1999) 3×3 transformation matrices in linear-RGB space. Verifies that color pairs remain accessible for all color vision deficiency types.

Smart Fix Suggestions

Binary-searches HSL lightness in both directions (lighter and darker) over 32 iterations to find the nearest WCAG-compliant color. Preserves your original hue and saturation with the smallest possible visual change. Generates suggestions for both foreground and background at AA and AAA levels.

Contrast Heatmap

Renders a color-coded rectangle overlay on your Figma canvas — green for AAA pass, teal for AA pass, orange for borderline, and red for failing contrast. Viewport-aware rendering ensures smooth performance.

Composite Accessibility Score

Weighted 0–100 score with letter grades (A–F) combining WCAG conformance (35%), APCA readability (30%), color-blind resilience (20%), and typography quality (15%). Includes gradient risk penalty for text over gradient backgrounds.

Gradient Analysis

Multi-point sampling (17 positions) across gradient backgrounds to determine worst-case, best-case, and range-based contrast. Classifies risk as low, medium, or high with actionable guidance on safe text placement zones.

Recommendation Engine

Rule-based system that examines all analysis results and produces prioritized, actionable suggestions. Each recommendation includes severity (critical/warning/info), estimated score impact, and a concrete suggested fix.

Export Reports

Generate self-contained HTML reports with score banners and color palettes, structured JSON with full data fidelity, or flat CSV exports with 40+ columns including HSL values — perfect for spreadsheet analysis and stakeholder sharing.

Visual Overlay Badges

Smart viewport-aware badge rendering directly on the Figma canvas. Badges show pass/fail status, contrast ratio, and APCA Lc value with collision avoidance. Caps at 20 simultaneous badges with batch processing for performance.

Click or press any key to skip