What contrast ratio do I need to pass WCAG?

For WCAG 2.x Level AA, normal text needs at least 4.5:1 and large text needs 3:1. Level AAA asks for 7:1 for normal text and 4.5:1 for large text. Icons, input borders, focus rings and other user interface parts need 3:1 against the colors next to them.

What counts as large text?

WCAG treats text as large when it is at least 18 point (24 CSS pixels) at regular weight, or at least 14 point (about 18.66 CSS pixels) when bold. Large text only needs 3:1 for AA because bigger letters are easier to read.

How is the contrast ratio calculated?

Each color is turned into its relative luminance - how bright it looks, from 0 for black to 1 for white. The ratio is (lighter + 0.05) / (darker + 0.05), so it runs from 1:1 for two identical colors up to 21:1 for black on white. The tool never rounds a failing ratio up to a passing one: 4.499 shows as 4.49:1, not 4.50:1.

What is APCA and should I use it?

APCA (Accessible Perceptual Contrast Algorithm) is the contrast method being explored for the future WCAG 3. It gives an Lc score from 0 to about 106 and takes into account that light text on dark backgrounds looks different from dark text on light. It is shown here for reference only - WCAG 2.2 contrast ratio is still the rule that laws and audits check.

Can I check a transparent or semi-transparent color?

Yes. Type rgba(), hsla() or an 8-digit hex, or lower the opacity slider. A see-through text color is blended over the background before the ratio is measured, which is exactly how the browser draws it. If the background is see-through too, it is first blended over the page color you choose under See-through colors.

Does the tool show how colors look with color blindness?

Yes. Open Color blindness preview to see the pair as people with protanopia, deuteranopia, tritanopia or achromatopsia see it, with the contrast ratio for each. A pair that relies on red versus green to stand apart is easy to spot this way.

Is anything uploaded or stored?

No. Every calculation runs in your browser and nothing is sent to a server. Your recent color pairs are kept only in this browser so you can come back to them, and you can clear them at any time.

Color Contrast Checker | WCAG Accessibility Testing

Large heading text

Large 24px

Body text at 16px. Good contrast lets everyone read this comfortably, in bright sunlight and on a dim phone screen.

Normal 16px

The quick brown fox jumps over the lazy dog.

Yours 16px

UI parts

Tags show pass or fail for your goal.

Contrast ratio 21:1

Pass Passes AA for normal text

Normal text

AA 4.5:1

AAA 7:1

Large text

AA 3:1

AAA 4.5:1

UI parts

AA 3:1

APCA WCAG 3 draft, reference only Lc 106 Fine for body text at any size

Fix it AA 4.5:1

Same hue, only lighter or darker (OKLCH), so your brand color stays recognisable.

color: #000000;

Send this pair to the Gradient Generator, explore the text color on the Color Wheel or fine-tune it in the CSS Color Editor.

Quick pairs

Recent pairs

Text color rgb(0, 0, 0)

Opacity 100%

Background color rgb(255, 255, 255)

Opacity 100%

Type HEX, rgb(), hsl() or a color name - 8-digit hex and rgba() work too.

21:1 - passes AAA#000000 on #ffffff

How to check color contrast

Enter the text color. Type a hex, rgb(), hsl() or color name, use the swatch, or pick a color from your screen with the eyedropper.

Enter the background color. Set the background the same way. Use the swap button to check the reversed pair.

Read the result. See the exact contrast ratio and whether it passes AA and AAA for normal text, large text and UI components.

Fix and copy. If it fails, apply one of the suggested colors, then copy the CSS, a report or a link to share.

Checking colors inside a logo or a screenshot? Pull their exact codes with the Image Color Picker and paste them in.

WCAG contrast requirements

What	Level AA	Level AAA
Normal text (under 24px, or under 18.66px bold)	4.5:1	7:1
Large text (24px+, or 18.66px+ bold)	3:1	4.5:1
UI parts and graphics (icons, borders, focus rings, chart lines)	3:1	-
Logos, disabled controls, pure decoration	No requirement	No requirement

These rules come from WCAG 2.2 success criteria 1.4.3, 1.4.6 and 1.4.11. Most accessibility laws and policies, such as the European Accessibility Act and the US ADA Title II rule, point to Level AA (WCAG 2.1 or newer).

Tips for accessible colors

Keep your hue, move the lightness. A darker shade of your brand color usually passes and still looks on-brand. That is exactly what Fix it does.

Mind the middle. Mid-tones like #3399cc fail on both white and black for normal text. Use them for large headings, icons or backgrounds instead.

Check both themes. A pair that passes in light mode can fail in dark mode. Swap the colors and test again.

Don't rely on color alone. Add an icon or underline to links and errors. The color blindness preview shows why.

Text on images needs a backing. Pick the lightest and darkest spots of the photo with the Image Color Picker and test both.

Making content accessible goes beyond color. Offer an audio version with Text to Speech, or turn text inside images into real text with Image to Text.

WCAG 2 ratio vs APCA

The WCAG 2 ratio compares how bright two colors are. It treats dark-on-light and light-on-dark the same, which is why some white-on-orange buttons pass while looking hard to read.

APCA, the method drafted for WCAG 3, scores the pair as Lc from 0 to about 106 and accounts for polarity and font size. Body text wants Lc 75 or more, headlines about 60.

Use the WCAG 2 result for compliance today, and the APCA score as a second opinion when a passing pair still looks weak.

Frequently Asked Questions

For Level AA, normal text needs at least 4.5:1 and large text needs 3:1. Level AAA asks for 7:1 and 4.5:1.

Icons, input borders, focus rings and other interface parts need 3:1 against the colors next to them.

Text is large when it is at least 18pt (24px) at regular weight, or at least 14pt (about 18.66px) when bold.

Type your own size under Preview text and the tool tells you which rule applies to it.

Each color is turned into its relative luminance - how bright it looks, from 0 for black to 1 for white. The ratio is (lighter + 0.05) / (darker + 0.05), from 1:1 up to 21:1 for black on white.

A failing ratio is never rounded up to a passing one: 4.499 shows as 4.49:1, not 4.50:1.

Look at the Fix it card. It finds the closest text color and the closest background color that pass your goal, keeping the same hue and only changing how light or dark it is.

Click Use to apply one, and Undo if you change your mind. Need a whole palette built around it? Try the Color Wheel.

APCA is the contrast method being explored for the future WCAG 3. It gives an Lc score from 0 to about 106 and knows that light-on-dark looks different from dark-on-light.

It is shown here for reference only. The WCAG 2.2 ratio is still what laws and audits check.

Yes. Type rgba(), hsla() or an 8-digit hex, or lower the opacity slider.

See-through text is blended over the background before the ratio is measured - exactly how the browser draws it. A see-through background is first blended over the page color you pick under See-through colors.

Yes. Open Color blindness preview to see the pair as people with protanopia, deuteranopia, tritanopia or achromatopsia see it, with the ratio for each.

Testing a whole screenshot? Grab its colors with the Image Color Picker first.

No. Every calculation runs in your browser and nothing is sent to a server.

Your recent pairs are kept only in this browser, and you can clear them at any time - see our Privacy Policy.