Визначте колір шрифту залежно від кольору фону

Враховуючи систему (наприклад, веб-сайт), яка дозволяє користувачеві налаштувати колір тла для певного розділу, але не колір шрифту (щоб мінімізувати кількість варіантів), чи існує можливість програмно визначити, чи є "світлий" чи " темний "шрифт потрібен?

Я впевнений, що є якийсь алгоритм, але я не знаю достатньо кольорів, освітленості тощо, щоб зрозуміти це самостійно.

Я зіткнувся з подібною проблемою. Мені довелося знайти хороший метод вибору контрастного кольору шрифту для відображення текстових міток на кольорових шкалах / теплових картах. Це повинен був бути універсальним методом, і генерований колір повинен бути "добре виглядає", а це означає, що простий генеруючий додатковий колір не був гарним рішенням - іноді він створював дивні, дуже інтенсивні кольори, які важко було спостерігати і читати.

Після довгих годин тестування та спроб вирішити цю проблему я з’ясував, що найкращим рішенням є вибір білого шрифту для «темних» кольорів, а чорний шрифт для «яскравих» кольорів.

Ось приклад функції, яку я використовую в 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);
}

Це було випробувано для багатьох різних кольорових кольорів (веселка, відтінки сірого, тепло, лід та багато інших) і це єдиний «універсальний» метод, який я дізнався.

Правка
Змінено формулу підрахункуa до "сприйнятливої ​​яскравості" - це дійсно виглядає краще! Вже реалізована в моєму програмному забезпеченні, виглядає чудово.

Edit 2 @WebSeed надав чудовий робочий приклад цього алгоритму: http://codepen.io/WebSeed/full/pvgqEq/

На всякий випадок, коли хтось захоче коротший, можливо простіший для розуміння варіант відповіді 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;
}

Примітка. Я усунув інверсію значення луми (щоб яскраві кольори мали більш високе значення, що мені здається більш природним, а також метод розрахунку "за замовчуванням".

Я використовував ті ж константи, що і GaceK звідси, оскільки вони чудово працювали на мене.

(Ви також можете реалізувати це як метод розширення, використовуючи наступний підпис:

public static Color ContrastColor(this Color iColor)

Потім ви можете зателефонувати через foregroundColor = background.ContrastColor().)

Спасибі @Gacek . Ось версія для 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);
}

І вдосконалена (коротша) версія:

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

Моя швидка реалізація відповіді Гацека:

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

Дякую за цю публікацію

Для тих, хто може бути зацікавлений, ось приклад цієї функції в 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;

Це така корисна відповідь. Дякую за це!

Я хочу поділитися версією 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 );

}

Тепер з’ясуємо, як використовувати алгоритм для автоматичного створення наведення кольорів для посилань на меню. Світлі заголовки отримують темніше наведення, і навпаки.

Флеттерне виконання

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, якщо ви не любите його писати :)

'''
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'

У мене була така ж проблема, але мені довелося розвивати її в PHP . Я використовував @ GAREK в розчині і я також використовував цей відповідь: Перетворити шістнадцятковий колір для значень RGB в PHP для перетворення HEX коду кольору в RGB.

Тож я ділюсь цим.

Я хотів використовувати цю функцію із заданим кольором фонового HEX, але не завжди починаючи з "#".

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

Як розширення 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
}

Впровадження для цілі-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 (розширення 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
}

Приклад 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)
    }

}

ОНОВЛЕННЯ - Виявлено, що 0.6це кращий тестовий шар для запиту

Зверніть увагу, що в бібліотеці закриття google є алгоритм, який посилається на рекомендацію w3c: http://www.w3.org/TR/AERT#color-contrast . Однак у цьому API ви надаєте список запропонованих кольорів як вихідну точку.

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

Якщо ви маніпулюєте кольоровими просторами для візуального ефекту, працювати в HSL (відтінок, насиченість та легкість), як правило, простіше, ніж RGB. Переміщення кольорів у RGB для отримання природно приємних ефектів, як правило, є досить концептуально складним, тоді як перетворення в HSL, маніпулювання там, а потім перетворення знову інтуїтивно зрозуміліше в концепції та незмінно дає кращі результати.

У Вікіпедії є хороший вступ до HSL та тісно пов'язаних з ним ВПГ. І в мережі є безкоштовний код для здійснення перетворення (наприклад, тут реалізація javascript )

Яку точну трансформацію ви використовуєте - це питання смаку, але особисто я б подумав, що повернення компонентів відтінку і легкості буде певним, щоб створити хороший контрастний колір як перше наближення, але ви можете легко досягти більш тонких ефектів.

Ви можете мати текст будь-якого відтінку на будь-якому тлі відтінку і переконатися, що він є розбірливим. Я роблю це постійно. Формула для цього є у Javascript на " Читаний текст кольором" - STW * Як говориться на цьому посиланні, формула є варіацією в обчисленні зворотного гамма-коригування, хоча і трохи більш керованою IMHO. Меню в правій частині цього посилання та пов’язаних із ними сторінок використовують випадкові кольори для тексту та фону, завжди розбірливі. Так що так, явно це можна зробити, ніяких проблем.

Варіант Android, який захоплює і альфа.

(спасибі @ 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);
}

baseR версія відповіді @ Gacek, щоб отримати luminance(ви можете легко застосувати власний поріг)

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

Використання:

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

На основі відповіді Гацека та аналізуючи приклад @ WebSeed з розширенням для браузера WAVE , я придумав таку версію, яка вибирає чорний або білий текст на основі коефіцієнта контрастності (як визначено в Правилах доступності веб-вмісту W3C (WCAG) 2.1 ) , замість яскравості.

Це код (у 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';
};

Робочий приклад може бути знайдений у моєму вилку коду @ WebSeed, який створює нульові помилки з низьким контрастом у WAVE.