CONTRAST / CHECK

The problem

“This colour looks good” does not mean everyone can read it. A contrast checker turns that subjective call into a quick decision that can happen while a design system is still being shaped.

What it does

• Choose or type a foreground and background colour.
• See separate outcomes for body text, large type, and UI controls.
• Swap colours, try a random pair, or start from a suggested palette.

Technical direction

The rules are informed by Color Contrast Checker, while the implementation stays as a single static file. Luminance is calculated in the browser, so the pattern can fit directly into a component or token workflow.

Outcome

Readability becomes a design decision instead of a bug discovered after launch.