Dado un fondo blanco y texto negro o gris, ¿hay alguna fórmula para encontrar un color de enlace con buen contraste?

Las pautas de las WCAG establecen los siguientes requisitos para el contraste de texto/enlace/fondo:

  • Un contraste de 4,5:1 entre el color del texto sin enlace y el fondo.
  • Un contraste de 4,5:1 entre el color del texto del enlace y el fondo.
  • Un contraste de 3:1 entre el color del texto del enlace y el color del texto que no lo rodea.

Suponiendo que se cumple el requisito 1 de lo anterior, dado un fondo blanco y un color de texto (sin enlace) que varía de negro a gris oscuro, ¿existe una heurística, fórmula o algoritmo para encontrar un color de enlace que satisfaga los otros dos requisitos? Sería especialmente útil si el algoritmo o la fórmula se especificaran en términos de tono-luminosidad-saturación. Gracias.

Respuestas (1)

Este sitio probablemente te ayudará. Es una herramienta de verificación de contraste que acepta códigos de color hexadecimales para el fondo y el color del texto de lo que está trabajando y genera la relación de contraste. También le dirá si aprueba o no tanto el texto pequeño como el grande.

Comenzaría eligiendo los colores que te gustan y luego probándolos en el verificador para verificar que cumplan con los requisitos.

Si desea un buen punto de partida para seleccionar colores, eche un vistazo a una rueda de colores.

Rueda de color

Los colores en los lados opuestos de la rueda tienen mucho contraste, mientras que los colores adyacentes entre sí tienen poco contraste.

También recomiendo probar la herramienta de paleta de colores de Adobe. Lo uso para casi todos los proyectos en los que trabajo, generalmente solo para ver cómo me gustan todos mis colores principales juntos. Puede dejar que Adobe elija colores por usted con configuraciones como "tríada" o "complementario" o puede crear temas personalizados.

Gracias, Ashlee. Conozco las herramientas, pero busco específicamente una especificación matemática formal (o algo parecido a eso, en forma de heurística), porque necesito poder generar un color con un contraste adecuado, dada la BG y color del texto. Examinaré más a fondo la noción de los colores en los lados opuestos de la rueda, ya que esto es algo que se puede utilizar con bastante facilidad a partir de los valores HSL.
Dado un fondo blanco y texto negro o gris, ¿hay alguna fórmula para encontrar un color de enlace con buen contraste?
RespuestasAquíPolítica de privacidad1y, 0v