Làm thế nào để quyết định màu phông chữ trắng hoặc đen tùy thuộc vào màu nền?

Tôi muốn hiển thị một số hình ảnh như ví dụ này

Màu tô được quyết định bởi một trường trong cơ sở dữ liệu với màu ở dạng hex (ví dụ: ClassX -> Color: # 66FFFF). Bây giờ, tôi muốn hiển thị dữ liệu phía trên một màu với màu đã chọn (như trong hình trên) nhưng tôi cần biết màu đó là tối hay sáng để tôi biết các từ nên có màu trắng hay đen. Là có một cách? tks

Dựa trên câu trả lời của tôi cho một câu hỏi tương tự .

Bạn cần chia mã hex thành 3 phần để có được cường độ màu đỏ, xanh lục và xanh lam riêng lẻ. Mỗi 2 chữ số của mã đại diện cho một giá trị theo ký hiệu thập lục phân (cơ số-16). Tôi sẽ không tìm hiểu chi tiết về chuyển đổi ở đây, chúng dễ dàng tra cứu.

Khi bạn có cường độ cho từng màu riêng lẻ, bạn có thể xác định cường độ tổng thể của màu và chọn văn bản tương ứng.

if (red*0.299 + green*0.587 + blue*0.114) > 186 use #000000 else use #ffffff

Ngưỡng 186 dựa trên lý thuyết, nhưng có thể được điều chỉnh theo sở thích. Dựa trên các ý kiến ​​dưới ngưỡng 150 có thể phù hợp hơn với bạn.

Công thức được đưa ra cho độ tương phản trong Khuyến nghị của W3C là (L1 + 0.05) / (L2 + 0.05), trong đó L1độ chói của màu sáng nhất và L2là độ chói của màu tối nhất trên thang điểm 0,0-1,0. Độ chói của màu đen là 0,0 và màu trắng là 1,0, vì vậy việc thay thế các giá trị đó cho phép bạn xác định giá trị có độ tương phản cao nhất. Nếu độ tương phản cho màu đen lớn hơn độ tương phản cho màu trắng, hãy sử dụng màu đen, nếu không thì sử dụng màu trắng. Cho độ chói của màu bạn đang kiểm tra khi Lthử nghiệm trở thành:

if (L + 0.05) / (0.0 + 0.05) > (1.0 + 0.05) / (L + 0.05) use #000000 else use #ffffff

Điều này đơn giản hóa đại số xuống:

if L > sqrt(1.05 * 0.05) - 0.05

Hoặc khoảng:

if L > 0.179 use #000000 else use #ffffff

Điều duy nhất còn lại là tính toán L. Công thức đó cũng được đưa ra trong hướng dẫn và có vẻ như việc chuyển đổi từ sRGB sang RGB tuyến tính theo sau là khuyến nghị BT.709 của ITU-R cho độ chói.

for each c in r,g,b:
    c = c / 255.0
    if c <= 0.03928 then c = c/12.92 else c = ((c+0.055)/1.055) ^ 2.4
L = 0.2126 * r + 0.7152 * g + 0.0722 * b

Không nên thay đổi ngưỡng 0.179 vì nó được gắn với hướng dẫn của W3C. Nếu bạn thấy kết quả không như ý muốn của mình, hãy thử công thức đơn giản hơn ở trên.

Tôi không tin tưởng vào mã này vì nó không phải của tôi, nhưng tôi để nó ở đây để người khác tìm thấy nhanh chóng trong tương lai:

Dựa trên câu trả lời của Mark Ransoms, đây là đoạn mã cho phiên bản đơn giản:

function pickTextColorBasedOnBgColorSimple(bgColor, lightColor, darkColor) {
  var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;
  var r = parseInt(color.substring(0, 2), 16); // hexToR
  var g = parseInt(color.substring(2, 4), 16); // hexToG
  var b = parseInt(color.substring(4, 6), 16); // hexToB
  return (((r * 0.299) + (g * 0.587) + (b * 0.114)) > 186) ?
    darkColor : lightColor;
}

và đây là đoạn mã cho phiên bản nâng cao:

function pickTextColorBasedOnBgColorAdvanced(bgColor, lightColor, darkColor) {
  var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;
  var r = parseInt(color.substring(0, 2), 16); // hexToR
  var g = parseInt(color.substring(2, 4), 16); // hexToG
  var b = parseInt(color.substring(4, 6), 16); // hexToB
  var uicolors = [r / 255, g / 255, b / 255];
  var c = uicolors.map((col) => {
    if (col <= 0.03928) {
      return col / 12.92;
    }
    return Math.pow((col + 0.055) / 1.055, 2.4);
  });
  var L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);
  return (L > 0.179) ? darkColor : lightColor;
}

