Generador de paleta accesible WCAG

Genere una paleta de colores aleatorios y filtre los que alcanzan realmente una relación de contraste WCAG AA o AAA con texto blanco o negro. El cálculo de luminancia y de la relación se realiza directamente en su navegador.

6 color(es)
Aa
Texto blanco: 2.42:1
Texto negro: 8.68:1
✅ AAA
Aa
Texto blanco: 1.45:1
Texto negro: 14.47:1
✅ AAA
Aa
Texto blanco: 1.95:1
Texto negro: 10.75:1
✅ AAA
Aa
Texto blanco: 3.83:1
Texto negro: 5.48:1
✅ AA
Aa
Texto blanco: 2.72:1
Texto negro: 7.71:1
✅ AAA
Aa
Texto blanco: 7.49:1
Texto negro: 2.8:1
✅ AAA

Cómo funciona

Elegir una paleta de marca solo por su estética suele dar colores que no superan la prueba de accesibilidad al combinarse con texto. Esta herramienta genera colores aleatorios, calcula su luminancia relativa según la fórmula WCAG y compara la relación de contraste obtenida con texto blanco y con texto negro para conservar (si lo desea) solo los que alcanzan el nivel AA o AAA.

¿Cómo se calcula la relación de contraste?

El cálculo sigue la fórmula oficial WCAG: cada color se convierte en luminancia relativa (una medida de la claridad percibida que tiene en cuenta la sensibilidad del ojo humano a cada canal rojo, verde y azul) y la relación se obtiene comparando la luminancia del color más claro con la del más oscuro. Una relación de 21:1 corresponde al contraste máximo posible (negro puro sobre blanco puro).

¿Por qué algunos colores muestran «texto blanco» y otros «texto negro»?

La herramienta calcula la relación en ambos sentidos y elige automáticamente el color de texto (blanco o negro) que ofrece el mejor contraste sobre el fondo generado: es la combinación que debería usar si adopta ese color como fondo en su interfaz.

Todo el cálculo de luminancia y de contraste se ejecuta en JavaScript en su navegador: ningún color generado se envía a un servidor.