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

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.

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/

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().)

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;
}

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)
}

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;
};

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;

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.

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;
}

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'

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;
}

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
}

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];
}

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
}

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

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]);
};

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.

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.

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);
}

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

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.