Come calcolare il colore di tipo migliore per un colore di sfondo casuale?

Potrei aver bisogno di presentare il contenuto a più livelli a seconda della distanza dell'osservatore da un display. Diciamo da molto lontano che l'utente percepisce un colore piatto, ma da vicino l'utente deve essere in grado di leggere del testo. La parte difficile è che viene dato il colore di sfondo piatto / può cambiare / non ho alcun controllo.

Finora ho creato un prototipo davvero semplice per elaborare il colore del testo dal colore di sfondo (fare clic per selezionare uno sfondo casuale). Questo è un approccio molto banale: prendo la tonalità e l'offset di 90 gradi (quindi è abbastanza diverso) e invertisco la luminosità nello spazio colore HSB in modo da ottenere un colore abbastanza diverso da essere leggibile / avere un discreto contrasto con lo sfondo .

Questo a volte funziona:

a volte no:

Questo approccio è buono / nella buona direzione? In tal caso, come posso migliorare? In caso contrario, quale direzione devo seguire?

Sfortunatamente non so molto sulla teoria dei tipi e dei colori, quindi eventuali suggerimenti / suggerimenti di persone con esperienza sono molto utili. Questo verrà visualizzato su uno schermo, non stampato.

Quali relazioni tra i colori di sfondo e di primo piano sto cercando?

La leggibilità riguarda il contrasto. Proverei a determinare quanto ogni colore di sfondo sia scuro in scala di grigi e se è sopra un grigio al 50% (più scuro della luce), usa il testo bianco, al di sotto del 50% usa il testo nero. Ciò assicurerà di avere almeno un contrasto del 50% (differenza di tono) per rendere leggibile il testo.

Questo metodo è molto più semplice che provare a giocare con colori complementari o invertendo e garantisce il massimo contrasto tonale su qualsiasi colore.

Qui la mia prima risposta essenzialmente alla stessa domanda a Game Development Stack Exchange.

Per riassumere, come suggeriscono le altre risposte qui, dovresti generalmente usare il bianco o il nero , a seconda di quale si contrappone meglio con lo sfondo. (Naturalmente, se lo desideri, dare a entrambi i colori una leggera sfumatura non influirà molto sul contrasto.)

Si noti che, per determinare correttamente quanto appare scuro o chiaro un colore all'utente, non è sufficiente fare una media dei valori di colore RGB (o prendere la luminosità / valore di un colore HSL / HSV). Piuttosto, devi tenere conto di (almeno) due effetti:

1. non linearità del dispositivo su cui viene visualizzato il colore , che (almeno per i colori RGB sugli schermi dei computer) tende a scurire i mezzitoni e

2. sensibilità spettrale dell'occhio umano , che, in termini approssimativi, fa apparire il colore vicino al centro dello spettro visibile (verde, giallo, ciano) più luminoso di quelli vicino ai bordi (blu, rosso, viola).

Il primo problema può essere giustificato dall'espansione gamma , mentre il secondo richiede semplicemente una ponderazione non uniforme dei canali di colore R / G / B. Metti insieme, ecco come calcolare approssimativamente la luminosità percepita di un colore RGB e decidere se il bianco o il nero contrasterebbe meglio con esso:

const float gamma = 2.2;
float L = 0.2126 * pow( R, gamma )
        + 0.7152 * pow( G, gamma )
        + 0.0722 * pow( B, gamma );

boolean use_black = ( L > 0.5 );

Questo presuppone che R, Ge Bsono numeri in virgola mobile compresi tra 0,0 e 1,0. Se hai ad esempio numeri interi da 0 a 255, convertili in float e dividili per 255.

Le costanti nel codice sopra sono (approssimativamente) corrette per l' input sRGB ; puoi regolarli se stai lavorando in qualche altro spazio colore, anche se i valori esatti non contano molto: per colori sufficientemente scuri o chiari la risposta sarà comunque la stessa, mentre i colori che cadono vicino al bordo contrastano comunque ugualmente bene con il bianco o il nero.

Sono d'accordo con John, mantieni il testo il più possibile in bianco e nero solo per essere sicuro, puoi anche aggiungere una piccola quantità di saturazione al testo e sei al sicuro. Ecco un piccolo test:

Visualizza qui al 100%: http://flavius.clickgarden.net/random-hsb-bg-readable-text/test-01.png Scarica qui il file .ai (sorgente) per giocare: http: // flavius. clickgarden.net/random-hsb-bg-readable-text/test.ai