Ao criar um site, como sei como os usuários veem as cores?


11

Ao criar um site, como sei como os usuários veem as cores? Eu vejo as cores do site de maneira diferente do meu Macbook e Windows desktop / notebook. Especialmente, não vejo cores claras na área de trabalho, por exemplo, as bordas cinzas das mesas são invisíveis.

Com quem devo me preocupar ao projetar? Sou capaz de tornar todas as telas bastante semelhantes a uma solução de design?


Duplicado relacionado e possível: graphicdesign.stackexchange.com/questions/94401/...
Vincent

1
E só para aumentar a confusão, quase 10% das pessoas são cegas em cores - mas pelo menos com isso existem extensões para o Chrome que permitem que você (suponha que não seja) veja mais ou menos como será para alguém que é ...
Rycochet

... e no nível empresarial gama / contraste + outras configurações de tela podem estar em todos os lugares nos monitores em uma situação de escritório (seu cliente) quando configuradas pela TI, que costuma usar acesso remoto e configurações de grupo para controlar redes de PC. Na minha última empresa, a TI estava em um país diferente, com pouca simpatia pelo design - obtive acesso de administrador e adicionei meu próprio monitor e configuração! Trabalho com os padrões e evitar extremos é a melhor abordagem observando que alguns clientes (como o governo) terão acesso restrito - pergunte nesta frente até para evitar revisões desnecessárias
Applefanboy

Respostas:


23

Resposta curta: você não.

Resposta mais longa: é literalmente impossível levar em consideração todas as configurações e calibrações da tela, circunstâncias e (des) habilidades visuais dos espectadores. É por isso que existem diretrizes para, por exemplo, contraste de texto e de fundo, para garantir alguma usabilidade em pelo menos a maioria dos casos.

Meu fluxo de trabalho pessoal inclui pelo menos dois monitores não calibrados e alguns testes em diferentes dispositivos móveis em diferentes situações de iluminação.

O W3C fez algumas diretrizes sobre o uso da cor e o contraste necessário, que você pode ler aqui . Pessoalmente, uso essa ferramenta de contraste para o texto de Lea Verou para verificar se minhas cores de texto obedecem às diretrizes ou estão pelo menos próximas.


8
Gostaria de saber se o pessoal do SE leu essas orientações. Eu tenho uma visão muito boa, mas o contraste entre o plano de fundo e o link destaca a cor em muitos sites do SE (incluindo este) é fraco.
Barmar

1
Eu gostaria de poder votar isso mais de uma vez! Eu mesmo uso uma extensão de navegador de leitor escuro, portanto, não importa o quão bonito seja o seu site, destruirei totalmente é apenas por ter uma visão decente quando tiver cinquenta anos!
PieBie

De acordo com este site, webaim.org/resources/contrastchecker , o contraste de cores entre o plano de fundo e os links falha nos padrões de acessibilidade neste site SE. Então, provavelmente, é seguro assumir que o pessoal do SE não lê essas orientações.
ESR

2

Você não o faz e não pode controlar ou impor as mesmas configurações no monitor / dispositivo de todos. O melhor que você pode fazer é usar um perfil de cores sRGB ao exportar imagens rasterizadas para a web.

O sRGB é o espaço de cores padrão mundial para reprodução de cores na web.

Isso ajudará até certo ponto, mas, em última análise, as preferências do usuário decidirão como as imagens são visualizadas no dispositivo. Obviamente, isso é para imagens rasterizadas, não para outros elementos gráficos em uma página.


E calibrar suas exposições a sRGB, para que pelo menos seus monitores estão mostrando o que é suposto ser
joojaa

Comentários não são para discussão prolongada; esta conversa foi movida para o bate-papo .
Vincent Vincent

1

Hoje, navegadores e computadores modernos raramente têm problemas para exibir as cores corretas (consulte https://websafecolors.info/learn para obter mais informações sobre isso).

Parece que podem ser os próprios displays que fazem as cores parecerem diferentes. Isso pode ocorrer devido às configurações de brilho, contraste e nível de luz azul do monitor, e até mesmo à própria tecnologia do monitor, como LED e tipo de painel. Não há como impor configurações consistentes em todos os monitores, ou mesmo ler suas configurações e ajustar o site.

Eu recomendaria usar o Inspecionar elemento e observar o código hexadecimal das cores em cada plataforma. Se eles são idênticos, então você sabe que são os displays. A solução será usar cores com mais contraste entre si, para que tenham maior chance de se destacar em todas as telas. Como alternativa, experimente bordas mais grossas ou até mesas acolchoadas sem bordas! A maioria dos usuários possui telas de alta definição, o que abre muitas possibilidades para o design de tabelas, que normalmente usa texto e formatação com espessura de pixel.


0

A resposta é não, porque as cores do laptop e da área de trabalho não são iguais para cada computador. Você pode usar o código de cores se quiser ter certeza de que a cor é a mesma, por exemplo, você pode digitar este código em css:

background-color: #D2B48C

2
Olá Sally, Corrigi a fonte na sua resposta, mas não sei exatamente como isso é uma resposta para a pergunta. Você poderia elaborar?
PieBie

Isso não resolve o problema real. O problema é que #D2B48C será diferente em monitores diferentes, e a questão é como resolver isso.
pipe
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.