Contrast Grid / Live workspace
Palette Contrast Matrix
Compare every foreground and background pairing in a colour palette, label WCAG contrast ratios and find reusable accessible combinations.
Test both directions
The numeric ratio is symmetrical, but the design role is not. Small white text on blue and a blue icon on white may need different surrounding states, font weights and non-colour signals.
Look for role pairs
A palette becomes usable when background, surface, primary text, secondary text, accent and border roles have documented pairings. A single passing swatch does not make every component accessible.
Keep the threshold attached
Record whether a pairing is intended for normal text, large text, non-text graphics or decoration. A ratio without the intended content size can be approved for the wrong job.
Use the output well
- Limit the matrix to colours actually used as foregrounds or backgrounds.
- Label normal-text and large-text thresholds separately.
- Inspect hover, focus, disabled and selected states.
- Keep non-colour cues for errors and status.
The matrix implements WCAG 2 relative luminance contrast. It does not assess font rendering, spatial layout, colour-vision perception or newer contrast models.