Validation

ChromaForge is the color compiler for developers and designers. It turns color inspiration into perceptual palettes, validates accessibility, and ships production-ready design-system tokens, Figma handoff, framework exports, and CI-friendly audit output.

Use accessibility checks and system audit findings before tokens become production assets.

Core idea: Start with color inspiration, forge into a perceptual palette, validate accessibility, & ship design-system tokens & exports.

Accessibility Panel

The Accessibility panel shows raw color-pair contrast, non-text UI contrast, color-vision simulation, and experimental APCA-style readability values.

Color-vision simulation

  • Standard: original palette colors.
  • Protanopia: simulated red-cone deficiency.
  • Deuteranopia: simulated green-cone deficiency.
  • Tritanopia: simulated blue-cone deficiency.

Metrics

Metric Meaning Target
AA Pairs How many stop-to-stop foreground/background pairs pass WCAG AA normal-text contrast. 4.5:1 or higher for normal text.
Best Highest contrast ratio among the sampled color pairs. Useful for primary text or maximum separation.
Weakest Lowest contrast ratio among the sampled color pairs. Inspect weak pairs before using them together.
Non-Text How many component checks pass UI contrast targets. 3:1 or higher for meaningful non-text UI boundaries.

Non-text contrast checks

  • Card border on app background.
  • Input border on surface.
  • Focus ring on surface.
  • Focus ring on raised surface.
  • Success, warning, and danger status markers.
  • Chart grid against raised surface.

Experimental APCA

APCA-style readings are shown as Lc values. In this build, ChromaForge labels values around 60 or higher as strong for body-style readability, around 45 as useful for larger text, and lower values as risky. Treat APCA as an additional perceptual preview, not a replacement for formal WCAG 2.x compliance checks.

Best practice: Use WCAG AA for pass/fail accessibility targets, then use APCA-style readings to catch readability risks, especially in dark themes.

System Audit

The System Audit panel summarizes whether the palette is ready to act as a full color system.

Audit metrics

  • Readiness: 0-100 score derived from passes, warnings, and failures.
  • Failures: issues that need correction before production use.
  • Warnings: risks that may be acceptable depending on the product.
  • Stops: total number of palette stops.

Audit findings

Finding What ChromaForge checks
Palette depth Warns when the palette has fewer than 8 stops. 8-11 stops gives Tailwind-style ramps and semantic mapping more resolution.
WCAG 2.2 semantic contrast Checks common foreground/background semantic pairs for AA text contrast.
Non-text contrast Checks borders, focus rings, status markers, and chart grid roles against 3:1 UI contrast targets.
Color vision resilience Simulates protanopia, deuteranopia, and tritanopia; warns when key pairs fall below large-text contrast.
Modern CSS color readiness Identifies high-chroma palettes where OKLCH and P3 exports preserve intent better than hex-only handoff.

Modern Swatch Inspector

Each primitive stop shows a swatch, token name, hex value, RGB CSS string, OKLCH CSS string, and Display-P3 CSS string. Use this panel when you need exact color strings for documentation, implementation, or review.