Buon colore del testo in primo piano per un determinato colore di sfondo

Question

sto disegnando un pulsante di selezione del colore e sto cercando una formula piacevole e semplice per ottenere un buon colore del testo (in primo piano) per un determinato colore di sfondo in RGB.

Una semplice prova sarebbe di prendere solo il colore complemento, ma questo produrrà un pulsante di strano guardare in colori come il rosso puro blu o puro.
C'è qualcosa di ben noto che fa questo?

Se è importante a tutti, sto usando QT.

Answer 1

Per la massima leggibilità, si vuole contrasto massima luminosità senza entrare in tinte che non funzionano insieme. Il modo più coerente per farlo è quello di attaccare con nero o bianco per il colore del testo. Potreste essere in grado di venire con schemi più esteticamente gradevoli, ma nessuno di loro sarà più leggibile.

Per scegliere tra bianco o nero, è necessario conoscere la luminosità dello sfondo. Questo diventa un po 'più complicato, a causa di due fattori:

• La luminosità percepita del singoli primari rosso, verde e blu non sono identici. Il consiglio più veloce che posso dare è quello di utilizzare la formula tradizionale per convertire RGB a grigio - R * 0,299 + G * 0,587 + B * 0,114. Ci sono un sacco di altre formule.

• La curva di gamma applicata ai display rende il valore grigio medio superiore a quello che ci si aspetta. Questo è facilmente risolto usando 186 come valore centrale, piuttosto che 128. Niente di meno che 186 dovrebbe utilizzare il testo bianco, niente di più grande di 186 dovrebbe usare il testo nero.

Answer 2

Non sono un esperto di cose di programmazione relativi a RGB, ma dal punto di vista di un progettista, spesso il colore più leggibile sarà solo un molto più leggero (se il colore di sfondo è scuro) o più scura (se il colore di sfondo è chiaro) versione della stessa tonalità.

In sostanza che ci si prende i valori RGB e se sono più vicino a 0 (scuro) li ciascuno fino ci preme di un importo pari per il vostro colore di primo piano, o viceversa se si tratta di una luce BG.

i colori del complemento può effettivamente essere molto doloroso per gli occhi per una migliore leggibilità.

Answer 3

Sfruttare uno schema per la leggibilità

Se per "buon colore del testo (in primo piano)" si intendono per leggibilità scopi quando l'utente sceglie any background colour, si può sempre produrre il testo bianco con un contorno nero. Sarà leggibile su qualsiasi sfondo solido, fantasia o una sfumatura, dal nero attraverso il bianco e niente in mezzo.

Anche se questo non ha colpito il segno della vostra intenzione, credo che valga la pena postato qui perché mi è venuto in cerca di soluzioni simili.

Answer 4

Basandosi sulla cima della risposta di Marco, ecco qualche codice Ruby che farà il lavoro

rgbval = "8A23C0".hex
r = rgbval >> 16
g = (rgbval & 65280) >> 8
b = rgbval & 255
brightness = r*0.299 + g*0.587 + b*0.114
return (brightness > 160) ? "#000" : "#fff"

Answer 5

Si sta meglio con una grande differenza tra luminosità. In generale, sfondi colorati con testo colorato succhiare per migliorare la leggibilità, male gli occhi nel corso del tempo. Leggermente colori oscurati (per esempio in HSB, S ~ 10%, B> 90%) con il nero testo funzionano bene, o un testo leggermente colorato su uno sfondo nero. Mi piacerebbe stare lontano da colorare entrambi. testo scuro (b ~ 30%, s> 50%) con una colorazione sottile su uno sfondo bianco può anche andare bene. Giallo (ambra) testo su uno sfondo blu profondo ha un'ottima leggibilità, così come l'ambra o verde su nero. Questo è il motivo per cui i vecchi dumbterms (VT100, VT52, ecc) è andato per questi colori.

Se si ha realmente bisogno di fare colore-on-colore per il 'look', si potrebbe invertire sia H e B, mentre pinning saturazione a una moderata a basso livello.

E un'ultima nota: se si dispone di uno sfondo grigio al 50%, ripensare l'interfaccia. Si sta privando voi stessi della metà della vostra gamma dinamica! Stai alienarsi gli utenti di scarsa visibilità, tra cui chiunque oltre 35 ...

Answer 6

Combinazioni di colori spesso un aspetto terribile quando non è scelto con cura. Perché non usare bianco o nero per il testo, a seconda della luminosità del colore. (Necessario convertire al HSB prima.)

O lasciare all'utente di scegliere sia il testo nero o bianco.

In alternativa, utilizzare le combinazioni predefinite. Questo è quello che Google fa nel loro prodotto calendario.

Answer 7

Sono stato alla ricerca di una risposta simailr e sono imbattuto in questo post e alcuni altri che ho pensato di condividere. Secondo http://juicystudio.com/services/luminositycontrastratio.php#specify del " criterio di successo 1.4.3 del WCAG 2.0 richiede la presentazione visiva del testo e le immagini di testo ha un rapporto di contrasto di almeno 4.5: 1" con alcune eccezioni. Questo sito ti permette di mettere in primo piano e colori di sfondo per calcolare il loro contrasto, anche se sarebbe utile se sarebbe suggerire alternative o intervalli.

Uno dei migliori siti che ho trovato per la visualizzazione di contrasto di colore è http://colorizer.org/ E ' consente di regolare quasi tutti i tipi di scale di colori (RGB, CMYK, ecc) allo stesso tempo e poi si mostra il risultato sullo schermo, come ad esempio il testo bianco su uno sfondo giallo.

Answer 8

Io di solito guardo complementi di colori, hanno anche colore ruote complemento per aiutare

http://www.makart.com/resources/artclass/cwheel.html

Se il colore è HSL, capovolgere la tonalità di 180 gradi per un calcolo decente

Answer 9

I cosa che la conversione in HSV potrebbe essere il modo, ma IMO cambiando tonalità apparirebbe strano. Mi piacerebbe provare mantenendo la tonalità e giocherellare con il valore e magari di saturazione (pulsanti rossi leggeri con testo rosso scuro ... hm suoni spaventosi :-)).