Color Contrast Calculator

Check WCAG contrast ratio between two colors.

Loading tool…

Recommended next step

Design and validate your interface

After using Color Contrast Calculator, continue with Color mixer.

Tools selected to complete the same task.

4 steps

Color mixerCalculate the intermediate color between two HEX colors.Design & colorColor

Color pickerExplore colors and their HEX, RGB, and HSL values.Design & colorColor

Complementary Color Palette GeneratorGenerate the complementary color of any HEX base color for balanced palettes.Design & colorColorRandom generators

DPI CalculatorCalculate screen DPI (dots per inch) from resolution and diagonal size.Design & color

Tool guide

Color Contrast Calculator: how it works

Practical information to understand the result and use this tool correctly.

About Color Contrast Calculator

Check WCAG contrast ratio between two colors.

The tool runs directly in the browser for immediate results.

How to use it

1Enter the values you want to calculate or process.
2The result updates instantly on the same page.
3Copy, share, or export the result if the tool allows it.

Frequently asked questions

Do I need to sign up?: No. The tool works without an account.
Are my data uploaded?: Compatible operations run locally in the browser.
What is a good contrast?: AA requires 4.5:1 for normal text, 3:1 for large.
Hex format?: Use #RRGGBB or RRGGBB.