Color Contrast Calculator

This tool checks contrast between two colors. Enter or pick a foreground and background color, and the output gives the contrast ratio with a live preview. Use it when you need to test readability for text, buttons, and interface elements.

Loading interactive color workspace...

How it works

Set foreground and background colors, then the tool calculates the contrast ratio and shows the pair as a live sample.

Use this tool for

• Check text and background color contrast before shipping UI changes.
• Compare color pairs for readability.

Common questions

Does it update live?

Yes. The ratio and preview update as soon as colors change.

Can I copy the colors?

Yes. Copy the active values in HEX, RGB, HSL, or all at once.