Color Contrast Checker

Enter a text color and background color to calculate the contrast ratio and see whether it passes WCAG AA and AAA accessibility standards.

The quick brown fox

Sample body text at normal size, for reference.

14.68:1

AA normal text (4.5:1)
AA large text (3:1)
AAA normal text (7:1)
AAA large text (4.5:1)

Example input

#1F2937 on #FFFFFF

Example output

13.15:1, passes AAA

What is a Color Contrast Checker?

Color contrast is the difference in brightness between text and its background. The WCAG guidelines measure it as a ratio from 1:1 (no difference) to 21:1 (black on white). This checker calculates the ratio for any two colors and tells you whether it passes AA and AAA.

When to use it

Use it when picking text and background colors for a website or app, reviewing a design before handoff, or fixing an accessibility audit failure. Light gray text on white is the classic offender.

How it works

Enter a foreground and a background color. The tool converts both to relative luminance using the WCAG formula, then divides the lighter value by the darker one (each with 0.05 added). Normal text needs at least 4.5:1 for AA and 7:1 for AAA. Large text needs 3:1 for AA and 4.5:1 for AAA.

Frequently asked questions

What contrast ratio do I need to pass WCAG AA?

4.5:1 for normal text and 3:1 for large text (about 18pt, or 14pt bold). UI components and graphics also need 3:1.

What is the difference between AA and AAA?

AA is the standard most laws and audits ask for. AAA is stricter (7:1 for normal text) and is usually a goal rather than a requirement.

Does contrast matter for logos or disabled buttons?

WCAG exempts logos and inactive components. Still, if people need to read it, give it enough contrast.

Can two colors pass but still look bad to color blind users?

Yes, but contrast ratio is based on lightness, which helps a lot. Check your design with the Color Blindness Simulator too.