Определите цвет шрифта на основе цвета фона

Question

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

Я уверен, что есть какой-то алгоритм, но я недостаточно разбираюсь в цветах, яркости и т. Д., Чтобы понять это самостоятельно.

Answer 1

Реализация для target-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];
}

Answer 2

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
}

Answer 3

Реализация флаттера

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

Answer 4

Вариант 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 /1333430/opredelite-tsvet-shrifta-na-osnove-tsveta-fona

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

Answer 5

Как расширение 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
}

Answer 6

Если вы манипулируете цветовыми пространствами для визуального эффекта, обычно проще работать в HSL (Hue, Saturation and Lightness), чем в RGB. Перемещение цветов в RGB для получения естественно приятных эффектов, как правило, является довольно концептуально сложным, в то время как преобразование в HSL, манипулирование там, а затем обратное преобразование является более интуитивным по своей концепции и неизменно дает лучшие результаты.

В Википедии есть хорошее введение в HSL и тесно связанный HSV. И есть бесплатный код в сети, чтобы сделать преобразование (например, вот реализация javascript )

Какое точное преобразование вы используете, это дело вкуса, но лично я бы подумал, что изменение компонентов Hue и Lightness наверняка даст хороший высококонтрастный цвет в первом приближении, но вы можете легко перейти к более тонкому последствия.

Answer 7

Вы можете иметь любой текст оттенка на любом фоне оттенка и обеспечить его разборчивость. Я делаю это все время. Есть формула для этого в Javascript на Читаемый текст в цвете - STW * Как говорится в этой ссылке, формула представляет собой вариацию в расчете регулировки обратной гаммы, хотя и немного более управляемая IMHO. Меню в правой части этой ссылки и связанных с ней страниц используют произвольно сгенерированные цвета для текста и фона, всегда читаемые. Так что да, ясно, что это можно сделать, нет проблем.