Color Contrast Checker

WCAG 2.x sets two levels. Level AA, the usual legal and procurement target, requires at least 4.5:1 for normal text and 3:1 for large text. Level AAA, the enhanced level, requires 7:1 for normal text and 4.5:1 for large text. The ratio runs from 1:1 (identical colors) to 21:1 (black on white).

WCAG defines large text as at least 18 point (24px) at regular weight, or at least 14 point (about 18.66px) when bold. Anything smaller is normal text and needs the stricter ratio. Thin or decorative typefaces can look smaller than their size suggests, so treat borderline cases as normal text.

Yes. Success criterion 1.4.11 Non-text Contrast, added in WCAG 2.1, requires 3:1 against adjacent colors for the visual boundaries of interactive components, such as input borders and focus indicators, and for graphics needed to understand content, such as meaningful icons and chart lines. Disabled controls, purely decorative graphics and logos are exempt.

WCAG thresholds are exact minimums, so a ratio is never rounded up to reach them. This checker truncates the displayed value rather than rounding it: #777777 on white is 4.4776:1, so it shows 4.47 and fails AA, while #767676 is 4.54:1 and passes. Tools that round up can report a pass that an accessibility audit will not.

The suggestion keeps your text color's hue and saturation and adjusts only its lightness, searching both darker and lighter directions and returning the smallest change that meets the threshold. That keeps the result recognisably your brand color. If no lightness of that hue can reach the target against your background, the checker says so instead of guessing.

APCA is a newer contrast method that accounts for font weight, size and polarity, and it has been proposed for the future WCAG 3. WCAG 3 is still a draft, however, and accessibility laws and procurement standards such as Section 508 in the US and EN 301 549 in Europe reference WCAG 2.x. The 2.x ratio calculated here is the one audits check against today.

Not directly — this checker treats both colors as fully opaque, which is what the WCAG formula assumes. For a semi-transparent text or overlay color, first blend it with the background it actually sits on, then check the resulting solid color.