Skip to content
FreeKitX

Color System Checker (Gamut & WCAG Pairs) - FreeKitX

Bookmark this tool

Save this page in your browser

On a phone, choose Add Bookmark from your browser’s Share or menu.

Audit sRGB/Display-P3 gamut, WCAG 2.2 semantic pairs, and scale quality. Choose explicit remediations—never silent brand mutations.

Color System Checker

Review sRGB and Display-P3 gamut, WCAG 2.2 semantic pairs, scale-quality guidance, and explicit remediations. Guidance never blocks export; proposals never apply until you confirm.

Source colors

Local handoff

Restore the versioned local draft, exchange a project JSON file, or share a size-bounded URL fragment that stays on this device.

Import colors

Paste plain colors, CSS custom properties, or DTCG 2025.10 JSON. Parsing never executes CSS, fetches resources, or changes the current project until you confirm replace or merge.

0

Related tools

Direct answer

A Color System Checker evaluates gamut membership, WCAG 2.2 contrast for meaningful semantic pairs, and perceptual scale quality, then proposes explicit remediations the user must apply.

How to use this tool

1

Open Checker Stage

Enter from the Color System Checker page or continue from Builder with the same in-memory project.

2

Review Audits

Inspect sRGB and Display-P3 classifications, WCAG pair results, and scale quality notes for lightness order and adjacent distance.

3

Apply Chosen Fixes

Accept remediation proposals that state the target, changed token, new value, and consequence—source anchors stay locked.

Semantic Pair Contrast and Gamut Honesty

Contrast uses WCAG 2.2 relative luminance on semantic foreground/background relationships rather than an unreadable all-pairs matrix. Out-of-gamut Display-P3 anchors are explained with deterministic sRGB fallbacks instead of silent channel clipping.

  • Remediation never silently mutates immutable source colors; derived tokens absorb accessibility fixes.
  • Non-text AAA is not invented when WCAG does not define it for that relationship.
  • Checks run entirely in the browser against the current Color System document.

Practical examples

Primary on Surface AA Audit

Input: Roles: text on surface with Primary #2563eb accents

Output: Pair report with AA/AAA status plus optional derived remediation token

Shows failing pairs with explicit proposals while preserving the locked brand anchor.

Limitations

  • Reports mathematical accessibility for flat semantic pairs; complex imagery still needs separate review.
  • Scale quality heuristics are advisory and do not replace designer judgment.

Frequently asked questions

Will Checker change my brand color automatically?

No. Source anchors are immutable. Remediation creates or adjusts derived tokens only after you confirm.

Can I add a custom foreground/background pair?

Yes. Add product-specific semantic pairs so the report covers real UI usage without exploding into all-pairs noise.

Is keyboard access supported for remediation controls?

Yes. Remediation actions are reachable by keyboard with visible focus, and status messages announce outcomes programmatically.

Authoritative References & Standards