Как определить цвет шрифта в белом или черном цвете в зависимости от цвета фона?

Question

Я хочу показать некоторые изображения, подобные этому примеру

Цвет заливки определяется полем в базе данных с цветом в шестнадцатеричном формате (например, ClassX -> Color: # 66FFFF).Теперь я хочу показать данные над заливкой с выбранным цветом (как на картинке выше), но мне нужно знать, является ли цвет темным или светлым, поэтому я знаю, должны ли слова быть белыми или черными.Есть ли способ?ТКС

Answer 1

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

Код выглядит следующим образом:

 public static class ColorExtension
{       
    public static int PerceivedBrightness(this Color c)
    {
        return (int)Math.Sqrt(
        c.R * c.R * .299 +
        c.G * c.G * .587 +
        c.B * c.B * .114);
    }
    public static Color ContrastColor(this Color iColor, Color darkColor,Color lightColor)
    {
        //  Counting the perceptive luminance (aka luma) - human eye favors green color... 
        double luma = (iColor.PerceivedBrightness() / 255);

        // Return black for bright colors, white for dark colors
        return luma > 0.5 ? darkColor : lightColor;
    }
    public static Color ContrastColor(this Color iColor) => iColor.ContrastColor(Color.Black);
    public static Color ContrastColor(this Color iColor, Color darkColor) => iColor.ContrastColor(darkColor, Color.White);
    // Converts a given Color to gray
    public static Color ToGray(this Color input)
    {
        int g = (int)(input.R * .299) + (int)(input.G * .587) + (int)(input.B * .114);
        return Color.FromArgb(input.A, g, g, g);
    }
}

Answer 2

Я никогда не делал ничего подобного, но как насчет написания функции для проверки значений каждого из цветов по отношению к срединному цвету Hex 7F (FF / 2). Если два из трех цветов больше 7F, значит, вы работаете с более темным цветом.

Answer 3

Код версии Objective-c для iOS на основе ответа Марка:

- (UIColor *)contrastForegroundColor {
CGFloat red = 0, green = 0, blue = 0, alpha = 0;
[self getRed:&red green:&green blue:&blue alpha:&alpha];
NSArray<NSNumber *> *rgbArray = @[@(red), @(green), @(blue)];
NSMutableArray<NSNumber *> *parsedRGBArray = [NSMutableArray arrayWithCapacity:rgbArray.count];
for (NSNumber *item in rgbArray) {
    if (item.doubleValue <= 0.03928) {
        [parsedRGBArray addObject:@(item.doubleValue / 12.92)];
    } else {
        double newValue = pow((item.doubleValue + 0.055) / 1.055, 2.4);
        [parsedRGBArray addObject:@(newValue)];
    }
}

double luminance = 0.2126 * parsedRGBArray[0].doubleValue + 0.7152 * parsedRGBArray[1].doubleValue + 0.0722 * parsedRGBArray[2].doubleValue;

return luminance > 0.179 ? UIColor.blackColor : UIColor.whiteColor;
}

Answer 4

От шестнадцатеричного до черного или белого:

function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result
    ? [
        parseInt(result[1], 16),
        parseInt(result[2], 16),
        parseInt(result[3], 16)
      ]
    : [0, 0, 0];
}

function lum(hex) {
  var rgb = hexToRgb(hex)
  var lrgb = [];
  rgb.forEach(function(c) {
    c = c / 255.0;
    if (c <= 0.03928) {
      c = c / 12.92;
    } else {
      c = Math.pow((c + 0.055) / 1.055, 2.4);
    }
    lrgb.push(c);
  });
  var lum = 0.2126 * lrgb[0] + 0.7152 * lrgb[1] + 0.0722 * lrgb[2];
  return lum > 0.179 ? "#000000" : "#ffffff";
}

Answer 5

LESS имеет замечательную функцию contrast(), которая отлично сработала для меня, см. http://lesscss.org/functions/#color-operations-contrast

"Выберите, какой из двух цветов обеспечивает наибольшую контрастность с другим. Это полезно для обеспечения того, чтобыцвет читается на фоне, что также полезно для обеспечения доступности. Эта функция работает так же, как и функция контрастности в Compass для SASS. В соответствии с WCAG 2.0 цвета сравниваются с использованием значения яркости, скорректированного с помощью гамма-коррекции, а не их яркости.. "

Пример:

p {
    a: contrast(#bbbbbb);
    b: contrast(#222222, #101010);
    c: contrast(#222222, #101010, #dddddd);
    d: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 30%);
    e: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 80%);
}

Вывод:

p {
    a: #000000 // black
    b: #ffffff // white
    c: #dddddd
    d: #000000 // black
    e: #ffffff // white
}

Answer 6

Как насчет тестирования со всеми 24-битными цветами?

Имейте в виду, что метод YIQ вернет минимальный коэффициент контрастности 1,9: 1, который не проходит тесты AA и AAA WCAG2.0, предполагая 128порог.

Для метода W3C он вернет минимальный коэффициент контрастности 4,58: 1, который пройдет тесты AA и AAA для большого текста, и тест AA для маленького текста, он не пройдет тест AAA для маленького текстатекст для каждого цвета.

Answer 7

@ SoBiT, я смотрел на твой ответ, который выглядит неплохо, но в нем есть небольшая ошибка.Ваша функция hexToG и hextoB нуждаются в незначительном редактировании.Последнее число в substr - это длина строки, поэтому в этом случае ее должно быть 2, а не 4 или 6.

function hexToR($h) {
    return hexdec(substr(cutHex($h), 0, 2));
}
function hexToG($h) {
    return hexdec(substr(cutHex($h), 2, 2));
}
function hexToB($h) {
    return hexdec(substr(cutHex($h), 4, 2));
}