user-interface - flat colors

Dado un color de fondo, ¿cómo obtener un color de primer plano que lo haga legible en ese color de fondo?

Question

Dado un color de fondo, ¿cómo obtener un color de primer plano que lo haga legible en ese color de fondo?

Me refiero a computar ese color de primer plano automáticamente en un programa.

O simplifique el problema, si el color frontal se elige entre blanco / negro, ¿cómo hacer la elección en un programa?

Answer 1

Aquí hay un código real (ruby) que realmente hará el levantamiento:

rgbval = "8A23C0".hex
r = rgbval >> 16
g = (rgbval & 65280) >> 8
b = rgbval & 255
brightness = r*0.299 + g*0.587 + b*0.114
return (brightness > 160) ? "#000" : "#fff"

Answer 2

Aquí hay uno que hice tanto en Java como en Javascript. Está basado libremente en this en javascript. Tomé la fórmula Luminance desde here . El punto dulce del umbral de mi ojo era aproximadamente 140.

Versión de Java:

public class Color {
private float CalculateLuminance(ArrayList<Integer> rgb){
return (float) (0.2126*rgb.get(0) + 0.7152*rgb.get(1) + 0.0722*rgb.get(2));
}
private ArrayList<Integer> HexToRBG(String colorStr) {
ArrayList<Integer> rbg = new ArrayList<Integer>();
rbg.add(Integer.valueOf( colorStr.substring( 1, 3 ), 16 ));
rbg.add(Integer.valueOf( colorStr.substring( 3, 5 ), 16 ));
rbg.add(Integer.valueOf( colorStr.substring( 5, 7 ), 16 ));
return rbg;
}
public String getInverseBW(String hex_color) {
float luminance = this.CalculateLuminance(this.HexToRBG(hex_color));
String inverse = (luminance < 140) ? "#fff" : "#000";
return inverse;
}
}

Versión de Javascript:

Esto es lo mismo en javascript para sus elementos de front-end. Conversión RGB tomada desde here :

hex_to_rgb: function(hex) {
var result = /^#?([a-f/d]{2})([a-f/d]{2})([a-f/d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
},
hex_inverse_bw: function(hex) {
rgb = this.hex_to_rgb(hex);
luminance = (0.2126*rgb["r"] + 0.7152*rgb["g"] + 0.0722*rgb["b"]);
return (luminance < 140) ? "#ffffff": "#000000";
}

Answer 3

La apuesta más segura es cumplir con las Pautas de Accesibilidad para el Contenido Web 2.0 del World Wide Web Consortium (W3C), que especifican una relación de contraste de brillo de 4.5: 1 para texto normal (12 puntos o menos) y 3.0: 1 para texto grande . La relación de contraste se define como:

[Y (b) + 0.05] / [Y (d) + 0.05]

Donde Y (b) es el brillo (luminancia) del color más brillante e Y (d) es el brillo del color más oscuro.

Calcule la luminancia Y convirtiendo primero cada uno de los valores RGB de color en valores de rgb normalizados ajustados gamma:

• r = (R / 255) ^ 2.2
• b = (B / 255) ^ 2.2
• g = (G / 255) ^ 2.2

Luego combínelas usando constantes sRGB (redondeadas a 4 lugares):

Y = 0.2126 * r + 0.7151 * g + 0.0721 * b

Esto da una Y blanca de 1 y una Y negra de 0, por lo que el contraste máximo posible es (1.05 / 0.05) = 21 (dentro del error de redondeo).

O deja que JuicyStudio haga los cálculos por ti.

Este cálculo supone un monitor de rendimiento estándar en una sala con poca luz (o una habitación que el usuario puede atenuar si tiene que hacerlo). Eso lo hace adecuado para el hogar o la oficina, pero no sé si es adecuado para aplicaciones móviles u otros dispositivos que se usan al aire libre.

Answer 4

Puede calcular el color inverso, pero corre el riesgo de que el contraste disminuya "en el medio" del espacio de color.

Answer 5

• Calcule la ligereza (vea HSL )
• Si la luminosidad es menor al 50%, use blanco. De lo contrario, use negro.

Usar colores como color de primer plano es difícil, porque debes tener en cuenta el contraste y el daltonismo.