Free colour contrast checker

WCAG 2.2 Level AA requires at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text. Treat those numbers as hard thresholds: a calculated 4.499:1 does not pass 4.5:1, even if a display rounds it up.

Large text is at least 18pt (24 CSS px) at regular weight or 14pt (about 18.67 CSS px) when bold. Anything smaller uses the normal-text threshold. W3C also notes that thin or unusual fonts can render with less apparent contrast, so passing the mathematical threshold is not a reason to skip a visual review.

They are treated differently. Text in an inactive user-interface component and text that is part of a logo or brand name are exceptions under Success Criterion 1.4.3. Placeholder text is not exempt: W3C explicitly includes it, along with text shown on hover or keyboard focus. Test placeholder text against the input background using the normal- or large-text threshold that applies to its rendered size.

WCAG 2.2 has a separate Level AA criterion for non-text contrast. Visual information needed to identify an active control or its state, plus parts of graphics needed to understand the content, must reach 3:1 against adjacent colors. This tool can calculate that ratio, but its result cards label the text thresholds; you still need to decide which boundaries, icons, states, or graphic parts are necessary.

No. A contrast ratio compares relative luminance; it does not prove that people can distinguish the hues or understand information encoded only by color. Success Criterion 1.4.1 requires another visual way to convey meaning when color carries information. Add a text label, shape, pattern, underline, or other visible cue where the distinction matters.

No. WCAG 2.2 uses the same ratio and thresholds for light-on-dark and dark-on-light pairs. Test the colors that actually render in each theme, including text, placeholders, focus indicators, selected states, icons, and any semi-transparent overlays.

WCAG 3.0 is still a W3C Working Draft, and publication as a draft does not make it a W3C Recommendation. This checker deliberately uses the relative-luminance formula and thresholds in the current WCAG 2.2 Recommendation. If your project evaluates another contrast model, report it separately rather than presenting the two scores as interchangeable.

This checker compares two solid colours. For a layered background, identify the colours actually visible behind the text and check the lowest-contrast areas. A single sampled pair cannot establish that the whole image or gradient passes.