Design Intelligence Pro Feature v1.2.0

Composite Accessibility Score

A synthesized 0–100 accessibility health rating and letter grade combining WCAG compliance, APCA readability, color blindness, and typography.

A single, clear metric to communicate accessibility to stakeholders

When presenting designs to product managers, clients, or engineering leads, presenting a raw list of forty individual contrast ratios can lead to confusion. Stakeholders want to know: "Is this screen accessible? Where does our app stand overall?"

TintSense provides an authoritative Composite Accessibility Score (0–100) with letter grades (A, B, C, D, F), giving teams a shared benchmark for design quality.

The 4-Factor Weighted Model

Rather than relying on a single simplistic pass/fail ratio, TintSense balances four critical pillars of modern reading comfort:
Overall Score = (WCAG × 0.35) + (APCA × 0.30) + (ColorBlind × 0.20) + (Typography × 0.15)

Score Category Breakdown

WEIGHT DISTRIBUTION & FACTOR EVALUATION COMPOSITE HEALTH MODEL
1. WCAG 2.1 Compliance 35% Weight

Evaluates strict mathematical compliance against legal standards (Level AA / AAA) for normal and large text.

2. APCA Readability 30% Weight

Evaluates perceptual lightness contrast ($L_c$) against target font sizes, weights, and light/dark polarity.

3. Color Blindness Resilience 20% Weight

Penalizes designs that lose legibility under Protanopia, Deuteranopia, or Tritanopia simulated vision.

4. Typography Quality 15% Weight

Rewards appropriate font sizing and weight choices, ensuring captions and disclaimers remain legible on high-DPI displays.

Letter Grades & Quality Thresholds

  • Grade A (90–100): Flawless accessibility. Meets AAA targets, robust against color blindness, and optimal typography.
  • Grade B (80–89): Solid production quality. Meets standard WCAG AA across all primary interactions.
  • Grade C (70–79): Acceptable baseline, but borderline contrast ratios or minor color blindness degradation exist.
  • Grade D / F (< 70): Unacceptable. Prominent text layers fail standard legibility requirements and require immediate remediation.

How to view in Figma

  1. Run a scan on any frame or group of screens.
  2. Check the Grade Pill displayed prominently in the top header (e.g. Grade A • 94).
  3. In batch mode, review the individual grade pill assigned to each screen in the frame list.