Texto grande, 24 px
Texto normal de 15 px. El veloz murciélago hindú comía feliz cardillo y kiwi.
Este comprobador de contraste de colores evalúa un color de texto sobre un color de fondo con la fórmula de WCAG 2.1 y muestra la relación de contraste al momento, con aprobado o suspenso para AA y AAA en texto normal y grande. Si una combinación falla, propone el color aprobado más cercano con el mismo tono, para corregir el diseño sin cambiar su estilo.
Cómo se usa
- Toca la muestra grande para abrir el selector, usa el cuentagotas para tomar un color de la pantalla o escribe en cualquier campo.
- Pega cualquier color CSS (#hex, rgb(), hsl(), hwb(), oklch(), lab(), un nombre…) en un campo o en cualquier parte de la página.
- Toca el botón de copiar junto a un formato. Mueve Opacidad para añadir transparencia.
- En la paleta, toca una muestra para usarla; mantenla pulsada (o clic derecho) para copiar su HEX. En Contraste, elige texto y fondo y toca una sugerencia para corregir una pareja que no cumple.
- WCAG 2.1 exige 4,5:1 para texto normal (AA) y 7:1 para AAA. El texto grande (24 px, o 18,66 px en negrita) necesita 3:1 para AA y 4,5:1 para AAA. Los componentes de interfaz y gráficos, 3:1.
- Las sugerencias mantienen el tono y la saturación y solo cambian la luminosidad (en OKLCH) hasta el valor más cercano que cumple.
- Los colores semitransparentes se mezclan con el fondo antes de calcular la relación de contraste.
- Los valores CMYK son una conversión simple; para imprenta, usa el perfil de color de tu impresora.
- Tus colores recientes solo se guardan en este navegador.
Los umbrales de WCAG
WCAG 2.1 pide una relación de contraste de al menos 4,5:1 para texto normal (nivel AA) y 7:1 para el nivel AAA. El texto grande, es decir, de 24 px o de 18,66 px en negrita en adelante, necesita 3:1 para AA y 4,5:1 para AAA. Los componentes de interfaz y gráficos con significado, como bordes de campos e iconos, necesitan 3:1.
La relación va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco).
Cómo se calcula
Cada color se convierte a luminancia relativa: los canales sRGB se linealizan y se ponderan con 0,2126 para el rojo, 0,7152 para el verde y 0,0722 para el azul. La relación es (L1 + 0,05) / (L2 + 0,05), con el color más claro arriba. El gris #767676 sobre blanco da 4,54:1 y aprueba AA justo, mientras que #777777 da 4,48:1 y suspende: así de fina puede ser la línea. Los colores semitransparentes se mezclan antes con el fondo.
Corregir una combinación
Las sugerencias conservan tono y saturación y solo cambian la luminosidad en OKLCH, hasta el valor aprobado más cercano. Oscurecer el texto suele ser el cambio menos visible. El contraste es solo una parte de la accesibilidad: el grosor, el tamaño y el espaciado del texto también cuentan.
Preguntas frecuentes
¿Qué contraste necesito para WCAG AA?
4,5:1 para texto normal y 3:1 para texto grande (24 px, o 18,66 px en negrita). Botones, bordes de campos e iconos necesitan 3:1 respecto a lo que los rodea.
¿Qué diferencia hay entre AA y AAA?
AA es el nivel que exigen la mayoría de leyes y normas. AAA es más estricto: 7:1 para texto normal y 4,5:1 para texto grande, recomendado para lecturas largas o personas con baja visión.
¿Pasa el texto blanco sobre un botón azul?
Depende del azul. Blanco sobre #1E88E5 da 3,68:1, que solo aprueba para texto grande; para etiquetas de botón de tamaño normal hace falta un azul más oscuro.
¿Qué se considera texto grande?
El texto de al menos 24 px (18 pt) normal, o 18,66 px (14 pt) en negrita. Todo lo que sea más pequeño es texto normal.
¿Cómo elige la herramienta el color sugerido?
Mantiene tono y saturación y ajusta solo la luminosidad en OKLCH hasta alcanzar la relación objetivo, así el color sigue pareciendo de la misma familia.
¿Es lo mismo que el método APCA?
No. Este comprobador usa la relación de contraste de WCAG 2.1, la fórmula que citan las normas y leyes de accesibilidad actuales. APCA es un método distinto y más reciente.