1. Import, map, and lock your colors
Import a CSS theme or supported SwatchSpring JSON. Check the role mappings before running repairs: a preview default is not evidence that your imported theme contains that color.
Open the imported token list and use Lock on the brand colors, backgrounds, or other source colors you need to preserve. Review both modes. Locking a resolved alias protects its ultimate literal source, including other roles or modes that share it.
The generator’s Lock brand color setting does not replace these imported-token locks. Protecting a source may leave a contrast failure unresolved; a repair cannot promise to preserve every color and make every pair pass.
2. Review contrast in both themes
- Find Review contrast in both themes.
- Choose the normal-text target: AA (4.5:1) or AAA (7:1).
- Choose Preview repairs and inspect the proposed source changes, affected pairs, unresolved failures, and unchecked pairs.
- Choose Apply repairs only when the proposal suits your theme. Use Undo repairs to revert it, or download the contrast report to review the result.
The repair checks the colors after serialization and rejects proposals that turn a previously passing checked pair into a failure. It may find a partial repair or no acceptable change.
A measured example: six failures became two
In a scripted native Safari session on September 16, 2026 (UTC), we imported one synthetic CSS fixture and one equivalent SwatchSpring JSON fixture. Background, surface, and primary colors were locked in both modes.
For each fixture, repair changed only the two shared ink values: light #aaaaaa to #767676, and dark #555555 to #898989. Six reported failures became two; all 18 previously passing checks stayed passing. Two Accent link failures and ten unchecked pairs remained visible.
Downloads and reimports retained the edited values. This is a scoped test of two synthetic fixtures, not a customer success rate or a promise for other themes. The test record, synthetic before/after sources, and verification summary show the procedure and remaining coverage.
3. Test the exported theme in context
Review unresolved and unchecked pairs before exporting. A color-pair report does not cover every text size, image, gradient, focus indicator, or interaction in your application. The W3C explanation of text contrast describes the WCAG minimum criterion and its exceptions.
Download the edited theme, merge it into your project, and check real Light and Dark screens. CSS and token JSON exports contain colors and source structure, not the editor’s lock state; check your locks again after a fresh import.
Put your colors to work.
Open SwatchSpring