Durante la progettazione di un sito Web, come faccio a sapere come gli utenti vedono i colori?

11

Durante la progettazione di un sito Web, come faccio a sapere come gli utenti vedono i colori? Vedo i colori del sito Web in modo diverso dal mio Macbook e dal desktop / notebook di Windows. Soprattutto non riesco a vedere i colori chiari sul desktop, ad esempio i bordi grigi dei tavoli sono invisibili.

Di chi dovrei preoccuparmi durante la progettazione? Sono in grado di rendere tutti gli schermi abbastanza simili con una soluzione di progettazione?

website-design color-conversion

— ahmet
fonte

Duplicato

— Vincent

1

E solo per aggiungere alla confusione, quasi il 10% delle persone è di colore, ma almeno con questo ci sono estensioni per Chrome che almeno ti permettono (supponendo che tu non lo sia) di vedere più o meno come sarà per qualcuno che è ...

— Rycochet,

... e a livello aziendale gamma / contrasto + altre impostazioni dello schermo possono essere ovunque nei monitor in una situazione di ufficio (client) quando configurate dall'IT che spesso utilizzano l'accesso remoto e le impostazioni di gruppo per controllare le reti di PC. Nella mia ultima azienda, l'IT si trovava in un altro paese con poca simpatia per il design: ho ottenuto l'accesso come amministratore e aggiunto il mio monitor e la mia configurazione! Lavorare secondo gli standard ed evitare gli estremi è l'approccio migliore osservando che alcuni clienti (come il governo) avranno un'accessibilità rigorosa - chiedilo in anticipo per evitare revisioni non necessarie

— Applefanboy,

23

Risposta breve: non lo fai.

Risposta più lunga: è letteralmente impossibile prendere in considerazione tutte le impostazioni dello schermo e le calibrazioni, le circostanze e le abilità visive (dis) degli spettatori. Ecco perché ci sono linee guida per, ad esempio, il contrasto del testo e del suo background, per garantire un certo grado di usabilità almeno nella maggior parte dei casi.

Il mio flusso di lavoro personale include almeno due monitor non calibrati e alcuni test su diversi dispositivi mobili in diverse situazioni di illuminazione.

Il W3C ha elaborato alcune linee guida sull'uso del colore e del contrasto necessario che puoi leggere qui . Personalmente, utilizzo questo strumento di contrasto per il testo di Lea Verou per verificare se i colori del mio testo obbediscono alle linee guida o sono almeno vicini.

— Vincent
fonte

8

Mi chiedo se la gente SE abbia letto quelle linee guida. Ho una buona visione, ma il contrasto tra lo sfondo e il colore di evidenziazione del collegamento su molti siti SE (incluso questo) è scarso.

— Barmar,

1

Vorrei poter votare questo più di una volta! Io stesso utilizzo un'estensione del browser per lettore oscuro, quindi non importa quanto sia bello il tuo sito, lo distruggerò completamente è solo per il gusto di avere ancora una vista decente quando ho cinquant'anni!

— PieBie

Secondo questo sito Web, webaim.org/resources/contrastchecker , il contrasto cromatico tra lo sfondo e i collegamenti non supera gli standard di accessibilità su questo sito SE. Quindi, probabilmente, è sicuro che la gente SE non legga queste linee guida.

— ESR,

2

Non lo fai e non puoi controllare o applicare le stesse impostazioni sul monitor / dispositivo di tutti. Il meglio che puoi fare è usare un profilo colore sRGB quando esporti immagini raster per il web.

sRGB è lo spazio colore standard mondiale per la riproduzione dei colori sul web.

Ciò contribuirà in una certa misura, ma alla fine le preferenze dell'utente decideranno come visualizzare le immagini sul proprio dispositivo. Ovviamente, questo è per le immagini raster, non altri elementi grafici in una pagina.

— Billy Kerr
fonte

E calibra i tuoi display su sRGB, quindi almeno i tuoi display stanno mostrando quello che dovrebbe essere

— joojaa

I commenti non sono per una discussione estesa; questa conversazione è stata spostata in chat .

— Vincent,

1

I browser e i computer moderni oggi raramente hanno problemi a visualizzare i colori corretti (vedere https://websafecolors.info/learn per alcune informazioni al riguardo).

Sembra che potrebbero essere i display stessi a far apparire i colori in modo diverso. Ciò potrebbe essere dovuto alla luminosità del monitor, al contrasto e alle impostazioni del livello di luce blu e persino alla tecnologia del monitor stesso come LED e tipo di pannello. Non è possibile applicare impostazioni coerenti su tutti i display o persino leggerne le impostazioni e regolare il sito Web.

Consiglierei di usare Inspect Element e guardare il codice esadecimale dei colori su ciascuna piattaforma. Se sono identici, allora sai che sono i display. La soluzione sarà quella di utilizzare i colori con più contrasto tra loro, in modo che abbiano maggiori possibilità di distinguersi su tutti gli schermi. In alternativa, prova bordi più spessi o persino tavoli imbottiti senza bordi! La maggior parte degli utenti ha schermi ad alta definizione che offrono molte possibilità per la progettazione di tabelle, che in genere utilizza testo e formattazione spessi pixel.

— LloydTao
fonte

0

La risposta è no, perché il colore del laptop e il colore del desktop non sono gli stessi per ogni computer. È possibile utilizzare il codice colore se si desidera assicurarsi che il colore sia lo stesso, ad esempio, è possibile digitare questo codice in CSS:

background-color: #D2B48C

— Sally_2891
fonte

2

Ciao Sally, ho corretto il carattere nella tua risposta, ma non so esattamente come questa sia una risposta alla domanda. Potresti elaborare?

— PieBie

Questo non risolve il problema reale. Il problema è che #D2B48C avrà un aspetto diverso su diversi monitor e la domanda è come risolverlo.

— pipe