Live Contrast Heatmap
Visualize accessibility health across your entire screen layout with a color-coded canvas heatmap and interactive opacity controls.
See the accessibility balance of your design at a glance
Reading individual contrast ratios gives you precision, but reviewing whole design systems or landing pages requires spatial awareness. Where are the dense clusters of failing text? Are your interactive footer links and metadata consistently falling below legibility standards?
The Live Contrast Heatmap paints a soft, color-coded visual layer directly over the text nodes on your Figma canvas, transforming accessibility auditing into a fast visual scan.
The heatmap creates a transient, locked Figma group named TintSense Heatmap with custom plugin metadata.
Nodes are rendered with calibrated alpha transparency so your underlying typography, iconography, and imagery remain clearly legible.
Heatmap Controls & Color Coding
Passing WCAG AA/AAA standards with clear contrast safety.
Failing layers that require contrast attention or Smart Fix.
Stale or skipped layers (e.g. image-backed text requiring manual review).
Key Advantages for Design Teams
- Spot Systematic Design Flaws: Immediately see if secondary text across an entire design system file is consistently failing.
- Zero Eye Strain: Dial the opacity slider between 10% and 90% in real time to match your canvas background lightness.
- Presentation & Client Reviews: Show clients and stakeholders a clear, undeniable visual map of accessibility improvements before and after your redesign.
- One-Click On/Off: Toggle the heatmap at any moment from the main toolbar or floating Mini Mode.
How to use in Figma
- Select your target frames and run a scan.
- Click the Heatmap icon (grid icon) in the header toolbar.
- The interactive opacity subbar appears below the header. Adjust the slider to tune the contrast overlay density.