Ajustar un color accesible

Conserva el color, arregla el contraste

Un color de marca suele verse genial como logo pero falla como texto: un rosa pastel o un dorado claro puede ser precioso sobre un fondo blanco y aun así resultar casi ilegible a tamaño de texto normal. En lugar de elegir un color completamente distinto a base de prueba y error, esta herramienta mueve la luminosidad de tu color hacia arriba o hacia abajo, justo lo necesario para superar el ratio de contraste que necesitas, manteniendo su tono lo más cerca posible del original.

Los tres objetivos

• 3:1 es el mínimo WCAG AA para texto grande (24px en adelante, o 18,66px en negrita) y para las partes visibles de los componentes de interfaz, como los bordes de los campos y los iconos.
• 4.5:1 es el mínimo AA para el texto normal del cuerpo, el nivel que la mayoría de auditorías de accesibilidad comprueban primero.
• 7:1 es el nivel AAA, un listón más estricto recomendado para contenido dirigido a personas con baja visión o donde la legibilidad importa más.

Cómo funciona el ajuste

La herramienta conserva el tono y la saturación de tu color y busca el valor de luminosidad que alcanza el contraste objetivo sobre el fondo que elijas, moviéndose hacia el negro si el fondo es claro y hacia el blanco si el fondo es oscuro. Si tu color ya cumple, no cambia nada. El resultado es un color real que puedes usar directamente, no solo un mensaje de aprobado o suspenso.

Qué hacer con el resultado

Usa el color ajustado para texto o un icono sobre ese fondo, y conserva el original en los sitios que no necesitan cumplir el contraste, como una forma decorativa grande o un logo. Si el color ajustado se ha alejado más de lo que te gusta, prueba con un objetivo de contraste más bajo si tu caso lo permite, por ejemplo texto grande a 3:1 en lugar de 4.5:1, o parte de un color con más margen de contraste.

Límites

Esto ajusta solo la luminosidad; no cambia el tono ni la saturación, así que un color de partida muy claro o muy saturado puede necesitar un cambio grande para cumplir. Para medir el contraste de dos colores que ya tienes, usa el comprobador de contraste. Todo se calcula en tu navegador.