Comprobar contraste de colores

Elige el color del texto y el del fondo para saber si tu diseño es legible y accesible. Te damos el ratio de contraste, si cumple los niveles AA y AAA de las pautas WCAG y, si no llega, el color de texto más parecido que sí cumple.

Texto y fondo

Acepta HEX, rgb(), hsl(), oklch() o nombres CSS. Si el texto es semitransparente, se mezcla con el fondo.

Texto grande de ejemplo

Este es un texto de tamaño normal. La accesibilidad web consiste en que cualquier persona, también con baja visión o daltonismo, pueda leer y usar tu página.

Botón

Ratio de contraste

Texto normal (4,5:1) AA
Texto normal (7:1) AAA
Texto grande (3:1) AA
Texto grande (4,5:1) AAA
Iconos y componentes (3:1) AA

¿Qué es el ratio de contraste?

El ratio de contraste compara la luminosidad relativa de dos colores y va de 1:1 (el mismo color) a 21:1 (negro sobre blanco). Lo definen las pautas de accesibilidad WCAG 2 del W3C y es la referencia que usan las leyes de accesibilidad (en España, el RD 1112/2018 y la norma EN 301 549) y herramientas como Lighthouse.

Niveles AA y AAA

AA es el nivel exigido habitualmente: 4,5:1 para el texto normal y 3:1 para el texto grande (a partir de 24 px, o 18,66 px en negrita). AAA es el nivel reforzado: 7:1 y 4,5:1 respectivamente. Los iconos, bordes de campos de formulario y otros componentes de la interfaz necesitan al menos 3:1 frente a los colores que los rodean.

Los logotipos y el texto puramente decorativo o de elementos desactivados están exentos.

Cómo mejorar el contraste

Casi siempre basta con oscurecer el texto (o aclararlo sobre fondos oscuros) sin cambiar de tono: por eso te proponemos el mismo color con otra luminosidad, calculada en el espacio OKLCH para que el cambio sea lo más pequeño posible. Evita el texto gris claro sobre blanco y el texto sobre imágenes sin una capa oscura intermedia.