Determinar a cor da fonte com base na cor do plano de fundo


248

Dado um sistema (um site por exemplo) que permite ao usuário personalizar a cor do plano de fundo para alguma seção, mas não a cor da fonte (para manter o número de opções no mínimo), existe uma maneira de determinar programaticamente se uma "luz" ou " cor da fonte escura "é necessária?

Tenho certeza de que existe algum algoritmo, mas não sei o suficiente sobre cores, luminosidade etc. para descobrir por conta própria.

Respostas:


447

Eu encontrei um problema semelhante. Eu tive que encontrar um bom método para selecionar cores de fonte contrastantes para exibir rótulos de texto em escalas de cores / mapas de calor. Tinha que ser um método universal e a cor gerada tinha que ser "bonita", o que significa que a simples geração de cores complementares não era uma boa solução - às vezes gerava cores estranhas e muito intensas que eram difíceis de assistir e ler.

Após longas horas de teste e tentando resolver esse problema, descobri que a melhor solução é selecionar fonte branca para cores "escuras" e fonte preta para cores "brilhantes".

Aqui está um exemplo de função que estou usando em C #:

Color ContrastColor(Color color)
{
    int d = 0;

    // Counting the perceptive luminance - human eye favors green color... 
    double luminance = ( 0.299 * color.R + 0.587 * color.G + 0.114 * color.B)/255;

    if (luminance > 0.5)
       d = 0; // bright colors - black font
    else
       d = 255; // dark colors - white font

    return  Color.FromArgb(d, d, d);
}

Isso foi testado em várias escalas de cores (arco-íris, escala de cinza, calor, gelo e muitas outras) e é o único método "universal" que eu descobri.

Editar
Alterada a fórmula da contagem apara "luminância perceptiva" - realmente parece melhor! Já o implementei no meu software, parece ótimo.

Edit 2 O @WebSeed forneceu um excelente exemplo prático desse algoritmo: http://codepen.io/WebSeed/full/pvgqEq/


14
É provavelmente não é importante, mas você pode querer uma melhor função para calcular o brilho stackoverflow.com/questions/596216/...
Josh Lee

1
Parece que vai ser perfeito.
31411 Joseph Daigle

Exatamente o que eu precisava hoje.
Chris W

De onde vêm suas ponderações perceptivas de luminância?
Mat


23

Apenas no caso de alguém desejar uma versão mais curta, talvez mais fácil de entender, da resposta do GaceK :

public Color ContrastColor(Color iColor)
{
   // Calculate the perceptive luminance (aka luma) - human eye favors green color... 
   double luma = ((0.299 * iColor.R) + (0.587 * iColor.G) + (0.114 * iColor.B)) / 255;

   // Return black for bright colors, white for dark colors
   return luma > 0.5 ? Color.Black : Color.White;
}