Để sử dụng chúng, chỉ cần gọi:

var color = '#EEACAE' // this can be any color
pickTextColorBasedOnBgColorSimple(color, '#FFFFFF', '#000000');

Ngoài ra, cảm ơn Alxvà chetstone.

Làm thế nào về điều này (mã JavaScript)?

/**
 * Get color (black/white) depending on bgColor so it would be clearly seen.
 * @param bgColor
 * @returns {string}
 */
getColorByBgColor(bgColor) {
    if (!bgColor) { return ''; }
    return (parseInt(bgColor.replace('#', ''), 16) > 0xffffff / 2) ? '#000' : '#fff';
}

Ngoài các giải pháp số học, cũng có thể sử dụng mạng thần kinh AI. Ưu điểm là bạn có thể điều chỉnh nó theo sở thích và nhu cầu của riêng bạn (ví dụ: văn bản ngoài màu trắng trên màu đỏ bão hòa trông đẹp và dễ đọc như màu đen).

Đây là một bản demo Javascript gọn gàng minh họa khái niệm này. Bạn cũng có thể tạo công thức JS của riêng bạn ngay trong bản demo.

https://harthur.github.io/brain/

Dưới đây là một số biểu đồ giúp tôi suy nghĩ về vấn đề này . Trong biểu đồ đầu tiên, độ sáng là hằng số 128, trong khi màu sắc và độ bão hòa khác nhau. Trong biểu đồ thứ hai, độ bão hòa là một hằng số 255, trong khi màu sắc và độ sáng khác nhau.

Đây là giải pháp của tôi trong Java cho Android:

// Put this method in whichever class you deem appropriate
// static or non-static, up to you.
public static int getContrastColor(int colorIntValue) {
    int red = Color.red(colorIntValue);
    int green = Color.green(colorIntValue);
    int blue = Color.blue(colorIntValue);
    double lum = (((0.299 * red) + ((0.587 * green) + (0.114 * blue))));
    return lum > 186 ? 0xFF000000 : 0xFFFFFFFF;
}

// Usage
// If Color is represented as HEX code:
String colorHex = "#484588";
int color = Color.parseColor(colorHex);

// Or if color is Integer:
int color = 0xFF484588;

// Get White (0xFFFFFFFF) or Black (0xFF000000)
int contrastColor = WhateverClass.getContrastColor(color);

Dựa trên câu trả lời của @MarkRansom, tôi đã tạo một tập lệnh PHP mà bạn có thể tìm thấy ở đây:

function calcC($c) {
    if ($c <= 0.03928) {
        return $c / 12.92;
    }
    else {
        return pow(($c + 0.055) / 1.055, 2.4);
    }
}

function cutHex($h) {
    return ($h[0] == "#") ? substr($h, 1, 7) : $h;
}

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

function hexToG($h) {
    return hexdec(substr(cutHex($h), 2, 2)); // Edited
}

function hexToB($h) {
    return hexdec(substr(cutHex($h), 4, 2)); // Edited
}

function computeTextColor($color) {
    $r = hexToR($color);
    $g = hexToG($color);
    $b = hexToB($color);
    $uicolors = [$r / 255, $g / 255, $b / 255];


    $c = array_map("calcC", $uicolors);

    $l = 0.2126 * $c[0] + 0.7152 * $c[1] + 0.0722 * $c[2];
    return ($l > 0.179) ? '#000000' : '#ffffff';
}

Đây là phiên bản nhanh chóng của câu trả lời của Mark Ransom dưới dạng phần mở rộng của UIColor

