Soy consciente de que la selección manual basada en el juicio humano siempre triunfará sobre un algoritmo heurístico para cosas como esta... desafortunadamente esa no es realmente una opción. :)
Entonces, dado un cierto color de fondo, ¿cómo podría un algoritmo determinar si el texto blanco es una mala elección para superponer (la alternativa sería el negro)? Por ejemplo, el texto blanco en #F44444 es perfectamente legible, ¡pero el texto blanco en #FBBBBB es una lucha!
Me imagino que tendrá algo que ver con representar el color en un modelo como HSL. ¿Y luego verificar si la saturación y/o la luminosidad coinciden con ciertas condiciones?
Gran parte de su trabajo ya está hecho para usted, si no todo.
El Consorcio World Wide Web (w3) publica Pautas de accesibilidad al contenido web. Sus recomendaciones definen tres niveles diferentes de conformidad de contraste de color según el tamaño y la relevancia del texto. Se proporciona un analizador de contraste de color para este propósito.
Se recomienda:
Contraste (Mínimo): La presentación visual del texto tiene una relación de contraste de al menos 4,5:1, excepto Texto Grande (más de 18 puntos) de al menos 3:1
relación de contraste (de w3.org/TR/WCAG20/#contrast-ratiodef)
(L1 + 0,05) / (L2 + 0,05), donde
luminancia relativa (de w3.org/TR/WCAG20/#relativeluminancedef)
el brillo relativo de cualquier punto en un espacio de color, normalizado a 0 para el negro más oscuro y 1 para el blanco más claro
Nota: Para el espacio de color sRGB, la luminancia relativa de un color se define como
L = 0,2126 * R + 0,7152 * G + 0,0722 * B
donde R, G y B se definen como:
si RsRGB <= 0.03928 entonces R = RsRGB/12.92 si no R = ((RsRGB+0.055)/1.055) ^ 2.4
si GsRGB <= 0.03928 entonces G = GsRGB/12.92 si no G = ((GsRGB+0.055)/1.055) ^ 2.4
si BsRGB <= 0.03928 entonces B = BsRGB/12.92 si no B = ((BsRGB+0.055)/1.055) ^ 2.4
y RsRGB, GsRGB y BsRGB se definen como:
RsRGB = R8bit/255
GsRGB = G8bit/255
BsRGB = B8bit/255
El carácter "^" es el operador de exponenciación. (Fórmula tomada de [sRGB] y [IEC-4WD]).
Las recomendaciones de w3 definen tres niveles de conformidad con sus directrices. Prioridad 1, 2 y 3. Sus algoritmos de contraste de color 2.0 utilizan dos de estos: Prioridad 2 (AA) y Prioridad 3 (AAA). Si necesita o no alcanzar una conformidad AAA depende de su público objetivo. Lea más sobre esto en el sitio de w3. Para texto grande (más de 18 puntos) la relación de contraste para AA es 3:1 y para AAA 5:1. Para texto pequeño es 5:1 para AA y 7:1 para AAA.
Se puede encontrar más información sobre accesibilidad y conformidad:
Pautas de accesibilidad al contenido web 2.0
Más información sobre Contraste (Mínimo); específicamente, las pautas de comprensión SC 1.4.3 Presentación visual de texto e imágenes de texto... se pueden encontrar:
Comprender SC 1.4.3
Mi enfoque sería convertir primero el color de fondo a su equivalente en escala de grises. Si el valor de brillo (en una escala de 0 a 100 %) es "demasiado cercano" al blanco, el color del texto debería cambiar a negro. "Demasiado cerca" es algo subjetivo, pero comenzaría a probar con un brillo del 65 % para activar el cambio a texto negro. El texto blanco debe ser legible en un color de fondo con un valor de brillo convertido más oscuro que ese. ¡Buena suerte!
Stan
club
Stan
Stan