Monu Tools

Color Contrast Checker

Check the contrast ratio between two colours against WCAG AA and AAA accessibility levels.

Cómo usar Contrast Checker

  1. 01

    Pick a text colour and a background colour.

  2. 02

    Read the contrast ratio and the WCAG pass or fail badges.

  3. 03

    Adjust the colours until they pass the level you need.

Preguntas frecuentes

What contrast ratio do I need?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). AAA requires 7:1 and 4.5:1 respectively.

What counts as large text?

Text that is at least 24px (18pt), or 18.66px (14pt) when bold. Large text is allowed a lower contrast ratio.

How is the ratio calculated?

From the relative luminance of each colour using the official WCAG formula, giving a value from 1:1 (no contrast) to 21:1 (black on white).

Acerca de esta herramienta

A WCAG color contrast checker that shows the exact contrast ratio between a text and background colour and whether it meets AA and AAA accessibility levels.

Pick colours with the swatch or by hex code and see a live preview. Good contrast makes your site readable and accessible.

Herramientas relacionadas

Usamos cookies esenciales para que el sitio funcione. Con tu consentimiento también cargamos Google AdSense, que establece cookies publicitarias. Consulta nuestra política de privacidad.