Contrast Grid / Live workspace
Accessible Colour Token Builder
Generate a small CSS token set from brand, background and surface colours while checking text and interactive-state contrast relationships.
Tokens encode relationships
A token name such as text-on-brand is more useful than blue-700 because it records intended use. The generator reports the key ratios beside the CSS so design review and implementation stay connected.
One brand colour is not every state
Hover, active, focus, selected and disabled states need their own perceptible differences. Start with a passing base pair, then test the complete component state model rather than applying opacity blindly.
Surfaces need boundaries
Adjacent background and surface colours can be visually indistinguishable even when text passes. Use border, shadow, spacing or tonal difference to communicate grouping without relying on a barely visible outline.
Use the output well
- Name tokens by semantic role, not only hue.
- Check text on background, surface and brand.
- Test focus indicators against adjacent colours.
- Avoid opacity combinations that change over unknown backgrounds.
Generated CSS is a starting token set. Component size, font weight, state, focus treatment and non-text requirements still need rendered inspection.