Wie Schriftfarbe in weiß oder schwarz, je nach Hintergrundfarbe entscheiden?
https://stackoverflow.com/questions/3942878
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich möchte wie in diesem Beispiel einige Bilder zeigen 
Die Füllfarbe von einem Feld in der Datenbank mit der Farbe in Hex (ex: ClassX -> Farbe: # 66FFFF) entschieden werden. Nun, ich möchte mit der gewählten Farbe über einer Fülldaten zeigen (wie im Bild oben), aber ich muss wissen, ob die Farbe dunkel oder hell ist, so kann ich wissen, ob die Wörter in weiß oder schwarz sein sollte. Gibt es einen Weg? tks
Lösung
Aufbauend auf meine Antwort auf eine ähnliche Frage .
Sie müssen den Hex-Code in 3 Stücke brechen die einzelnen roten, grünen und blauen Intensitäten zu erhalten. Jeweils 2 Stellen des Codes repräsentieren einen Wert in hexadezimal (Basis 16) -Notation. Ich will hier nicht in die Details der Umwandlung erhalten, sie sind einfach zu suchen.
Wenn Sie die Intensitäten für die einzelnen Farben haben, können Sie die gesamte Intensität der Farbe bestimmen und den entsprechenden Text auswählen.
if (red*0.299 + green*0.587 + blue*0.114) > 186 use #000000 else use #ffffff
Die Schwelle von 186 ist auf der Theorie basiert, kann aber auf Geschmack angepasst werden. Basierend auf den Kommentaren unterhalb einer Schwelle von 150 kann für Sie besser arbeiten.
Edit: Die obige einfach und funktioniert recht gut und scheint hier eine gute Akzeptanz bei Stackoverflow zu haben. Doch einer der Kommentare unten zeigt es auf der Nichteinhaltung W3C-Richtlinien unter bestimmten Umständen führen kann. Hiermit leite ich eine Form geändert, die immer den höchsten Kontrast zu den Leitlinien basieren wählt. Wenn Sie nicht Notwendigkeit, W3C-Regeln entsprechen dann habe ich mit der einfacheren Formel kleben würde oben.
Die für den Kontrast angegebene Formel in dem W3C-Empfehlungen (L1 + 0.05) / (L2 + 0.05) ist, wo L1 ist die Leuchtdichte die hellste Farbe und L2 ist die Leuchtdichte von den dunkelsten auf einer Skala von 0,0-1,0. Die Leuchtdichte von Schwarz ist 0,0 und weiß ist 1,0, so diese Werte ersetzen können Sie die mit dem höchsten Kontrast bestimmen. Wenn der Kontrast für Schwarz größer ist als der Kontrast für Weiß, Verwendung schwarz, sonst weiß verwenden. die Helligkeit der Farbe gegeben Sie als L sind Prüfung der Test wird:
if (L + 0.05) / (0.0 + 0.05) > (1.0 + 0.05) / (L + 0.05) use #000000 else use #ffffff
Das vereinfacht unten algebraisch zu:
if L > sqrt(1.05 * 0.05) - 0.05
Oder etwa:
if L > 0.179 use #000000 else use #ffffff
Das einzige, was links ist L zu berechnen. Diese Formel ist auch in den Richtlinien und es sieht aus wie die Umwandlung von sRGB zu linearen RGB gefolgt von der ITU-R Empfehlung BT.709 Leuchtdichte.
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
Die Schwelle von 0.179 sollte nicht geändert werden, da es zu den W3C-Richtlinien gebunden ist. Wenn Sie die Ergebnisse nicht nach Ihrem Geschmack finden, versuchen Sie die einfachere Formel oben.
Andere Tipps
Ich habe für diesen Code keinen Kredit nehmen, wie es nicht von mir, aber ich überlasse es hier für andere schnell in der Zukunft zu finden:
Basierend auf Mark Ransoms Antwort, hier ist ein Code-Snippet für die einfache Version:
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;
}
und hier ist der Code-Schnipsel für die erweiterte Version:
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;
}
Um sie zu verwenden, rufen Sie einfach an:
var color = '#EEACAE' // this can be any color
pickTextColorBasedOnBgColorSimple(color, '#FFFFFF', '#000000');
Auch dank Alx und chetstone.
Wie über diesen (JavaScript-Code)?
/**
* 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';
}
Hier ist meine Lösung in Java für 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);
Zusätzlich zu den Arithmetik-Lösungen, ist es auch möglich, ein AI neuronales Netzwerk zu verwenden. Der Vorteil ist, dass Sie es zu Ihrem eigenen Geschmack und Bedürfnisse anpassen können (dh. Off-weißer Text auf helle gesättigten Rot sieht gut aus und ist ebenso lesbar wie schwarz).
Hier ist eine nette Javascript-Demo, die das Konzept veranschaulicht. Sie können auch Ihre eigene JS Formel rechts in der Demo erzeugen.
https://harthur.github.io/brain/
Im Folgenden sind einige Diagramme, die mir geholfen, meine Gedanken bekommen , um das Problem . In dem ersten Diagramm, Leichtigkeit ist eine Konstante 128, während Farbton und Sättigung variieren. In dem zweiten Diagramm ist, Sättigung eine Konstante 255, während Farbton und Helligkeit variieren.
Auf der Grundlage der Antwort von @MarkRansom, habe ich ein PHP-Skript finden Sie hier:
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';
}
Dies ist nur ein Beispiel, das die Farbe eines SVG Häkchen ändert, wenn auf ein Element klicken. Es wird das Häkchen Farbe schwarz oder weiß auf der Hintergrund-Farbe des angeklickten Elements festgelegt.
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);
}
Ich benutze diese JavaScript-Funktion zu konvertieren rgb / rgba zu 'white' oder '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';
}
}
Sie können jedes dieser Formate eingeben und es wird ausgegeben 'black' oder 'white'
-
rgb(255,255,255) -
rgba(255,255,255,0.1) -
color:rgba(255,255,255,0.1) -
255,255,255,0.1
Marks ausführliche Antwort funktioniert super. Hier ist eine Implementierung in 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';
}
Dann kann diese Funktion lum([111, 22, 255]) nennen weiß oder schwarz zu erhalten.
Ich habe noch nie etwas getan, aber was ist eine Funktion zu schreiben, die Werte von jedem der Farben gegenüber der Median Farbe Hex 7F (FF / 2) zu überprüfen. Wenn zwei der drei Farben größer als 7F sind, dann sind Sie mit einer dunkleren Farbe zu arbeiten.
Dies ist eine schnelle Version von Mark Ransom Antwort als eine Erweiterung der 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
} }
Basierend auf verschiedene Eingaben von dem Link ??Make foregroundColor schwarz oder weiß, je auf hintergrund und diesen Thread, machte ich eine Erweiterungsklasse für Farbe, die Sie Kontrastfarben erforderlich gibt.
Der Code geht wie folgt:
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);
}
}
@SoBiT, war ich auf Ihre Antwort suchen, die gut aussieht, aber es gibt einen kleinen Fehler drin. Ihre Funktion hexToG und hextoB brauchen eine kleine Änderung. Die letzte Zahl in substr ist die Länge der Saite, und so in diesem Fall itshould „2“ sein, anstatt 4 oder 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 hat eine schöne contrast() Funktion, die gut für mich gearbeitet, finden Sie unter http: // lesscss .org / Funktionen / # farb Operationen kontrast
"Wählen Sie, welche aus zwei Farben den größten Unterschied zu einem anderen zur Verfügung stellt. Dies ist nützlich, um sicherzustellen, dass eine Farbe vor dem Hintergrund lesbar ist, die für die Zugänglichkeit der Einhaltung auch nützlich ist. Diese Funktion funktioniert auf die gleiche Weise wie die Kontrastfunktion in Compass für SASS. Gemäß WCAG 2.0 werden die Farben verglichen ihre Gamma-korrigierte Luminanzwert verwendet wird, nicht ihre Leichtigkeit. "
Beispiel:
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%);
}
Ausgabe:
p {
a: #000000 // black
b: #ffffff // white
c: #dddddd
d: #000000 // black
e: #ffffff // white
}
Von hex zu schwarz oder weiß:
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";
}
Objective-c Version Code für iOS basiert auf Marks Antwort:
- (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;
}
Was ist die Prüfung mit allen 24 Bit Farben?
Beachten Sie, dass YIQ Verfahren ein minimales Kontrastverhältnis von 1,9 zurück. 1, die nicht AA und AAA WCAG2.0 Tests nicht besteht, eine 128 Schwelle unter der Annahme,
Für W3C-Methode, es wird ein Mindestkontrastverhältnis von 4,58 Rückkehr: 1, dass Pass AA und AAA-Tests für großen Text und AA-Tests für kleinen Text, wird es nicht AAA-Test für kleinen Text für alle Farben übergibt.
Hier ist meine eigene Methode, dass ich verwendet habe und habe kein Problem mit bisher ??
habeconst 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';
Ich habe Python-Modul Vordergrundfarbe zu wählen, basierend auf RGB oder HEX-Wert der Hintergrundfarbe: https: // Github .com / azaitsev / Vordergrund
