Linear Gradient Analysis
Accurately evaluate text placed over linear gradients with multi-point vector sampling to detect worst-case contrast and failing regions.
Most contrast tools sample a single point. Gradients don't work that way.
Gradients are ubiquitous in modern digital product design—hero headers, card banners, call-to-action buttons, and promotional badges. However, standard contrast tools merely sample the center or top-left pixel of a gradient.
This creates a severe accessibility trap: text might pass with 6.0:1 on the left side of a headline, but cross into an illegible 2.1:1 at the right edge as the gradient darkens or shifts hue. TintSense solves this with Multi-Point Gradient Vector Sampling.
TintSense calculates the geometric intersection between the text node's bounding rectangle and the parent's gradient vector. It takes multi-point color samples across the text boundaries, calculating local WCAG ratios and APCA Lc values at every interval.
What Gradient Analysis Uncovers
Lowest contrast detected along the text baseline (Fails AA).
Maximum contrast detected at the lighter gradient stop.
High variance across the reading trajectory.
Key Metrics Reported
- Worst-Case Contrast: The definitive metric for WCAG compliance. If any part of a word falls below the threshold, TintSense flags it.
- Failing Region Coordinates: Pinpoints exactly where the contrast collapse occurs (e.g. "Fails between 62% and 100% of gradient length").
- Risk Classification: Categorized as
Low,Medium, orHighbased on contrast spread and failing surface area. - Actionable Remediation Guidance: Recommends whether to shift color stop positions, increase font weight, or add an subtle scrim overlay.
How to use in Figma
- Place any text layer over a frame or shape with a Linear Gradient fill.
- Scan the frame with TintSense.
- The inspector automatically detects the gradient, expands the gradient analysis drawer, and displays the full contrast spectrum.