Scegli a livello di codice colori ad alto contrasto

Question

Questa dovrebbe essere una domanda semplice, ma non sono stato in grado di trovare un modo per farlo funzionare.

Essenzialmente, ho una pagina localhost sciocca che uso nel mio sviluppo web. Quando sto navigando tra il nostro server di sviluppo e la mia versione locale del codice C # (reindirizzato dall'URL di dev tramite il file host), a volte sono stato dimenticato di dimenticare ciò che 'dev.foo.com' indica - locale o server.

Quindi ho creato una pagina che verrà eseguita localmente come pagina predefinita della mia pagina Web predefinita, in modo da poter identificare facilmente il mio localhost dal server.

Questa pagina fa molte cose a caso (inclusa la generazione delle statistiche iniziali di un personaggio per D & amp; D), inclusa l'impostazione di un colore di sfondo casuale. Lo faccio generando 3 numeri casuali tra 0 e 255 e impostandoli come valore RGB per il colore di sfondo del corpo in CSS.

Dati i 3 pollici R, G e B, come posso determinare R2, G2 e B2 in modo tale che il secondo colore abbia un contrasto elevato con il primo? Mi piace avere la pagina con colori di sfondo casuali (mi impedisce di abituarmi all'aspetto della landing page) ma mi piace anche essere in grado di leggere il testo.

Answer 1

È necessaria una differenza di luminosità affinché il testo sia leggibile, poiché la visione dei colori stessa ha una risoluzione troppo bassa.

Quindi come algoritmo suggerirei quanto segue:

• Scegli un colore di sfondo casuale.

• Quindi decidi se si tratta di un colore chiaro o scuro. Ad esempio, è possibile verificare se la media dei tre colori primari è maggiore o uguale a 128.

• Per un colore chiaro usa il testo nero, per un testo bianco scuro.

Answer 2

" Contrast " è una parola caricata. Se ti interessa solo essere in grado di leggere il testo, un modo semplice è quello di lavorare in uno spazio cromatico basato sulla luminanza come HSL e scegliere i colori di primo piano e di sfondo con grandi differenze di luminanza.

La conversione tra HSL e RGB è ben nota - vedi Wikipedia per i dettagli.

Se stai parlando del contrasto cromatico effettivo, non è così semplice (ci sono molti fattori percettivi che, per quanto ne so, non sono stati ridotti a un singolo spazio cromatico), ma sospetto che non ti serva quel livello di raffinatezza.

Answer 3

Dai un'occhiata a questa soluzione PHP: Calcolo del contrasto di colore con PHP di Andreas Gohr. Naturalmente può essere portato in qualsiasi lingua.

Ha anche una bella dimostrazione del suo analizzatore di contrasto in cui è possibile trovare alcuni livelli minimi di contrasto con cui lavorare.

Answer 4

Puoi usare il metodo GetBrightness () sulla classe Color . Restituisce un valore float da 0,0 (luminosità del nero) a 1,0 (bianco). Una soluzione semplice sarebbe:

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

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

Answer 5

Ho fatto qualcosa del genere in un'applicazione Palm OS. Questo è quello che mi è venuto in mente. Non ti dà "alto contrasto" colori ma ti dà un colore di sfondo abbastanza diverso dal colore del testo per essere abbastanza leggibile:

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

Potrebbe non essere necessario utilizzare il nero come caso speciale per i tuoi scopi: la gestione del colore di Palm è un po 'funky (colore a 16 bit).

Answer 6

Ci sono alcune buone risorse (e algoritmi) per affrontarlo su http://juicystudio.com/ Articolo / luminositycontrastratioalgorithm.php

Answer 7

Queste risposte suggeriscono più o meno di usare una delle due o tre scelte di colore in base al colore chiaro o scuro.

Uso un approccio un po 'diverso e ha funzionato elegantemente nel mio caso. Ecco l'implementazione.

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

È semplice e meraviglioso.

Answer 8

Se capovolgi tutti i bit, otterrai "opposto" colore che sarebbe abbastanza buono contrasto.

Credo che sia l'operatore ~ ??in C #:

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

Answer 9

Per un miglior contrasto, utilizzare questo codice

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

Il metodo sopra (AVG (rosso, verde, blu) > 128) non è davvero buono.

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

Grazie a @starblue !

Ecco il C # codice che uso

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