Copiado
WCAG colour contrast checker

Comprueba si tus colores son legibles y accesibles.

Prueba colores de primer plano y fondo, previsualiza el resultadoado, comprueba WCAG AA y AAA y copia valores HEX o variables CSS limpias.

La legibilidad del color importa.

This sample updates as you change the foreground and background colours.

Contraste ratio
21.00
Aprobado
Aprobado
AA normal text · 4.5:1
Aprobado
AA large text · 3:1
Aprobado
AAA normal text · 7:1
Aprobado
AAA large text · 4.5:1

Copiar the colour pairing

Usar this in CSS, a design system, or a quick accessibility note.

:root {
  --contrast-text: #111827;
  --contrast-background: #FFFFFF;
}

Accessible ejemplos to try

Start from a real paleta or a safe high-contrast pairing, then adjust it for your project.

What the score means

The higher the ratio, the easier the combination is to read for more people and more display conditions.

AA normal text

Usar at least 4.5:1 for body copy, navigation, links, buttons and most interface text.

AA large text

Large text can pass at 3:1, but higher contrast usually still feels clearer and more professional.

AAA text

7:1 is the stronger target for long reading, critical information, accessibility-first products and dashboards.