Color Contrast Checker

This free color contrast checker measures text against its background under WCAG 2.2, the standard behind the ADA and the European Accessibility Act, and never rounds 4.49 up to a pass. When a pair fails, it finds the closest color that passes while keeping your hue. It also reads transparency, any CSS color and APCA.

Text color

Background color

Hex, rgb(), hsl(), oklch(), CSS names, or a pasted line like color: #333;

Large text, 24px

Bold large text, 18.66px

Body text at 16px. If this line feels tiring to read at arm's length, your readers feel it too.

Small print at 12px, like a caption or a footnote.

ButtonInput border

Make it pass 4.5:1 by changing the text color.

#767676

4.54:1 as the text color

WCAG contrast ratio

4.47:1

Large text and UI only

AANormal text4.5:1Fail
AALarge text3:1Pass
AAUI components and icons3:1Pass
AAANormal text7:1Fail
AAALarge text4.5:1Fail

Large text is 24px, or 18.66px bold. The ratio is cut, never rounded up: 4.49:1 fails AA.

APCALc 71.1dark text on light

Minimum for other content text

A second opinion, not the legal standard.

How do you fix a color pair that fails contrast?

Measure it, then move one of the two colors only as far as it needs to go. This checker uses the WCAG formula and answers the question that usually comes next: if it fails, which color should you use instead?

The closest color that passes. Pick a target (AA, AAA, or large text and UI) and which color you are willing to change. The checker keeps your hue and moves only the lightness, then shows the nearest shade that clears the bar. One click applies it.
No rounding, ever. A ratio of 4.49:1 is shown as 4.49:1 and marked as a fail, because WCAG allows no rounding. Tools that round to one decimal turn it into a pass.
Transparency done the browser's way. Semi-transparent text is blended over the background before measuring, and you see the blended hex.
Any CSS color. Hex, rgb(), hsl(), oklch(), color names like navy, or a whole pasted line such as color: #333;.
All five checks at once: AA and AAA for normal and large text, plus the 3:1 rule for buttons, borders and icons.
APCA as a second opinion, with its polarity, and a preview under three types of color blindness.
A link to the exact pair, so a designer and a developer look at the same thing.

How do you check color contrast?

Type or paste the text color and the background color. On Chrome and Edge, the pipette button picks a color straight from your screen.
Read the ratio and the five checks. The preview shows body text, large text, a button, an input border and an icon in your colors.
If something fails, Make it pass already shows the nearest color that clears AA. Press Use this color, or open Target to aim for AAA, large text, or to change the background instead.
Press Copy CSS for the two declarations, or Copy link to share the pair; the link keeps the colors in the part of the address that is never sent to a server. No colors at hand? Try another example cycles through common real-world pairs, including one that fails by a hair.

Which contrast ratio does the law ask for?

Every major accessibility law points to WCAG level AA, and the text ratios have not changed since WCAG 2.0.

Rule	Where	Standard	Normal text	Large text and UI
ADA Title II	US state and local government	WCAG 2.1 AA	4.5:1	3:1
Section 508	US federal agencies	WCAG 2.0 AA	4.5:1	3:1 for large text
European Accessibility Act	EU, since 28 June 2025	EN 301 549, WCAG 2.1 AA	4.5:1	3:1
WCAG 2.2	the current W3C version	AA	4.5:1	3:1

The ADA Title II deadlines were pushed back in April 2026, to April 2027 for larger governments and April 2028 for smaller ones. The standard itself did not change.

Why does 4.49:1 fail?

Because the threshold is a minimum, not a target to round towards. WCAG compares the exact result of the formula with 4.5, so 4.4999 is below it. The classic case is #777777 on white: it looks fine and measures 4.47:1. The nearest grey that passes is #767676, at 4.54:1, one step darker.

Is APCA the new standard?

No, not yet. APCA scores contrast as Lc, from about -108 to 106, and it treats dark-on-light differently from light-on-dark, which the WCAG 2 formula does not. It was proposed for WCAG 3, but it was removed from the working draft in July 2023, and the draft still says the contrast method is to be decided. We show it because it often explains why a pair that passes WCAG 2 still feels hard to read, especially light text on dark backgrounds. For audits and legal requirements, WCAG 2 is the number that counts.

Do popular button colors pass with white text?

Often they do not. We measured the default colors of two of the most used CSS frameworks with white text on top, exactly as a button would show it:

Background	With white text	AA for normal text (4.5:1)
Bootstrap 4 primary `#007bff`	3.97:1	Fails
Bootstrap 5 primary `#0d6efd`	4.5:1	Passes, with no margin
Tailwind v3 `blue-500` `#3b82f6`	3.67:1	Fails; `blue-600` passes at 5.16:1
Tailwind v3 `green-600` `#16a34a`	3.29:1	Fails; `green-700` passes at 5.01:1
Tailwind v3 `red-500` `#ef4444`	3.76:1	Fails; `red-600` passes at 4.82:1
Tailwind v3 `orange-500` `#f97316`	2.8:1	Fails even the 3:1 rule; `orange-700` passes at 5.17:1

Most of them still clear 3:1, so they work for large text and for the outline of a button, but not for the label on it at normal size. The usual fix is one step darker in the same palette, which is what Make it pass finds for any color.

Can it check a whole website, or text on an image?

No, and here is why each one is out of reach:

It does not scan a page. It checks the colors you enter. Reading every color on a live site needs a server, because browsers block one page from reading another.
It does not handle text over images or gradients. The contrast changes across the image, so there is no single ratio to report.
It is not an accessibility audit. Contrast is one criterion among dozens. Passing here says nothing about keyboard access, screen readers or zoom.
It does not decide whether your text is large. The rule defines large text by size and weight, and only you know the font size in your design.

For a page you are building, the color picker in Chrome and Edge DevTools also shows the contrast ratio of the text you inspect. Use it to find the problem, and this checker to find the color that fixes it.

Frequently asked questions

What contrast ratio do I need for WCAG AA?

Normal text needs at least 4.5 to 1 against its background. Large text needs 3 to 1, and so do buttons, input borders and icons that carry meaning. The stricter AAA level asks for 7 to 1 on normal text and 4.5 to 1 on large text. WCAG 2.0, 2.1 and 2.2 all use these same numbers.

Is a contrast ratio of 4.49 to 1 close enough to pass?

No. WCAG compares the exact calculated value with the threshold and allows no rounding, so 4.49 to 1 fails the 4.5 to 1 minimum. Some checkers round to one decimal and show a pass. This one cuts the ratio at two decimals instead, so a failing pair never looks like a passing one.

What counts as large text for contrast?

WCAG defines large text as at least 18 point regular or 14 point bold. On the web that is roughly 24 pixels regular or 18.66 pixels bold. Large text only needs 3 to 1 for AA. Anything smaller, including most body copy, captions and labels, needs the full 4.5 to 1.

How does the checker suggest a color that passes?

It keeps the hue and chroma of your color in the OKLCH space and moves only the lightness, in both directions, until the pair reaches the target you choose. Among every shade that passes, it picks the one closest to your original. If no shade can pass, it says so and names the best possible ratio.

Does APCA replace the WCAG contrast ratio?

Not today. APCA is a newer perceptual method that scores contrast as Lc and accounts for polarity. It was removed from the WCAG 3 working draft in July 2023, and WCAG 3 has no settled contrast method yet. The laws still point to WCAG 2, so treat APCA here as a second opinion.

Which contrast rules do the ADA and the European Accessibility Act use?

Both point to WCAG AA. The ADA Title II rule for US state and local governments requires WCAG 2.1 AA, with deadlines moved to April 2027 and April 2028. The European Accessibility Act has applied since 28 June 2025 through EN 301 549, which follows WCAG 2.1 AA. The text ratios are identical.

How is contrast measured for a transparent color?

Semi-transparent text is blended over its background first, exactly as a browser paints it, and the blended color is what gets measured. The checker shows you that blended hex. A transparent background is assumed to sit on a white page, which is the default for most websites and email clients.

Do logos, disabled buttons and placeholder text need to pass?

Logos and brand names are exempt, and so are disabled controls and purely decorative text. Placeholder text is not exempt: WCAG treats it as text on the page, so it needs 4.5 to 1 like any other. Light grey placeholders on white backgrounds are one of the most common failures auditors find.

Do buttons, icons and input borders need contrast too?

Yes, since WCAG 2.1. Success criterion 1.4.11 asks for 3 to 1 between a component and what surrounds it, for input borders, focus rings, checkboxes and icons that carry meaning. The preview here draws a button, an input border and an icon in your colors, so you can see all three at once.

Does passing this checker make my website accessible?

No. Color contrast is one of the 55 success criteria a page must meet for WCAG 2.2 AA. Passing it means your text and controls can be read, not that the page works with a keyboard, a screen reader or zoom. This checker tests solid color pairs you enter; it does not scan a whole page.

Rate Color Contrast Checker & help shape it

This tool is free and still growing. Tell us what works, what you would change, and what is missing. Your feedback is what decides what we build next.

Built and tested by the ÆON Toolhub team. Last updated: October 19, 2026. How we test our tools