Nota: eu removi a inversão do luma valor (para tornar as cores brilhantes têm um valor mais alto, o que parece mais natural para mim e é também o método de cálculo 'default'.

Usei as mesmas constantes do GaceK daqui, pois elas funcionaram muito bem para mim.

(Você também pode implementar isso como um método de extensão usando a seguinte assinatura:

public static Color ContrastColor(this Color iColor)

Você pode chamá-lo via foregroundColor = background.ContrastColor().)


11

Obrigado @Gacek . Aqui está uma versão para Android:

@ColorInt
public static int getContrastColor(@ColorInt int color) {
    // Counting the perceptive luminance - human eye favors green color...
    double a = 1 - (0.299 * Color.red(color) + 0.587 * Color.green(color) + 0.114 * Color.blue(color)) / 255;

    int d;
    if (a < 0.5) {
        d = 0; // bright colors - black font
    } else {
        d = 255; // dark colors - white font
    }

    return Color.rgb(d, d, d);
}

E uma versão melhorada (mais curta):

@ColorInt
public static int getContrastColor(@ColorInt int color) {
    // Counting the perceptive luminance - human eye favors green color...
    double a = 1 - (0.299 * Color.red(color) + 0.587 * Color.green(color) + 0.114 * Color.blue(color)) / 255;
    return a < 0.5 ? Color.BLACK : Color.WHITE;
}

Seria ainda mais curto e fácil de ler, se você aplicasse as alterações de @Marcus Mangelsdorf (livre-se da 1 - ...peça e renomeie-a aparaluminance
Ridcully

Usando o primeiro, você também pode capturar alfa.
Brill Pappin

9

Minha rápida implementação da resposta de Gacek:

func contrastColor(color: UIColor) -> UIColor {
    var d = CGFloat(0)

    var r = CGFloat(0)
    var g = CGFloat(0)
    var b = CGFloat(0)
    var a = CGFloat(0)

    color.getRed(&r, green: &g, blue: &b, alpha: &a)

    // Counting the perceptive luminance - human eye favors green color...
    let luminance = 1 - ((0.299 * r) + (0.587 * g) + (0.114 * b))

    if luminance < 0.5 {
        d = CGFloat(0) // bright colors - black font
    } else {
        d = CGFloat(1) // dark colors - white font
    }

    return UIColor( red: d, green: d, blue: d, alpha: a)
}

Em rápida, como r / g / b são CGFloats, você não precisa de "/ 255" para calcular a luminância: deixe a luminância = 1 - ((0,299 * r) + (0,587 * g) + (0,114 * b))
SuperDuperTango

8

Javascript [ES2015]

const hexToLuma = (colour) => {
    const hex   = colour.replace(/#/, '');
    const r     = parseInt(hex.substr(0, 2), 16);
    const g     = parseInt(hex.substr(2, 2), 16);
    const b     = parseInt(hex.substr(4, 2), 16);

    return [
        0.299 * r,
        0.587 * g,
        0.114 * b
    ].reduce((a, b) => a + b) / 255;
};

6

Obrigado por este post.

Para quem estiver interessado, aqui está um exemplo dessa função no Delphi:

function GetContrastColor(ABGColor: TColor): TColor;
var
  ADouble: Double;
  R, G, B: Byte;
begin
  if ABGColor <= 0 then
  begin
    Result := clWhite;
    Exit; // *** EXIT RIGHT HERE ***
  end;

  if ABGColor = clWhite then
  begin
    Result := clBlack;
    Exit; // *** EXIT RIGHT HERE ***
  end;

  // Get RGB from Color
  R := GetRValue(ABGColor);
  G := GetGValue(ABGColor);
  B := GetBValue(ABGColor);

  // Counting the perceptive luminance - human eye favors green color...
  ADouble := 1 - (0.299 * R + 0.587 * G + 0.114 * B) / 255;

  if (ADouble < 0.5) then
    Result := clBlack  // bright colors - black font
  else
    Result := clWhite;  // dark colors - white font
end;

Há um pequeno erro no quarto da última linha. Resultado: = clBlack não deve ter um ponto e vírgula depois dele;
Andy k

5

Esta é uma resposta tão útil. Obrigado por isso!

Eu gostaria de compartilhar uma versão do SCSS:

@function is-color-light( $color ) {

  // Get the components of the specified color
  $red: red( $color );
  $green: green( $color );
  $blue: blue( $color );

  // Compute the perceptive luminance, keeping
  // in mind that the human eye favors green.
  $l: 1 - ( 0.299 * $red + 0.587 * $green + 0.114 * $blue ) / 255;
  @return ( $l < 0.5 );

}

Agora, descubra como usar o algoritmo para criar automaticamente cores flutuantes para links de menu. Cabeçalhos claros ficam mais escuros e vice-versa.


3

Implementação Flutter

Color contrastColor(Color color) {
  if (color == Colors.transparent || color.alpha < 50) {
    return Colors.black;
  }
  double luminance = (0.299 * color.red + 0.587 * color.green + 0.114 * color.blue) / 255;
  return luminance > 0.5 ? Colors.black : Colors.white;
}

Tudo o que fiz foi o prefixo 'estático'. Obrigado!
Pete Alvin

2

Python feio, se você não quiser escrever :)

'''
Input a string without hash sign of RGB hex digits to compute
complementary contrasting color such as for fonts
'''
def contrasting_text_color(hex_str):
    (r, g, b) = (hex_str[:2], hex_str[2:4], hex_str[4:])
    return '000' if 1 - (int(r, 16) * 0.299 + int(g, 16) * 0.587 + int(b, 16) * 0.114) / 255 < 0.5 else 'fff'

2

Eu tive o mesmo problema, mas tive que desenvolvê-lo em PHP . Usei a solução da @ Garek e também usei esta resposta: Converter hex hex em valores RGB em PHP para converter o código de cores HEX em RGB.

Então, eu estou compartilhando.

Eu queria usar essa função com a cor Background Background HEX, mas nem sempre começando com '#'.

//So it can be used like this way:
$color = calculateColor('#804040');
echo $color;

//or even this way:
$color = calculateColor('D79C44');
echo '<br/>'.$color;

function calculateColor($bgColor){
    //ensure that the color code will not have # in the beginning
    $bgColor = str_replace('#','',$bgColor);
    //now just add it
    $hex = '#'.$bgColor;
    list($r, $g, $b) = sscanf($hex, "#%02x%02x%02x");
    $color = 1 - ( 0.299 * $r + 0.587 * $g + 0.114 * $b)/255;

    if ($color < 0.5)
        $color = '#000000'; // bright colors - black font
    else
        $color = '#ffffff'; // dark colors - white font

    return $color;
}

1

Como extensão Kotlin / Android:

fun Int.getContrastColor(): Int {
    // Counting the perceptive luminance - human eye favors green color...
    val a = 1 - (0.299 * Color.red(this) + 0.587 * Color.green(this) + 0.114 * Color.blue(this)) / 255
    return if (a < 0.5) Color.BLACK else Color.WHITE
}

1

Uma implementação para o objetivo-c

+ (UIColor*) getContrastColor:(UIColor*) color {
    CGFloat red, green, blue, alpha;
    [color getRed:&red green:&green blue:&blue alpha:&alpha];
    double a = ( 0.299 * red + 0.587 * green + 0.114 * blue);
    return (a > 0.5) ? [[UIColor alloc]initWithRed:0 green:0 blue:0 alpha:1] : [[UIColor alloc]initWithRed:255 green:255 blue:255 alpha:1];
}

2
Você deve adicionar alguma descrição aqui para que outros usuários saibam o que está acontecendo em seu código
Michael

1

iOS Swift 3.0 (extensão UIColor):

func isLight() -> Bool
{
    if let components = self.cgColor.components, let firstComponentValue = components[0], let secondComponentValue = components[1], let thirdComponentValue = components[2] {
        let firstComponent = (firstComponentValue * 299)
        let secondComponent = (secondComponentValue * 587)
        let thirdComponent = (thirdComponentValue * 114)
        let brightness = (firstComponent + secondComponent + thirdComponent) / 1000

        if brightness < 0.5
        {
            return false
        }else{
            return true
        }
    }  

    print("Unable to grab components and determine brightness")
    return nil
}

1
A função é fazer como esperado, mas tenha cuidado com linting e força castings
RichAppz

1
Grande, confira o meu exemplo para Swift 4 abaixo, você pode ver a redução no código
RichAppz

1

Exemplo do Swift 4:

extension UIColor {

    var isLight: Bool {
        let components = cgColor.components

        let firstComponent = ((components?[0]) ?? 0) * 299
        let secondComponent = ((components?[1]) ?? 0) * 587
        let thirdComponent = ((components?[2]) ?? 0) * 114
        let brightness = (firstComponent + secondComponent + thirdComponent) / 1000

        return !(brightness < 0.6)
    }

}

UPDATE - Verificou-se que 0.6era uma cama de teste melhor para a consulta


Na verdade, é bem provável que isso falhe em várias situações, pois assume um espaço de cores RGB. O número de elementos CGColor.componentsvaria de acordo com o espaço de cores: por exemplo, UIColor.whitequando convertido em um CGColor, possui apenas dois: [1.0, 1.0]representando uma cor de escala de cinza (totalmente branca) com um alfa completo. Um melhor meio de extrair os elementos RGB de um UIColor éUIColor.getRed(_ red:, green:, blue:, alpha:)
Scott Matthewman

1

Observe que existe um algoritmo para isso na biblioteca de fechamento do Google que faz referência a uma recomendação do w3c: http://www.w3.org/TR/AERT#color-contrast . No entanto, nesta API, você fornece uma lista de cores sugeridas como ponto de partida.

/**
 * Find the "best" (highest-contrast) of the suggested colors for the prime
 * color. Uses W3C formula for judging readability and visual accessibility:
 * http://www.w3.org/TR/AERT#color-contrast
 * @param {goog.color.Rgb} prime Color represented as a rgb array.
 * @param {Array<goog.color.Rgb>} suggestions Array of colors,
 *     each representing a rgb array.
 * @return {!goog.color.Rgb} Highest-contrast color represented by an array.
 */
goog.color.highContrast = function(prime, suggestions) {
  var suggestionsWithDiff = [];
  for (var i = 0; i < suggestions.length; i++) {
    suggestionsWithDiff.push({
      color: suggestions[i],
      diff: goog.color.yiqBrightnessDiff_(suggestions[i], prime) +
          goog.color.colorDiff_(suggestions[i], prime)
    });
  }
  suggestionsWithDiff.sort(function(a, b) { return b.diff - a.diff; });
  return suggestionsWithDiff[0].color;
};


/**
 * Calculate brightness of a color according to YIQ formula (brightness is Y).
 * More info on YIQ here: http://en.wikipedia.org/wiki/YIQ. Helper method for
 * goog.color.highContrast()
 * @param {goog.color.Rgb} rgb Color represented by a rgb array.
 * @return {number} brightness (Y).
 * @private
 */
goog.color.yiqBrightness_ = function(rgb) {
  return Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000);
};


/**
 * Calculate difference in brightness of two colors. Helper method for
 * goog.color.highContrast()
 * @param {goog.color.Rgb} rgb1 Color represented by a rgb array.
 * @param {goog.color.Rgb} rgb2 Color represented by a rgb array.
 * @return {number} Brightness difference.
 * @private
 */
goog.color.yiqBrightnessDiff_ = function(rgb1, rgb2) {
  return Math.abs(
      goog.color.yiqBrightness_(rgb1) - goog.color.yiqBrightness_(rgb2));
};


/**
 * Calculate color difference between two colors. Helper method for
 * goog.color.highContrast()
 * @param {goog.color.Rgb} rgb1 Color represented by a rgb array.
 * @param {goog.color.Rgb} rgb2 Color represented by a rgb array.
 * @return {number} Color difference.
 * @private
 */
goog.color.colorDiff_ = function(rgb1, rgb2) {
  return Math.abs(rgb1[0] - rgb2[0]) + Math.abs(rgb1[1] - rgb2[1]) +
      Math.abs(rgb1[2] - rgb2[2]);
};

0

Se você está manipulando espaços de cores para efeito visual, geralmente é mais fácil trabalhar em HSL (matiz, saturação e luminosidade) do que RGB. Mover cores em RGB para dar efeitos naturalmente agradáveis ​​tende a ser bastante conceitualmente difícil, enquanto converter em HSL, manipulá-lo e convertê-lo novamente é mais intuitivo em conceito e, invariavelmente, gera resultados melhores.

A Wikipedia tem uma boa introdução ao HSL e ao HSV estreitamente relacionado. E há um código gratuito na rede para fazer a conversão (por exemplo, aqui está uma implementação em javascript )

A transformação precisa que você usa é uma questão de gosto, mas, pessoalmente, eu pensaria que a reversão dos componentes Hue e Lightness geraria uma boa cor de alto contraste como primeira aproximação, mas você pode facilmente obter efeitos mais sutis.


1
Sim, mas considere também que o olho humano pode ver o verde muito mais predominantemente do que outras cores e o azul menos (é por isso que o azul recebe menos bits de cor nos formatos de imagem).
precisa saber é o seguinte

1
De fato. Se vamos mudar para o HSL, podemos dar o salto total para o YUV e levar em conta a percepção humana.
David Bradbury

0

Você pode ter qualquer texto de matiz em qualquer fundo de matiz e garantir que seja legível. Eu faço isso o tempo todo. Existe uma fórmula para isso em Javascript em Texto legível em cores - STW * Como se diz nesse link, a fórmula é uma variação no cálculo do ajuste de gama inversa, embora um IMHO um pouco mais gerenciável. Os menus no lado direito desse link e suas páginas associadas usam cores geradas aleatoriamente para texto e plano de fundo, sempre legíveis. Então, sim, claramente isso pode ser feito, não há problema.


0

Uma variação do Android que captura o alfa também.

(obrigado @ thomas-vos)

/**
 * Returns a colour best suited to contrast with the input colour.
 *
 * @param colour
 * @return
 */
@ColorInt
public static int contrastingColour(@ColorInt int colour) {
    // XXX /programming/1855884/determine-font-color-based-on-background-color

    // Counting the perceptive luminance - human eye favors green color...
    double a = 1 - (0.299 * Color.red(colour) + 0.587 * Color.green(colour) + 0.114 * Color.blue(colour)) / 255;
    int alpha = Color.alpha(colour);

    int d = 0; // bright colours - black font;
    if (a >= 0.5) {
        d = 255; // dark colours - white font
    }

    return Color.argb(alpha, d, d, d);
}

0

baseVersão R da resposta de @ Gacek para obter luminance(você pode aplicar seu próprio limite facilmente)

# vectorized
luminance = function(col) c(c(.299, .587, .114) %*% col2rgb(col)/255)

Uso:

luminance(c('black', 'white', '#236FAB', 'darkred', '#01F11F'))
# [1] 0.0000000 1.0000000 0.3730039 0.1629843 0.5698039

0

Com base na resposta de Gacek , e depois de analisar o exemplo do @ WebSeed com a extensão do navegador WAVE , criei a seguinte versão que escolhe texto em preto ou branco com base na taxa de contraste (conforme definido nas Diretrizes de Acessibilidade para Conteúdo da Web (WCAG) 2.1 do W3C ) , em vez de luminância.

Este é o código (em javascript):

// As defined in WCAG 2.1
var relativeLuminance = function (R8bit, G8bit, B8bit) {
  var RsRGB = R8bit / 255.0;
  var GsRGB = G8bit / 255.0;
  var BsRGB = B8bit / 255.0;

  var R = (RsRGB <= 0.03928) ? RsRGB / 12.92 : Math.pow((RsRGB + 0.055) / 1.055, 2.4);
  var G = (GsRGB <= 0.03928) ? GsRGB / 12.92 : Math.pow((GsRGB + 0.055) / 1.055, 2.4);
  var B = (BsRGB <= 0.03928) ? BsRGB / 12.92 : Math.pow((BsRGB + 0.055) / 1.055, 2.4);

  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
};

var blackContrast = function(r, g, b) {
  var L = relativeLuminance(r, g, b);
  return (L + 0.05) / 0.05;
};

var whiteContrast = function(r, g, b) {
  var L = relativeLuminance(r, g, b);
  return 1.05 / (L + 0.05);
};

// If both options satisfy AAA criterion (at least 7:1 contrast), use preference
// else, use higher contrast (white breaks tie)
var chooseFGcolor = function(r, g, b, prefer = 'white') {
  var Cb = blackContrast(r, g, b);
  var Cw = whiteContrast(r, g, b);
  if(Cb >= 7.0 && Cw >= 7.0) return prefer;
  else return (Cb > Cw) ? 'black' : 'white';
};

Um exemplo de trabalho pode ser encontrado no meu fork do codepen do @ WebSeed, que produz zero erros de baixo contraste no WAVE.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.