Programmatische wählen Hochkontrastfarben

Question

Dies sollte eine einfache Frage, aber ich habe nicht in der Lage gewesen, einen Weg zu finden, damit es funktioniert.

Im Grunde habe ich eine dumme localhost-Seite, die ich in meinem webdevelopment verwenden. Wenn ich zwischen unseren Entwicklungsserver und meiner lokalen Version des C # -Code bin Surfen (von der Entwickler-URL über die Host-Datei umgeleitet) Ich habe manchmal bekannt, vergessen, was ‚dev.foo.com‘ Punkte auf -. Lokale oder Server

So ich eine Seite erstellt, die lokal als Standard-Web-Seite der Standard-Seite ausgeführt werden, so kann ich meinen localhost vom Server leicht identifizieren.

Diese Seite hat eine Menge Dinge zufällig (einschließlich einem Charakter Ausgangsstatistik für D & D zu erzeugen), einschließlich einer zufällige Hintergrundfarbe einstellen. Ich tue dies durch Erzeugen 3 Zufallszahl zwischen 0 und 255, und sie als RGB-Wert für die Körper Hintergrundfarbe in CSS setzen.

In Anbetracht des 3 Ints R, G und B, wie ich R2, G2 und B2, so dass die zweite Farbe mit hohem Kontrast wird mit dem ersten bestimme? Ich mag es, die Seite habe zufällige Hintergrundfarben (es hält von mir, um das Aussehen der Zielseite Gewöhnung), aber Ich mag auch den Text lesen kann.

Answer 1

Sie benötigen einen Unterschied in der Helligkeit für Text lesbar zu sein, als das Farbsehen selbst zu niedriger Auflösung hat.

So als Algorithmus würde ich vorschlagen, die folgenden:

• Wählen Sie eine zufällige Hintergrundfarbe.

• Dann entscheiden, ob es sich um eine helle oder eine dunkle Farbe ist. Zum Beispiel könnten Sie prüfen, ob der Durchschnitt der drei Primärfarben sind größer oder gleich 128.

• Für eine helle Farbe schwarz Text, für einen dunklen eines weißen Text.

Answer 2

„Kontrast“ ist ein geladenes Wort. Wenn Sie nur kümmern sie um in der Lage, den Text zu lesen, dann eine einfache Möglichkeit, in einem Luminanz-basierten Farbraum wie HSL zu arbeiten, und Vorder- und Hintergrundfarben mit großen Unterschieden in der Helligkeit wählen.

Die Umwandlung zwischen HSL und RGB ist bekannt - siehe Wikipedia für die Details

.

Wenn Sie sprechen über aktuelle Farbkontrast, ist es nicht annähernd so eingeschnittenen und getrocknet (es gibt eine Menge von Wahrnehmungsfaktoren sind, die, soweit ich weiß, nicht auf einen einzelnen Farben Raum reduziert), aber ich vermute, Sie nicht, dass die Ebene der Komplexität benötigen.

Answer 3

Überprüfen Sie diese PHP-Lösung aus: Berechnung Farbkontrast mit PHP von Andreas Gohr. Es kann zu jeder Sprache natürlich portiert werden.

Er hat auch eine sehr schöne Demonstration seines Kontrast Analysator, wo Sie einige minimalen Kontraststufen finden, mit zu arbeiten.

Answer 4

Sie können Methode GetBrightness() auf Color Klasse. Es gibt einen Gleitkommawert von 0,0 (Helligkeit von Schwarz) bis 1,0 (weiß). Eine einfache Lösung wäre:

var color1 = new Color.FromArgb(r1, g1, b1);
var brightness = color1.GetBrightness();

var color2 = brightness > 0.5 ? Color.Black : Color.White;

Answer 5