extension UIColor {

// Get the rgba components in CGFloat
var rgba: (red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat) {
    var red: CGFloat = 0, green: CGFloat = 0, blue: CGFloat = 0, alpha: CGFloat = 0

    getRed(&red, green: &green, blue: &blue, alpha: &alpha)

    return (red, green, blue, alpha)
}

/// Return the better contrasting color, white or black
func contrastColor() -> UIColor {
    let rgbArray = [rgba.red, rgba.green, rgba.blue]

    let luminanceArray = rgbArray.map({ value -> (CGFloat) in
        if value < 0.03928 {
            return (value / 12.92)
        } else {
            return (pow( (value + 0.55) / 1.055, 2.4) )
        }
    })

    let luminance = 0.2126 * luminanceArray[0] +
        0.7152 * luminanceArray[1] +
        0.0722 * luminanceArray[2]

    return luminance > 0.179 ? UIColor.black : UIColor.white
} }

Đây chỉ là một ví dụ sẽ thay đổi màu của dấu kiểm SVG khi nhấp vào một phần tử. Nó sẽ đặt màu đánh dấu thành đen hoặc trắng dựa trên màu nền của phần tử được nhấp.

checkmarkColor: function(el) {
    var self = el;
    var contrast = function checkContrast(rgb) {
        // @TODO check for HEX value

        // Get RGB value between parenthesis, and remove any whitespace
        rgb = rgb.split(/\(([^)]+)\)/)[1].replace(/ /g, '');

        // map RGB values to variables
        var r = parseInt(rgb.split(',')[0], 10),
            g = parseInt(rgb.split(',')[1], 10),
            b = parseInt(rgb.split(',')[2], 10),
            a;

        // if RGBA, map alpha to variable (not currently in use)
        if (rgb.split(',')[3] !== null) {
            a = parseInt(rgb.split(',')[3], 10);
        }

        // calculate contrast of color (standard grayscale algorithmic formula)
        var contrast = (Math.round(r * 299) + Math.round(g * 587) + Math.round(b * 114)) / 1000;

        return (contrast >= 128) ? 'black' : 'white';
    };

    $('#steps .step.color .color-item .icon-ui-checkmark-shadow svg').css({
        'fill': contrast($(self).css('background-color'))
    });
}

onClickExtColor: function(evt) {
    var self = this;

    self.checkmarkColor(evt.currentTarget);
}

https://gist.github.com/dcondrey/183971f17808e9277572

Tôi sử dụng chức năng JavaScript này để chuyển đổi rgb/ rgbathành 'white'hoặc 'black'.

function getTextColor(rgba) {
    rgba = rgba.match(/\d+/g);
    if ((rgba[0] * 0.299) + (rgba[1] * 0.587) + (rgba[2] * 0.114) > 186) {
        return 'black';
    } else {
        return 'white';
    }
}

Bạn có thể nhập bất kỳ định dạng nào và nó sẽ xuất 'black'hoặc'white'

• rgb(255,255,255)
• rgba(255,255,255,0.1)
• color:rgba(255,255,255,0.1)
• 255,255,255,0.1

Câu trả lời chi tiết của Mark hoạt động tuyệt vời. Đây là một triển khai trong javascript:

function lum(rgb) {
    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';
}

Sau đó có thể gọi hàm này lum([111, 22, 255])để lấy màu trắng hoặc đen.

Tôi chưa bao giờ làm bất cứ điều gì như thế này, nhưng về việc viết một hàm để kiểm tra giá trị của từng màu so với màu trung bình của Hex 7F (FF / 2). Nếu hai trong ba màu lớn hơn 7F, thì bạn đang làm việc với màu tối hơn.

Dựa trên các đầu vào khác nhau từ liên kết Tạo foregroundcolor đen hoặc trắng tùy thuộc vào nền và chủ đề này, tôi đã tạo một lớp mở rộng cho Màu cung cấp cho bạn các màu tương phản cần thiết.

Mã này như sau:

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

Nếu giống như tôi, bạn đang tìm kiếm một phiên bản RGBA có tính đến alpha, thì đây là một phiên bản hoạt động thực sự tốt để có độ tương phản cao.

function getContrastColor(R, G, B, A) {
  const brightness = R * 0.299 + G * 0.587 + B * 0.114 + (1 - A) * 255;

  return brightness > 186 ? "#000000" : "#FFFFFF";
}

Đây là phiên bản R của câu trả lời của Mark Ransom, chỉ sử dụng cơ sở R.

