What it does
Contrast Ratio is a two-colour checker created by Lea Verou and now hosted by Siege Media. It previews several text styles against the chosen background.
Type background and text colours into the two fields. The ratio updates as the values change; hover over its circle for more detail. Swap colors exchanges the inputs.
When editing a number inside a functional colour value, the up and down arrow keys adjust it. Shift and Alt provide further keyboard adjustments. The sample text shows normal, italic and bold styles at several sizes.
A semi-transparent background introduces uncertainty because its appearance depends on the colour behind it. The checker therefore reports an error margin for that case.
Strengths
- Keyboard adjustments help explore a nearby colour without retyping the whole value.
Watch out for
- A translucent background can produce a ratio range rather than one settled result.
Best for
- Small CSS colour adjustments during interface styling
Sources
- Contrast Ratio (Oct 27, 2026)