Generador de Paleta de Colores Accesible

Usa tu color como fondo y lo combina con seis colores de texto: blanco, negro, dos grises muy claros y dos grises casi negros. Para cada combinación calcula el ratio de contraste y marca si cumple los umbrales de WCAG 2.1.

Son niveles de WCAG: AA normal exige 4.5:1 para texto de tamaño normal, AA grande exige 3:1 para texto grande (desde unos 24 px, o 19 px en negrita) y AAA normal exige 7:1. AA es el objetivo habitual para webs; AAA es más estricto.

Significa que tu color tiene una luminosidad media que no contrasta bien ni con blanco ni con negro. Prueba con una variante más clara u oscura de ese color; hasta un pequeño cambio de luminosidad suele bastar para llegar a 4.5:1.

La herramienta lo evalúa como fondo. Pero el ratio de contraste es simétrico: si un color da 5:1 como fondo con texto blanco, también da 5:1 como texto sobre un fondo blanco.

El generador prueba tu color contra seis colores de texto a la vez, y es útil para decidir qué texto poner sobre un color de marca. El verificador compara dos colores concretos que tú eliges, para comprobar una combinación ya decidida.

Los botones, bordes e iconos necesitan al menos 3:1 según WCAG 2.1. Puedes usar la columna de AA grande, que usa ese mismo umbral, como guía rápida, aunque la norma lo regula aparte.