How ColorContract builds your color system
From a single brand color, ColorContract generates tonal scales and about twenty semantic tokens, and checks every accessible combination, in light and dark. Here is what happens, step by step.
A brand color that is never changed
You enter your color as hex, rgb or oklch. It is locked: the tool never changes it on its own.
If it cannot meet a combination (for example text on a light background), ColorContract says so and suggests a variant, without touching the brand. The usage map shows where the brand is used as is and where a variant takes over, in light and dark.
Scales built in OKLCH
Each hue becomes a scale of 10, 11 (default) or 12 steps, evenly spaced in perceived lightness. Key steps sit just above the useful thresholds: 3:1 for controls, 4.5:1 for text, 7:1 for AAA.
Chroma follows a curve: highest in the middle, softer at the ends, and bounded by the sRGB gamut of each hue. A perceptual hue correction keeps, for example, dark yellows from turning olive; it can be turned off hue by hue.
Neutral and status colors (error, warning, success, info) are generated with the brand and matched to it, in three styles: vivid, matched to the brand, or subtle.
Roles with guaranteed combinations
Colors are organized as semantic tokens: text, surfaces, action, borders and focus, status. Each role knows the background it must be legible on and the WCAG 2.2 threshold to reach: 4.5:1 for text, 3:1 for controls and focus.
Ratios are truncated, never rounded up: 4.49:1 is a failure. What is reported as passing really passes.
Light and dark, not an inversion
Each role points to different steps in dark mode, and every combination is checked in both modes. In dark mode, targets are raised and text is never pure white, to avoid halation.
You stay in control
Replace a step or a role: the tool flags any combination that breaks and offers a fix. You can also keep a combination failing, with a justification that goes into the export.
Add hues (analogous, complementary, triadic…), choose your backgrounds, AA or AAA, and how your tokens are named (Atlassian, IBM Carbon, Material, Shopify Polaris templates).
A documented export
Export to DTCG (W3C Design Tokens), Figma Variables, Tokens Studio, Style Dictionary or CSS variables, with light and dark in the same file. Every export documents its accessible combinations, justified exceptions and the algorithm version.
Nothing leaves your browser
There is no account and no project server: the project is encoded in the page address. To share it or reopen it later, just copy its link.