hex_bw <- function(hex_code) {

  myrgb <- as.integer(col2rgb(hex_code))

  rgb_conv <- lapply(myrgb, function(x) {
    i <- x / 255
    if (i <= 0.03928) {
      i <- i / 12.92
    } else {
      i <- ((i + 0.055) / 1.055) ^ 2.4
    }
    return(i)
  })

 rgb_calc <- (0.2126*rgb_conv[[1]]) + (0.7152*rgb_conv[[2]]) + (0.0722*rgb_conv[[3]])

 if (rgb_calc > 0.179) return("#000000") else return("#ffffff")

}

> hex_bw("#8FBC8F")
[1] "#000000"
> hex_bw("#7fa5e3")
[1] "#000000"
> hex_bw("#0054de")
[1] "#ffffff"
> hex_bw("#2064d4")
[1] "#ffffff"
> hex_bw("#5387db")
[1] "#000000"

@SoBiT, tôi đã xem câu trả lời của bạn, có vẻ tốt, nhưng có một lỗi nhỏ trong đó. Hàm hexToG và hextoB của bạn cần một chỉnh sửa nhỏ. Số cuối cùng trong đế là độ dài của chuỗi, và trong trường hợp này, nó phải là "2", thay vì 4 hoặc 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));
}

LESS có một contrast()chức năng tốt hoạt động độc đáo với tôi, xem http://lesscss.org/fifts/#color-operations-contrast

"Chọn màu nào trong hai màu cung cấp độ tương phản lớn nhất với màu khác. Điều này hữu ích để đảm bảo rằng màu có thể đọc được trên nền, cũng hữu ích cho việc tuân thủ khả năng truy cập. Chức năng này hoạt động tương tự như chức năng tương phản trong La bàn cho SASS. Theo WCAG 2.0, màu sắc được so sánh bằng cách sử dụng giá trị độ sáng được điều chỉnh gamma của chúng, chứ không phải độ sáng của chúng. "

Thí dụ:

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

Đầu ra:

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

Từ hex sang đen hoặc trắng:

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

Mã phiên bản Objective-c cho iOS dựa trên câu trả lời của Mark:

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

Điều gì về thử nghiệm với tất cả các màu 24 bit?

Xin lưu ý rằng phương pháp YIQ sẽ trả về tỷ lệ tương phản tối thiểu 1,9: 1, không vượt qua các thử nghiệm WCAG2.0 của AA và AAA, giả sử ngưỡng 128.

Đối với phương pháp W3C, nó sẽ trả về tỷ lệ tương phản tối thiểu 4,58: 1, vượt qua các bài kiểm tra AA và AAA cho văn bản lớn và kiểm tra AA cho văn bản nhỏ, nó sẽ không vượt qua kiểm tra AAA cho văn bản nhỏ cho mỗi màu.

Đây là phương pháp của riêng tôi mà tôi đã sử dụng và chưa gặp vấn đề gì cho đến nay

const hexCode = value.charAt(0) === '#' 
                  ? value.substr(1, 6)
                  : value;

const hexR = parseInt(hexCode.substr(0, 2), 16);
const hexG = parseInt(hexCode.substr(2, 2), 16);
const hexB = parseInt(hexCode.substr(4, 2), 16);
// Gets the average value of the colors
const contrastRatio = (hexR + hexG + hexB) / (255 * 3);

contrastRatio >= 0.5
  ? 'black'
  : 'white';

Tôi đã tạo mô-đun Python để chọn màu nền trước dựa trên giá trị RGB hoặc HEX của màu nền: https://github.com/azaitsev/forground

Đây là mã của tôi cho Java Swing dựa trên câu trả lời tuyệt vời của Mark:

public static Color getColorBasedOnBackground(Color background, Color darkColor, Color lightColor) {
    // Calculate foreground color based on background (based on https://stackoverflow.com/a/3943023/)
    Color color;
    double[] cL = new double[3];
    double[] colorRGB = new double[] {background.getRed(), background.getGreen(), background.getBlue()};

    for (int i = 0; i < colorRGB.length; i++)
        cL[i] = (colorRGB[i] / 255.0 <= 0.03928) ? colorRGB[i] / 255.0 / 12.92 :
                Math.pow(((colorRGB[i] / 255.0 + 0.055) / 1.055), 2.4);

    double L = 0.2126 * cL[0] + 0.7152 * cL[1] + 0.0722 * cL[2];
    color = (L > Math.sqrt(1.05 * 0.05) - 0.05) ? darkColor : lightColor;

    return color;
}