Color Contrast Checker: WCAG Contrast Ratios Explained

WCAG 2.x requires a contrast ratio of at least 4.5:1 between normal text and its background, and 3:1 for large text, to meet Level AA. The stricter Level AAA raises those minimums to 7:1 and 4.5:1. Contrast ratios range from 1:1 (no contrast, the same color) to 21:1 (black on white).

Enter any two colors into our free color contrast checker to get the exact ratio and a pass or fail result for each WCAG level. This guide explains the requirements, how the ratio is calculated, and how to fix colors that fail.

WCAG contrast requirements

The Web Content Accessibility Guidelines (WCAG) set contrast rules in three success criteria. Level AA is the target most organizations and accessibility regulations use, including Section 508 in the United States and EN 301 549 in Europe.

Success criterion	Level	Applies to	Minimum ratio
1.4.3 Contrast (Minimum)	AA	Normal text	4.5:1
1.4.3 Contrast (Minimum)	AA	Large text	3:1
1.4.6 Contrast (Enhanced)	AAA	Normal text	7:1
1.4.6 Contrast (Enhanced)	AAA	Large text	4.5:1
1.4.11 Non-text Contrast	AA	UI components and meaningful graphics	3:1

What counts as large text

WCAG defines large text as at least 18 point regular or 14 point bold. On the web, that is roughly 24px regular or 18.66px bold. Everything smaller, including most body copy, captions and form labels, must meet the normal-text ratio.

What is exempt

Contrast rules do not apply to logos and brand names, to purely decorative text, to text in disabled controls, or to incidental text inside a photo. Placeholder text, hover states and error messages are not exempt.

How the contrast ratio is calculated

WCAG compares the relative luminance of the two colors, a measure of perceived brightness from 0 (black) to 1 (white). For each color:

1. Divide each red, green and blue value by 255.
2. Linearize each channel: if the value is 0.03928 or less, divide it by 12.92; otherwise compute ((value + 0.055) ÷ 1.055)^2.4.
3. Combine them: L = 0.2126 × R + 0.7152 × G + 0.0722 × B. Green has the largest weight because the eye is most sensitive to it.

Then divide the lighter luminance by the darker, with 0.05 added to each:

contrast ratio = (L1 + 0.05) / (L2 + 0.05)

Worked example: gray text on white

For text color #767676, each channel is 118, and 118 ÷ 255 = 0.4627. Linearized, that becomes ((0.4627 + 0.055) ÷ 1.055)^2.4 = 0.1812. Because all three channels are equal, the luminance is also 0.1812. White has a luminance of 1, so:

(1 + 0.05) / (0.1812 + 0.05) = 1.05 / 0.2312 = 4.54:1

That passes AA for normal text. One step lighter, #777777 scores 4.48:1 and fails. WCAG thresholds are not rounded, so 4.48:1 does not count as 4.5:1.

Contrast ratios for common color pairs

Text	Background	Ratio	AA normal	AA large	AAA normal
#000000	#FFFFFF	21:1	Pass	Pass	Pass
#595959	#FFFFFF	7.00:1	Pass	Pass	Pass
#767676	#FFFFFF	4.54:1	Pass	Pass	Fail
#FFFFFF	#2563EB	5.17:1	Pass	Pass	Fail
#FF0000	#FFFFFF	4.00:1	Fail	Pass	Fail
#FFFFFF	#3B82F6	3.68:1	Fail	Pass	Fail
#9CA3AF	#FFFFFF	2.54:1	Fail	Fail	Fail

How to use the Color Contrast Checker

1. Open the color contrast checker.
2. Set the Text color: pick it with the swatch or type a hex code, such as #111827. Three-digit shorthand like #fff also works.
3. Set the Background color the same way.
4. Read the Contrast ratio, for example 17.74:1, and the Pass or Fail badges for normal text (AA 4.5:1, AAA 7:1) and large text (AA 3:1, AAA 4.5:1).
5. Check the Preview block, which shows a heading and body text in your chosen colors.

The checker accepts hex codes only. If your colors are in RGB or HSL, convert them first with the hex, RGB and HSL converter. It also compares solid colors, so for semi-transparent text, test the final color that appears on screen.

How to fix colors that fail

• Adjust lightness, not hue. Keep your brand hue and darken the text, or the background behind white text, a few steps at a time. In HSL, lower the lightness value until the ratio passes. Our guide to hex, RGB and HSL shows how.
• Watch light gray text. Captions, placeholders and footer links are the most frequent failures. On white, #767676 is the lightest gray that passes AA for normal text.
• Test text over images at its worst point. Check the text against the lightest area of the image behind it, or add a solid or semi-opaque overlay.
• Check every state and theme. Hover, focus, visited, error and dark-mode colors all need to pass, not just the default.
• Give controls 3:1. Input borders, icons and focus indicators fall under criterion 1.4.11. If you draw focus rings with the CSS box shadow generator, test the ring color against the background, as noted in our guide to CSS box shadows.
• Do not rely on color alone. Criterion 1.4.1 requires another cue, such as an underline on links or an icon on error messages, because some users cannot tell the colors apart.

Frequently asked questions

What is a good color contrast ratio?

For body text, aim for at least 4.5:1, the WCAG Level AA minimum. A ratio of 7:1 or more meets the stricter Level AAA and is easier to read for people with low vision.

What contrast ratio does WCAG require for large text?

Large text needs at least 3:1 for Level AA and 4.5:1 for Level AAA. Large text means at least 18 point (about 24px) regular or 14 point (about 18.66px) bold.

Does WCAG round contrast ratios?

No. The ratio must meet the threshold exactly, so 4.48:1 fails the 4.5:1 requirement even though it rounds to 4.5.

What contrast do buttons, icons and form fields need?

WCAG 2.1 criterion 1.4.11 requires a 3:1 contrast ratio for the visual parts of UI components and for graphics needed to understand content, such as input borders, icons and focus indicators.

Do logos need to meet contrast requirements?

No. Text that is part of a logo or brand name is exempt from WCAG contrast requirements, as is purely decorative text and text in disabled controls.

What is the highest possible contrast ratio?

The maximum is 21:1, which is black (#000000) on white (#FFFFFF). The minimum is 1:1, when both colors are the same.