Estoy buscando una manera, idealmente con jQuery, para determinar el color de texto correcto, en función del brillo del color de fondo.
Por ejemplo, fondo blanco, color de texto negro. Creo que esto podría hacerse de manera cruda agregando el valor HEX y estimando, pero ¿alguien sabe una mejor manera o jQuery para hacer esto?
Puede intentar invertir el valor hexadecimal del color. Así que #FFFFFF se convierte en #000000 y #AAAAAA se convierte en #555555 . Por supuesto, este método fracasa cuando tienes #888888 que, cuando se invierte, te da #777777 (no contrastan tanto).
Esta publicación de blog describe otra forma (solo usan blanco o negro para el color de primer plano, según el color de fondo). Lo he traducido a Javascript:
function idealTextColor(bgColor) { var nThreshold = 105; var components = getRGBComponents(bgColor); var bgDelta = (components.R * 0.299) + (components.G * 0.587) + (components.B * 0.114); return ((255 - bgDelta) < nThreshold) ? "#000000" : "#ffffff"; } function getRGBComponents(color) { var r = color.substring(1, 3); var g = color.substring(3, 5); var b = color.substring(5, 7); return { R: parseInt(r, 16), G: parseInt(g, 16), B: parseInt(b, 16) }; }