WCAG Color Contrast Checker

WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA is stricter: 7:1 for normal text and 4.5:1 for large text. Most legal standards, including ADA, Section 508, and EN 301 549, reference AA, and it’s what this tool checks by default, so it’s the right target for most sites. AAA suits content aimed at users with significant vision loss, but the W3C doesn’t expect every page to meet it.

WCAG defines large text as 18pt (roughly 24px) or larger at regular weight, or 14pt (roughly 18.5px) or larger if it’s bold. Everything smaller, including most body copy, labels, and captions, still falls under the stricter normal-text ratio even if it looks reasonably big on screen. Font weight matters: 16px regular text always needs 4.5:1 for AA, and it doesn’t qualify as "large" until it’s bold and at least roughly 18.5px (14pt).

Not identically. WCAG explicitly exempts text in inactive/disabled UI components (like a greyed-out "Submit" button), text that’s part of a logo or brand name, and purely decorative text from the 1.4.3 contrast rule. Placeholder text doesn’t get a specific exemption, though. Since it’s functional content users rely on to fill out a form, accessibility audits generally expect it to hit the same 4.5:1 minimum as normal text. The light grey many browsers use by default for placeholders often falls short of that, which is one of the most common contrast failures we see.

Text is only part of it. WCAG 1.4.11 (Non-Text Contrast, Level AA) separately requires a 3:1 ratio for user interface components (button borders, input outlines, toggle and checkbox states) and for graphical objects like icons that convey meaning on their own, measured against their adjacent background. It’s a Level AA-only criterion with no AAA equivalent, so 3:1 is the target regardless of how strict a site’s text-contrast goals are.

Not automatically. The contrast formula only measures the luminance (brightness) difference between two colors. It has no concept of hue, so two colors can clear 4.5:1 and still be nearly indistinguishable to someone with red-green color blindness, which affects roughly 1 in 12 men. Contrast ratio solves "can this text be read at all"; a separate rule, WCAG 1.4.1 (Use of Color), requires that color is never the only way information is conveyed, so pair status colors, charts, and links with icons, text labels, or patterns as backup.

No. The same 4.5:1 (AA) / 7:1 (AAA) thresholds apply no matter which color is the background, since the formula just compares the lighter luminance to the darker one. Light-on-dark is scored the same way as dark-on-light. One dark-mode-specific pitfall worth knowing: pure white text (#FFFFFF) on a near-black background can pass the ratio easily but cause a "halation" glow that’s hard to read for people with astigmatism or light sensitivity. Many accessibility guides recommend an off-white (like #E4E4E7) on a dark grey (like #121212) instead of pure black/white. It still clears AA comfortably while reducing glare.

Not yet, and not for a while. APCA (Advanced Perceptual Contrast Algorithm) was explored as a next-generation, perceptually-based replacement for the current contrast math, but the W3C pulled it from the WCAG 3.0 working draft in 2023 for further evaluation, and WCAG 3.0 itself isn’t expected to reach final "Recommendation" status until around 2028–2030. The WCAG 2.1/2.2 contrast ratio formula (the one this tool uses) remains the current, legally-referenced standard, so there’s no need to design against APCA numbers yet.