Haz que cada palabra sea más legible

Funciones y usos

El comprobador de contraste compara los colores de texto y fondo con los umbrales WCAG AA y AAA para texto normal y grande. Los selectores y las entradas HEX, RGB o HSL permiten ajustes rápidos.

Prueba tu propio texto, elige fuente, tamaño y grosor, y considera las transparencias sobre el color de página. Intercambia los colores, busca un color de texto que cumpla AA, copia el CSS o descarga un informe PNG con la vista previa y los resultados.

Formatos, opciones y límites

Los campos de color admiten HEX de 3, 4, 6 u 8 dígitos, con o sin #, y notación RGB/RGBA y HSL/HSLA. Los valores alfa controlan la transparencia. Usa el selector visual para cambios rápidos o escribe un valor para un ajuste preciso.

• Previsualiza hasta 300 caracteres de entrada con una fuente de la biblioteca, de 12 a 96 px y peso normal o negrita. El texto y los fondos transparentes se evalúan sobre el color de página opaco elegido. La sugerencia AA busca al menos 4,5:1 para texto normal.
• Copia el CSS con el color del texto, el fondo y la relación de contraste. El informe PNG descargable tiene 1200 px de ancho y ajusta la altura al texto; incluye la vista previa, resultados AA/AAA, ajustes de fuente y valores de color. Úsalo para documentar una combinación de colores.

Trabaja sin cuenta: el texto y las fotos se procesan en tu navegador. Guarda un proyecto en este dispositivo o descarga una copia de seguridad para abrirlo más tarde.

Conviene saber

WCAG AA exige 4,5:1 para texto normal y 3:1 para texto grande. AAA exige 7:1 y 4,5:1 respectivamente. El texto grande empieza en 24 px, o unos 18,67 px en negrita. Se usa el contraste sin redondear.

Los colores transparentes se componen sobre el color de página. Un contraste aprobado verifica los colores elegidos, no la accesibilidad de todo el diseño. Leer la guía WCAG sobre contraste