Color Contrast Checker

About Color Contrast Checker

Text must be easy to read for everyone, including people with low vision. This checker calculates the contrast ratio between text and background colors and shows whether it passes WCAG AA and AAA levels for normal and large text. Designers and developers use it to check accessibility before publishing.

Example

Input: dark gray text #1f2937 on white. Output: a ratio of about 14.7 to 1, passing all levels.

Tips for better results

• Aim for at least 4.5 to 1 for normal text.
• Large text can use 3 to 1.
• Do not rely on color alone to convey meaning.

When to use Color Contrast Checker

The Color Contrast Checker is for anyone who puts text on a colored background and wants people to be able to read it. Web designers, bloggers, developers, email marketers and presentation makers use it to test button labels, headings, links and body text. Enter the text color and background, read the ratio and see which WCAG levels pass. It is a practical step before publishing a page, sending a campaign or finalizing a brand color combination.

Real-world uses

• A web designer tests a white label on a bright orange button and learns whether the pair passes before sending the design to a developer.
• A blogger checks light gray body text on a white theme to see whether it should be darkened for easier reading.
• An email marketer tests brand colors for a promotional banner to make sure the call-to-action text stays readable on small screens.
• A developer checks link color against a dark footer background and adjusts the shade until it reaches a passing ratio.

Common mistakes to avoid

• Testing only the main colors can miss hover, focus, disabled and visited states. Check every state a user may see, not just the default one.
• Placing text over a photo or gradient changes the background across the area. Check the lightest and darkest parts behind the words, not one sample point.
• Passing a ratio does not guarantee comfortable reading. Font size, weight and line spacing also matter, so view the result on a real screen.

Check text and background contrast for accessibility (WCAG). It works instantly in your browser, so there is nothing to install and nothing to upload. Color Contrast Checker is part of our collection of 100 free tools in the Images & Design category.

How to use it

1. Enter your information or choose a file in the tool above.
2. Your result appears right below the tool.
3. Copy the result, or adjust your input and try again.

Frequently asked questions

What ratio should I aim for?

For regular text, WCAG AA asks for at least 4.5 to 1, and AAA asks for 7 to 1. Large text has lower thresholds. Aim for the higher level when you can, especially for long reading.

Can I fix a failing pair easily?

Usually you can darken the text or lighten the background, or the reverse, until the ratio passes. Small changes in lightness often work and keep the same general color feel.

Is Color Contrast Checker free to use?

Yes. Color Contrast Checker is completely free and you do not need to create an account.

Is my data uploaded anywhere?

No. This tool runs in your browser, so what you type or choose stays on your device.

How accurate are the results?

Calculations use standard formulas, but always double-check important figures, especially for money, health or legal decisions.