Ich habe so etwas wie dies in einer Palm OS-Anwendung. Das ist, was ich kam mit. Es macht nicht „high contrast“ Farben geben, aber es gibt Ihnen eine Hintergrundfarbe, die aus der Textfarbe unterschiedlich genug ist gut lesbar zu sein:

  // Black background is a special case.  It's fairly likely to occur and 
  // the default color shift we do isn't very noticeable with very dark colors.
  if (backColor.r < 0x20 && backColor.g < 0x20 && backColor.b < 0x20)
  {
      textColor.r = backColor.r + 0x20;
      textColor.g = backColor.g + 0x20;
      textColor.b = backColor.b + 0x20;
  }
  else
  {
      textColor.r = backColor.r + ((backColor.r < 128) ? 0x10 : -0x10);
      textColor.g = backColor.g + ((backColor.g < 128) ? 0x10 : -0x10);
      textColor.b = backColor.b + ((backColor.b < 128) ? 0x10 : -0x10);
  }

Sie können nicht für Ihre Zwecke schwarz als Sonderfall tun müssen, -. Palm Farbverarbeitung ist ein bisschen flippig (16-Bit-Farbe)

Answer 6

Es gibt einige gute Ressourcen (und Algorithmen) an diese Adresse unter http://juicystudio.com/ Artikel / luminositycontrastratioalgorithm.php

Answer 7

Diese Antworten sind mehr oder weniger darauf hindeutet, einen der zwei oder drei Farben zur Auswahl auf der Grundlage zu verwenden, ob die Farbe hell oder dunkel ist.

Ich benutze ein bisschen anders Ansatz und es funktionierte elegant in meinem Fall. Hier ist die Umsetzung.

 int color = your_color;
 contrastColor = Color.rgb(255-(color >> 16)&0xFF, 255-(color >> 8)&0xFF, 255- color&0xFF);

Es ist einfach und wunderbar.

Answer 8

Wenn Sie alle Bits kippen, werden Sie das „Gegenteil“ Farbe bekommen, die ziemlich guten Kontrast wäre.

Ich glaube, es ist der Operator ~ in C #:

R2 = ~R1;
G2 = ~G1;
B2 = ~B1;

Answer 9

Für die besten Kontrast diesen Code verwenden

function lumdiff($R1,$G1,$B1,$R2,$G2,$B2){

    $L1 = 0.2126 * pow($R1/255, 2.2) +
          0.7152 * pow($G1/255, 2.2) +
          0.0722 * pow($B1/255, 2.2);

    $L2 = 0.2126 * pow($R2/255, 2.2) +
          0.7152 * pow($G2/255, 2.2) +
          0.0722 * pow($B2/255, 2.2);

    if($L1 > $L2){
        return ($L1+0.05) / ($L2+0.05);
    }else{
        return ($L2+0.05) / ($L1+0.05);
    }
}

function get_the_contrast($c1, $c2) {
    return (lumdiff(hexdec(substr($c1,0,2)),
        hexdec(substr($c1,2,2)),hexdec(substr($c1,4,2)),
        hexdec(substr($c2,0,2)),hexdec(substr($c2,2,2)),
        hexdec(substr($c2,4,2))));
}

Die oben beschriebene Methode (AVG (rot, grün, blau)> 128) ist nicht wirklich gut.

Answer 10

private Color GetContrastingColor(Color color)
{
    int r = color.R > 0 ? 256 - color.R : 255;
    int g = color.G > 0 ? 256 - color.G : 255;
    int b = color.B > 0 ? 256 - color.B : 255;
    return System.Drawing.Color.FromArgb(r, g, b);
}

Answer 11

Durch @starblue

Hier ist C# Code, den ich verwende

 public static string GetContrastBlackOrWhiteColorAsHtmlColorCode(Color c)
        {
            System.Drawing.Color color = System.Drawing.ColorTranslator.FromHtml("transparent");

            try
            {
                if (c.R >= 128 && c.G >= 128 && c.B >= 128)
                {
                    return System.Drawing.ColorTranslator.ToHtml(Color.Black);
                }
                else
                {
                    return System.Drawing.ColorTranslator.ToHtml(Color.White);
                }
            }
            catch (Exception)
            {
            }

            return System.Drawing.ColorTranslator.ToHtml(color);
        }