TintSense
Get the plugin
Design Intelligence Pro Feature v1.2.0

Smart Fix Color Suggestions

Intelligent color recommendation engine operating in perceptually uniform OKLab space to calculate the closest compliant color with minimal visual change.

Don't guess compliant hex codes. Let mathematics calculate them.

When a text layer fails contrast (e.g. #999999 on white giving 2.8:1), designers typically drag the color picker slider downwards until the plugin turns green. This guesswork often leads to over-darkening, jarring visual shifts, and destroyed brand palettes.

Smart Fix solves this problem algorithmically. It calculates the mathematically closest color that satisfies WCAG standards while changing the visual character of your design as little as humanly possible.

Why OKLab Color Space?

Standard sRGB and HSL color spaces are perceptually non-uniform: changing lightness in HSL causes unintended shifts in perceived chroma and hue. TintSense translates colors into OKLab (created by Björn Ottosson), an advanced color appearance model where Euclidean distance ΔE = √((ΔL)² + (Δa)² + (Δb)²) directly mirrors human eye perception.

How the Smart Fix Engine Works

1. Multi-Strategy Candidate Generation

When evaluating a failing layer against its backdrop, TintSense generates multiple candidate solutions:

  • OKLab Lightness Optimization: Adjusts the lightness parameter (L) while locking chromatic coordinates (a and b) to preserve exact brand hue.
  • Perceptual Mix to Target: Blends towards high-contrast anchors with tiny, calibrated steps.
  • Ratio Epsilon Safety Margin: Adds a +0.02 safety epsilon to guarantee that 8-bit color quantization and subpixel rendering will never flip a passing grade back to fail in production browsers.

2. Ranking by Visual Distance

Candidates that meet the target threshold (AA 4.5:1 or AAA 7.0:1) are scored and sorted by their perceptual distance ($\Delta E$). The solution that looks virtually indistinguishable from your original intent is ranked first.

SMART FIX LIVE INSPECTION EXAMPLE BEFORE & AFTER
ORIGINAL FAILING COLOR
#94A3B8
2.4:1 — WCAG AA Fail
SMART FIX OKLAB RECOMMENDATION
#64748B
4.54:1 — WCAG AA Pass (ΔE: 0.08)

3. Direct One-Click Apply

You do not need to copy hex values. Clicking Apply immediately updates the text layer's fill in Figma. Undo (⌘ Z) remains fully functional at all times.

4. Batch "Fix All" Capability

Have an entire frame with 10 failing text captions, badges, or subtitles? Click Fix All in the frame detail header to automatically apply the optimal compliant colors across every failing layer in a split second.

How to use in Figma

  1. Scan any frame that contains failing text.
  2. Click into the frame in the TintSense panel to open Frame Details.
  3. Inspect the suggested color swatch under any failing row and click Apply, or click Fix All in the top header.