What is the WCAG contrast ratio?

The Web Content Accessibility Guidelines (WCAG) define a contrast ratio formula based on the relative luminance of two colors. Ratios range from 1:1 (no contrast, same color) to 21:1 (black on white). Higher ratios mean better readability for users with visual impairments.

What is the difference between AA and AAA?

WCAG 2.1 Level AA is the commonly required standard: 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA is a stricter enhancement: 7:1 for normal text and 4.5:1 for large text. Most accessibility audits target AA compliance.

What counts as 'large text'?

WCAG defines large text as at least 18pt (24px) regular weight, or at least 14pt (approximately 18.67px) bold. The preview in this tool shows both sizes so you can judge visually.

How does the color suggestion work?

If your colors fail AA, the tool incrementally darkens the darker color (or lightens the lighter one) until the contrast ratio reaches 4.5:1, then shows the adjusted hex value as a suggestion.

design Free No signup

Color Contrast Checker

Check WCAG 2.1 contrast ratios for foreground/background color pairs and get pass/fail results instantly.

Loading tool…

About this tool

Enter a foreground and background color using hex color pickers or text fields. The tool calculates the WCAG 2.1 contrast ratio and shows pass/fail badges for all four thresholds: AA Normal text (4.5:1), AA Large text (3:1), AAA Normal text (7:1), and AAA Large text (4.5:1). A live preview renders sample text in both normal and large sizes with your chosen colors. The relative luminance of each color is also displayed. If the current colors fail AA, the tool suggests adjusted colors (darkened or lightened) that meet the standard.

How to use

1 Pick a foreground color using the color picker or type a hex value.
2 Pick a background color the same way.
3 Read the contrast ratio and check which WCAG levels pass or fail.
4 View the live text preview and use the suggested colors if needed to achieve AA compliance.

About this tool

How to use

Frequently Asked Questions