What contrast ratio do WCAG AA and AAA require?

AA needs at least 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 for normal text and 4.5:1 for large text. Large text means at least 24px (18pt), or 18.66px (14pt) bold. Graphics and UI components such as button borders, icons and input outlines (success criterion 1.4.11) need at least 3:1. The exact value is used, so a ratio of 4.48:1 does not pass even though it rounds close to 4.5.

How is APCA different from the WCAG 2.x ratio?

WCAG 2.x divides relative luminances, which is simple but too lenient on dark backgrounds and too strict in the mid tones. APCA, the method in the WCAG 3 draft, models perceived lightness contrast (Lc) and treats dark-on-light (positive) and light-on-dark (negative) differently, with minimum Lc values that depend on font size and weight. APCA is not a standard yet — legal requirements still use WCAG 2.x — so treat it as extra design guidance.

How are the suggested colors found?

The color is converted to OKLCH and only its lightness is nudged up or down, keeping the hue and shrinking chroma when it would leave the sRGB gamut. The first passing color in each direction is found and the one with the smallest lightness change wins, so the suggestion looks as close as possible to your original and brand hues don’t drift.

How accurate is the color-blindness simulation?

It uses the widely cited model by Machado, Oliveira and Fernandes (2009) in linear RGB, at full severity for protanopia, deuteranopia and tritanopia, while achromatopsia is shown as luminance-only grayscale. It is a good way to catch information that relies on color alone, but color vision varies from person to person, so also convey important information with text, icons or shapes.

🔆

🔆Color Contrast Checker - WCAG 2.x AA/AAA and APCA Tester

Low contrast between text and background makes reading hard for people with low vision, older readers and anyone using a phone in sunlight. Enter a text color and a background color — HEX, rgb(), hsl(), oklch() and common names all work, and the text color may be translucent — to get the WCAG 2.x contrast ratio with a pass or fail for AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1), AAA large text (4.5:1) and graphics and UI components (1.4.11, 3:1). The APCA Lc value from the WCAG 3 draft (APCA-W3 0.1.9) is calculated alongside, with guidance for body text, headings, placeholders and other uses. When a pair fails, the tool changes only lightness in OKLCH, keeping the hue, and finds the smallest change that passes for either the text or the background — apply it with one click. The live preview shows body text, large text, a button and an icon at real sizes, and simulates how protanopia, deuteranopia, tritanopia and achromatopsia would see the pair using the Machado 2009 model. Palette matrix mode takes a whole set of brand colors and shows the contrast of every pairing at a glance.

Free · No sign-up · Runs in your browserLast updated: 2026-10-26

Loading tool...

How to use Color Contrast Checker

1Type or pick the text color and the background color
2Read the WCAG ratio, the pass/fail for each level and the APCA Lc value
3If it fails, pick a target and apply the nearest passing color; switch to the palette matrix to check many colors at once

FAQ

What contrast ratio do WCAG AA and AAA require?: AA needs at least 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 for normal text and 4.5:1 for large text. Large text means at least 24px (18pt), or 18.66px (14pt) bold. Graphics and UI components such as button borders, icons and input outlines (success criterion 1.4.11) need at least 3:1. The exact value is used, so a ratio of 4.48:1 does not pass even though it rounds close to 4.5.
How is APCA different from the WCAG 2.x ratio?: WCAG 2.x divides relative luminances, which is simple but too lenient on dark backgrounds and too strict in the mid tones. APCA, the method in the WCAG 3 draft, models perceived lightness contrast (Lc) and treats dark-on-light (positive) and light-on-dark (negative) differently, with minimum Lc values that depend on font size and weight. APCA is not a standard yet — legal requirements still use WCAG 2.x — so treat it as extra design guidance.
How are the suggested colors found?: The color is converted to OKLCH and only its lightness is nudged up or down, keeping the hue and shrinking chroma when it would leave the sRGB gamut. The first passing color in each direction is found and the one with the smallest lightness change wins, so the suggestion looks as close as possible to your original and brand hues don’t drift.
How accurate is the color-blindness simulation?: It uses the widely cited model by Machado, Oliveira and Fernandes (2009) in linear RGB, at full severity for protanopia, deuteranopia and tritanopia, while achromatopsia is shown as luminance-only grayscale. It is a good way to catch information that relies on color alone, but color vision varies from person to person, so also convey important information with text, icons or shapes.