una texto tamaño rojas para pagina mejor letras leer fuente fondo entre combinaciones color básicas design colors accessibility readability

design - texto - ¿Cómo encontrar buen color de fuente si se conoce el color de fondo?



mejor color de fondo para leer (18)

¿Ha considerado dejar que el usuario de su aplicación seleccione su propio esquema de colores? Sin lugar a dudas, no podrá complacer a todos sus usuarios con su selección, pero puede permitirles encontrar lo que les agrada.

Parece que hay tantas aplicaciones web de rueda de colores, selector de color y matcher de color, donde se le da un color y encontrarán un par de otros colores que crearán un diseño armónico cuando se usen en combinación. Sin embargo, la mayoría de ellos solo se enfoca en los colores de fondo y cualquier texto impreso en cada color de fondo (si el texto está impreso en la vista previa) es negro o blanco.

Mi problema es diferente Sé el color de fondo que quiero usar para un área de texto. Lo que necesito ayuda es elegir un par de colores (cuanto más, mejor) que puedo usar como colores de fuente en este fondo. Lo más importante es que el color se asegurará de que la fuente sea legible (el contraste no es demasiado bajo, también puede no ser demasiado alto para evitar que los ojos estén estresados) y por supuesto que la combinación de primer plano y fondo se ve bien.

¿Alguien está enterado de tal aplicación? Preferiría una aplicación web para cualquier cosa que tenga que descargar. Gracias.

¿Has probado yaflacolor ? No es exactamente lo que estás buscando (no te permite configurar tanto el texto como el color de fondo), pero muestra colores complementarios y versiones oscuras y claras de los colores juntos. A menos que a alguien se le ocurra exactamente lo que necesita, al menos podría ayudarlo a elegir sus colores.

De acuerdo, esta no es la mejor solución posible, pero es un buen punto para comenzar. Escribí una pequeña aplicación de Java que calcula la relación de contraste de dos colores y solo procesa colores con una proporción de 5: 1 o mejor. Esta relación y la fórmula que uso ha sido lanzada por el W3C y probablemente reemplazará la recomendación actual (que Considero muy limitado). Crea un archivo en el directorio de trabajo actual llamado "elegido-letra-colores.html", con el color de fondo de su elección y una línea de texto en cada color que pasó esta prueba W3C. Espera un único argumento, siendo el color de fondo.

Por ejemplo, puedes llamarlo así

java FontColorChooser 33FFB4

luego solo abra el archivo HTML generado en un navegador de su elección y elija un color de la lista. Todos los colores dados pasaron la prueba W3C para este color de fondo. Puedes cambiar el corte reemplazando 5 con el número que elijas (los números más bajos permiten contrastes más débiles, por ej. 3 solo asegurarán que el contraste sea 3: 1, 10 se asegurarán de que sea al menos 10: 1) y también podrás corte para evitar contrastes demasiado altos (asegurándose de que sea más pequeño que un cierto número), por ejemplo, agregando

|| cDiff > 18.0

a la cláusula if se asegurará de que el contraste no sea demasiado extremo, ya que los contrastes demasiado extremos pueden estresar los ojos. Aquí está el código y diviértete jugando un poco con él :-)

