Color de texto accesible

Este sugeridor de color de texto accesible toma un color hexadecimal de fondo, un hexadecimal de texto inicial y una razón de contraste WCAG objetivo, y devuelve un color de texto sugerido que cumple esa razón desplazando únicamente la luminosidad HSL. El matiz y la saturación permanecen fijos, de modo que un azul de marca sigue siendo azul mientras se oscurece o se aclara lo bastante para aprobar AA o AAA sobre la superficie dada. Si el color de partida ya cumple el objetivo, se devuelve sin cambios y se marca como no ajustado. Diseñadores, autores de tokens de diseño y trabajos de CI lo usan cuando un verificador de contraste no basta: necesitan un hexadecimal de recambio determinista, no solo un indicador de aprobado o reprobado. No hay llamadas de red, semillas aleatorias ni lecturas de reloj.

Cómo una búsqueda de luminosidad alcanza un objetivo de contraste WCAG

El contraste en la web no es una cuestión de gusto. Las Pautas de Accesibilidad para el Contenido Web definen una sola razón de contraste a partir de la luminancia relativa, para que el cuerpo del texto, los botones y las etiquetas sigan siendo legibles para personas con baja visión.

Este sugeridor parte de su hexadecimal de fondo y de un hexadecimal de texto inicial, y cambia solo la luminosidad de ese color de texto en HSL hasta que la razón WCAG 2.x frente al fondo alcanza el objetivo que usted pidió. El matiz y la saturación no se mueven, de modo que un azul marino de marca sigue siendo marino y un rojo de marca sigue siendo rojo; solo varía lo claro o lo oscuro de la tinta.

El motor lineariza cada canal sRGB con la curva oficial por tramos, construye la luminancia con los pesos 0.2126, 0.7152 y 0.0722, y calcula la luminancia más clara más 0.05 dividida por la más oscura más 0.05. Después recorre la luminosidad HSL en décimas de por ciento deterministas hacia el negro y hacia el blanco, convierte cada paso de nuevo a RGB de 8 bits y conserva el primer hexadecimal cuantizado en cada sentido que cumple el objetivo sin redondear.

Gana el candidato con el menor cambio de luminosidad; un empate prefiere oscurecer, que es el arreglo habitual para tipografía gris sobre una tarjeta clara. Si el color de partida ya cumple el objetivo, se devuelve sin cambios para no reescribir tokens sin motivo. No hay jitter aleatorio, consulta de red ni atajo que dependa de la fecha: las mismas tres entradas producen siempre el mismo hexadecimal sugerido y las mismas banderas de validación.

Dónde un sugeridor de color de texto accesible justifica su sitio

Los equipos de producto llegan a esta página cuando un gris de marca se ve elegante en una diapositiva de marketing pero falla como cuerpo de texto sobre una tarjeta blanca, cuando un tema de modo oscuro se genera a partir de tokens claros, o cuando las partes legales piden un hexadecimal de recambio en lugar de una opinión de captura.

Los diseñadores pegan una superficie y una tinta inicial desde Figma o un archivo de tokens y llevan el hexadecimal sugerido de vuelta a la paleta, en vez de empujar a ojo un control de luminosidad. Los especialistas de QA y accesibilidad adjuntan la razón original, la razón sugerida y el hexadecimal sugerido a los tickets para que los desarrolladores corrijan el par exacto.

Los equipos de contenido y marketing comprueban que los colores de campaña sigan teniendo un compañero de texto legal al colocarlos sobre fondos claros u oscuros del sitio. Si solo necesita medir un par que ya eligió, use una página de verificador de contraste; esta página posee la intención de sugerir un color de texto que apruebe.