Measure the WCAG contrast between two colors

With Color contrast, designers and front-end developers can assess a color choice before approving its accessibility. Measure the WCAG contrast between two colors.

Measure the WCAG contrast between two colors. The tool is free in your browser and shows the result without asking you to create an account.

How to use

Enter the background color, for example as a hexadecimal code.
Add the text or element color you want to compare with that background.
Run the check to get the contrast ratio between the two colors.
Read the WCAG thresholds shown for normal text, large text and interface elements.
Test another color pair if the first result does not meet your needs.

Example

The sample compares a dark color with a light one. The tool calculates the contrast ratio and shows the relevant WCAG thresholds. Check whether the ratio is enough for normal text, large text or interface elements, then test another pair if your design system allows it. The result helps you decide before publishing.

Input

#0F172A
#FFFFFF

Limits and formats

The tool compares two colors, not the real readability of an image or photo.
Transparency, gradients and overlays are not always represented.
A good ratio alone does not validate every accessibility aspect of a page.
Check hover, active and disabled state colors separately.
Displayed values should be interpreted according to text size and purpose.

Where processing happens

All contrast calculation runs in your browser. The color codes you enter stay on your device and are not sent anywhere. The result appears right after the check. You can clear the fields or close the tab without keeping those values.

Frequently asked questions

What ratio should I aim for with body text?

WCAG thresholds depend on text size and purpose. For normal text, level AA usually requires a higher contrast than for large text. Read the guidance shown by the tool for your specific case and check each text style separately.

Can I use color names such as red or blue?

The field expects values the tool can read, especially hexadecimal color codes. If a name is not recognized, replace it with its equivalent hexadecimal code and run the check again.

Does the tool check contrast on a screenshot?

No, it calculates contrast between two entered colors. It does not read an image or a full page. For a mockup, note the color codes used and test each important pair separately.