import java.io.*; /* For text being readable, it must have a good contrast difference. Why? * Your eye has receptors for brightness and receptors for each of the colors * red, green and blue. However, it has much more receptors for brightness * than for color. If you only change the color, but both colors have the * same contrast, your eye must distinguish fore- and background by the * color only and this stresses the brain a lot over the time, because it * can only use the very small amount of signals it gets from the color * receptors, since the breightness receptors won''t note a difference. * Actually contrast is so much more important than color that you don''t * have to change the color at all. E.g. light red on dark red reads nicely * even though both are the same color, red. */ public class FontColorChooser { int bred; int bgreen; int bblue; public FontColorChooser(String hexColor) throws NumberFormatException { int i; i = Integer.parseInt(hexColor, 16); bred = (i >> 16); bgreen = (i >> 8) & 0xFF; bblue = i & 0xFF; } public static void main(String[] args) { FontColorChooser fcc; if (args.length == 0) { System.out.println("Missing argument!"); System.out.println( "The first argument must be the background" + "color in hex notation." ); System.out.println( "E.g. /"FFFFFF/" for white or /"000000/" for black." ); return; } try { fcc = new FontColorChooser(args[0]); } catch (Exception e) { System.out.println( args[0] + " is no valid hex color!" ); return; } try { fcc.start(); } catch (IOException e) { System.out.println("Failed to write output file!"); } } public void start() throws IOException { int r; int b; int g; OutputStreamWriter out; out = new OutputStreamWriter( new FileOutputStream("chosen-font-colors.html"), "UTF-8" ); // simple, not W3C comform (most browsers won''t care), HTML header out.write("<html><head><title>/n"); out.write("</title><style type=/"text/css/">/n"); out.write("body { background-color:#"); out.write(rgb2hex(bred, bgreen, bblue)); out.write("; }/n</style></head>/n<body>/n"); // try 4096 colors for (r = 0; r <= 15; r++) { for (g = 0; g <= 15; g++) { for (b = 0; b <= 15; b++) { int red; int blue; int green; double cDiff; // brightness increasse like this: 00, 11,22, ..., ff red = (r << 4) | r; blue = (b << 4) | b; green = (g << 4) | g; cDiff = contrastDiff( red, green, blue, bred, bgreen, bblue ); if (cDiff < 5.0) continue; writeDiv(red, green, blue, out); } } } // finalize HTML document out.write("</body></html>"); out.close(); } private void writeDiv(int r, int g, int b, OutputStreamWriter out) throws IOException { String hex; hex = rgb2hex(r, g, b); out.write("<div style=/"color:#" + hex + "/">"); out.write("This is a sample text for color " + hex + "</div>/n"); } private double contrastDiff( int r1, int g1, int b1, int r2, int g2, int b2 ) { double l1; double l2; l1 = ( 0.2126 * Math.pow((double)r1/255.0, 2.2) + 0.7152 * Math.pow((double)g1/255.0, 2.2) + 0.0722 * Math.pow((double)b1/255.0, 2.2) + 0.05 ); l2 = ( 0.2126 * Math.pow((double)r2/255.0, 2.2) + 0.7152 * Math.pow((double)g2/255.0, 2.2) + 0.0722 * Math.pow((double)b2/255.0, 2.2) + 0.05 ); return (l1 > l2) ? (l1 / l2) : (l2 / l1); } private String rgb2hex(int r, int g, int b) { String rs = Integer.toHexString(r); String gs = Integer.toHexString(g); String bs = Integer.toHexString(b); if (rs.length() == 1) rs = "0" + rs; if (gs.length() == 1) gs = "0" + gs; if (bs.length() == 1) bs = "0" + bs; return (rs + gs + bs); } }

Echa un vistazo a kuler , es un gran recurso para encontrar colores que kuler bien, solo busca el código de color HTML (por ejemplo, FF9900). No limitará el resultado a solo conjuntos que incluyan colores de alto contraste con el que seleccionó, pero los conjuntos típicamente tendrán una combinación de colores de contraste bajo y alto.

En una aplicación reciente que hice, utilicé los colores invertidos. Con los valores r, gyb a mano, simplemente calcule (en este ejemplo, el rango de color varía de 0 a 255):

r = 127-(r-127) and so on.

Esta es una pregunta interesante, pero no creo que esto sea realmente posible. Si dos colores "se ajustan" como colores de fondo o de primer plano depende de la tecnología de visualización y las características fisiológicas de la visión humana, pero lo más importante es de los gustos personales formados por la experiencia. Una rápida ejecución a través de MySpace muestra bastante claramente que no todos los seres humanos perciben los colores de la misma manera. No creo que este sea un problema que se pueda resolver algorítmicamente, aunque puede haber una gran base de datos en algún lugar de colores que coincidan.

He implementado algo similar por una razón diferente: era un código para decirle al usuario final si los colores de primer plano y de fondo que seleccionaron daría como resultado un texto ilegible. Para hacer esto, en lugar de examinar los valores RGB, convertí el valor del color a HSL / HSV y luego determiné mediante experimentación cuál era mi punto de corte para la legibilidad al comparar los valores fg y bg. Esto es algo que puede querer / necesitar considerar.

Otro sitio de generación de esquemas, pero incluye opciones para ayudar a manejar el daltonismo en función del porcentaje de la población afectada.

Generador de esquema de color bien

Personalmente, no creo que podamos encontrar un algoritmo para calcular el color de texto más coincidente especificando el color de fondo.

Creo que actualmente el artista debe tener una lista de pares de colores que tenga buena calidad de lectura, podemos agregarlos a una tabla y establecer uno de estos pares aleatoriamente como nuestro tema de lectura ...

esto es muy razonable, y no obtendremos feos pares de colores ...

Puede ser extraño responder a mi propia pregunta, pero aquí hay otro selector de color realmente genial que nunca había visto antes. Tampoco resuelve mi problema: - ((((sin embargo, creo que es mucho más genial para estos ya lo sé).

http://www.colorjack.com/

A la derecha, debajo de Herramientas, selecciona "Color Sphere", una esfera muy poderosa y personalizable (mira lo que puedes hacer con las ventanas emergentes en la parte superior), "Color Galaxy", todavía no estoy seguro de cómo funciona esto, pero parece genial y "Color Studio" también es agradable. Además, puede exportar a todo tipo de formatos (por ejemplo, Illustrator o Photoshop, etc.)

¿Qué tal esto, elijo mi color de fondo allí, lo dejo crear un color complementario (desde la primera ventana emergente) - esto debería tener el mayor contraste y por lo tanto ser mejor legible, ahora seleccione el color complementario como color principal y seleccione neutral? Hmmm ... tampoco demasiado grande, pero estamos mejorando ;-)

Si necesita un algoritmo, intente esto: convierta el color del espacio RGB al espacio HSV (Hue, Saturation, Value). Si su marco de interfaz de usuario no puede hacerlo, consulte este artículo: http://en.wikipedia.org/wiki/HSL_and_HSV#Conversion_from_RGB_to_HSL_or_HSV

Hue está en [0,360). Para encontrar el color "opuesto" (piense en rueda de color), solo agregue 180 grados:

h = (h + 180) % 360;

Para la saturación y el valor, inviértalos:

l = 1.0 - l; v = 1.0 - v;

Convierte de nuevo a RGB. Esto siempre debería darle un alto contraste, aunque la mayoría de las combinaciones se verán feas.

Si quieres evitar la parte "fea", construye una tabla con varias combinaciones "buenas", encuentra la que tenga la menor diferencia

def q(x): return x*x def diff(col1, col2): return math.sqrt(q(col1.r-col2.r) + q(col1.g-col2.g) + q(col1.b-col2.b))

y usa eso.

Similar a la sugerencia de @Aaron Digulla, salvo que sugeriría una herramienta de diseño de gráficos, seleccione el color base, en su caso el color de fondo, luego ajuste el Tono, la Saturación y el Valor. Usando esto puedes crear muestras de color muy fácilmente. Paint.Net es gratuito y lo uso todo el tiempo para esto y también el pago por herramientas también lo hará.

Te sugiero que pruebes algunos colores que te parezcan bien (usando una de las herramientas sugeridas por otros en las respuestas, si quieres), pero no olvides que existe daltonismo , así que prueba tu página en esta dirección:

http://colorfilter.wickline.org/