24

Estou tentando melhorar um site existente, e é com isso que estou começando:

<body style='
        background-color: rgb(50,101,152);
        color: red;
        text-decoration-color: red;
        text-decoration-style: solid;
        font-size: 12px;
        font-weight: 700;
        font-family: "Bitstream Vera Sans", Verdana, Lucida, Arial, Helvetica, sans-serif;
        //text-shadow: 0px 0px 15px white;
    '>
    This is hard to read!
</body>

Acho que essa combinação de cores é difícil de ler. Outros discordam, mas concordamos que depende muito do contraste, brilho e outras propriedades da tela (até o ângulo de visão):

Eu já experimentou um pouco com -webkit-text-stroke, text-shadow(ver código acima), mas como eu melhorar as coisas em uma tela, fica pior em outro.

O que mais posso tentar tornar isso mais legível em uma variedade de telas, mantendo o esquema geral de cores?

color website-design color-theory

— bers
fonte

22

Sinta-se livre para mostrar este comentário ao seu cliente. Tenho muitos anos de experiência em design e posso garantir que os "outros" na sua pergunta acima, que pensam que são legíveis, estão completamente errados :) Todo o esquema deve ser alterado porque está quebrado além do reparo.

— mayersdesign

15

Tenho mais de 30 anos de experiência como designer ... Eu não poderia concordar mais com o comentário do @mayersdesign acima. esse esquema de cores deve ser imediatamente rejeitado.

— Scott

6

Primeiro, você deve entender o objetivo do seu esquema de cores. Em um esquema de cores para a interface do usuário, faz sentido usar cores neutras como cores primárias, todas as cores acentuadas devem ser exibidas com moderação . Pense no YouTube, por exemplo, que cor vem à sua mente? Vermelho e preto, mas dê uma olhada na página real do YouTube, com 98% de branco e cinza claro. O vermelho é usado apenas como sotaque.

— Happy Hour Coding

Obrigado a todos (incluindo os respondentes)! Eu apenas verifiquei duas vezes o SE para ver o que eu esperava ser 1 ou 2 comentários desde esta manhã, e agora isso. Aprendi muito e recebi alguns argumentos convincentes - obrigado!

— fers

1

1995 chamado. Eles querem o esquema de cores de volta.

— Mazura

54

Mude a mente do cliente.

Não há nada que possa corrigir o fato de que o texto em vermelho sobre fundo azul é uma opção extremamente ruim para legibilidade, porque o contraste é muito baixo e porque especificamente vermelho e azul funcionam mal como cores contrastantes.

Este site webaim.org mostra que o contraste entre suas duas cores é lamentável 1,52: 1

O contraste é importante para a legibilidade

O contraste do texto é um dos aspectos mais importantes da legibilidade do texto. Felizmente para nós, as Diretrizes de Acessibilidade para Conteúdo da Web (WCAG) 2.0 abordam especificamente o contraste de texto e fornecem diretrizes que, embora destinadas a fornecer acessibilidade da Web a pessoas com deficiência, também oferecem bons conselhos em geral.

O nível AA do WCAG requer uma taxa de contraste de pelo menos 4,5: 1 para texto normal e 3: 1 para texto grande e o nível AAA requer uma taxa de contraste de pelo menos 7: 1 para texto normal e 4,5: 1 para texto grande.

Portanto, o site de seus clientes está em contradição direta com as diretrizes profissionais publicadas . Também está em contradição com o gosto estético (na minha opinião profissional)

Você ainda pode usar elementos de vermelho e azul em um design, se necessário. Mas colocar o texto em vermelho do "tamanho do conteúdo" sobre um plano de fundo azul simplesmente afastará uma grande porcentagem dos visitantes do seu site. Na minha opinião, você tem uma responsabilidade profissional de convencer seu cliente a não usá-lo.

Esperamos que os links fornecidos possam ajudar a tornar seu caso de uma maneira mais robusta do que simplesmente argumentar que você acha difícil ler. Na verdade, é comprovadamente difícil de ler.

Chromostereopsis

Se isso não foi suficientemente convincente, tente o seguinte: a Chromostereopsis é (brevemente!) Uma ilusão de ótica que causa problemas de profundidade de campo para os telespectadores. É desagradável!

— mayersdesign
fonte

11

Para esclarecer, as taxas de contraste no documento W3C são mínimas . Não diga que a proporção deve estar entre 4,5: 1 ou 7: 1; eles dizem que deve ser pelo menos um deles, dependendo do nível de acessibilidade que você está segmentando.

— Adrian McCarthy

1

Muito bom, atualizei a resposta para incluir mais detalhes, especialmente este.

— mayersdesign

8

Embora de modo algum seja perfeito (ou até bom), adicionar um contorno branco (ou outro) ao texto pode ajudar na legibilidade:

Isso pode ser útil se o seu cliente insistir em manter as cores.

— Gremlin
fonte

Para ser justo, isso só funciona com o tipo 36pt.

— user8356 8/02

Sim, ótimo conceito. Não significa sarcasmo. E quanto mais você aplicá-lo, melhor podemos ler o texto. Portanto, leve os contornos brancos até a borda da tela ... Piscadela, piscadela.

— Martin Zaske

8

Você não pode. Esses tons de vermelho e azul são cores escuras e saturadas, eles praticamente vibram um contra o outro e esse texto fará os olhos das pessoas sangrarem. Qualquer desenvolvedor ou designer que não se importe com a legibilidade do texto deve sair da cidade em um trilho de rubi.

Tente deixar o vermelho MUITO mais claro. Ficará rosa, mas será mais legível. Ou use branco ou amarelo pálido nesse fundo. Fundos escuros são notoriamente difíceis de legibilidade. Você pode ter a mesma cor geral - um azul esverdeado - mas torná-la muito mais clara. Mas o texto em vermelho brilhante também nunca é fácil de ler, então eu descartaria esse esquema de cores para o texto.

— user8356
fonte

7

Como foi apontado, esse é um contraste de cores horrível . Também é uma paleta ruim para pessoas daltônicas (com daltonismo vermelho-azul, a taxa de contraste cai para algo bem próximo de 1: 1, o que é completamente ilegível).

Sua melhor aposta aqui será convencer o cliente de que ele não deve misturar texto e plano de fundo colorido. Colora o texto ou o plano de fundo, não os dois. Tente carregar um modelo em uma ferramenta que permita simular percepções daltônicas (você pode encontrar algumas opções decentes on-line) e mostre o resultado ao seu cliente, o que deve ajudar significativamente a convencê-los.

Se isso não for uma opção, outras coisas que você pode tentar melhorar a legibilidade incluem (observe que nenhuma delas resolve o problema de daltonismo, elas apenas ajudam no contraste ou na legibilidade geral:

Use uma fonte com espaçamento mono. Parece estúpido, mas isso realmente ajuda a maioria das pessoas a ler o texto com mais facilidade. Obviamente não é Courier New, mas o Bitstream Vera Sans Mono (ou mesmo algo como Droid Sans Mono) ainda deve parecer decente e será um pouco mais legível.
Faça o peso da fonte e provavelmente o tamanho também. Texto maior e em negrito é mais fácil de ler, independentemente do contraste.
Troque o esquema de cores (ou seja, torne o texto em azul escuro sobre um fundo vermelho brilhante). Parece simples, mas geralmente é mais fácil para a maioria das pessoas preparar azul escuro em vermelho brilhante do que o contrário.
Adicione um sombreamento estreito de alto contraste ao texto com um deslocamento. O que você deseja aqui não é uma mistura com o plano de fundo, é uma vantagem que fornece bom contraste. A compensação da sombra também pode ajudar com isso, especialmente um simples deslocamento diagonal. Eu também usaria preto aqui, em vez de branco (você deseja acentuar o texto, não o plano de fundo, portanto, opte por um alto contraste com o texto). No geral, algo nesse sentido text-shadow: 2px 2px 4px black;é provavelmente um ponto de partida decente.
Ilumine o vermelho significativamente. Agora você está usando rgb(255,0,0). Eu tentaria com algo como rgb(255,204,204)(ou possivelmente até mais leve) primeiro e me ajustaria a partir daí.
Escureça o azul. Algo mais próximo rgb(25,51,77)é sobre o mesmo tom, mas deve estar escuro o suficiente para tornar o texto mais legível.

Mais uma opção que também ajuda alguns com o problema de daltonismo:

Desaturar o plano de fundo azul. Embora não seja a melhor opção (distorce um pouco o esquema de cores), isso deve ajudar a facilitar a legibilidade de todas as outras coisas que listei, porque aumentará ativamente o contraste. Eu tentaria uma saturação cerca de 30% menor (ou seja rgb(82,102,122)) como ponto de partida.

— Austin Hemmelgarn
fonte

6

Se você já tentou a sombra do texto, acho que a única possibilidade de manter as mesmas cores é aumentar o tamanho do texto

<div> <span0>This is hard to read!</span></div><br>
<div> <span1>This is hard to read!</span></div><br>
<div> <span2>This is hard to read!</span></div><br>

Estilos

span0 {text-shadow: 0px 2px 1px black;
}

span1 {padding:0 4px;
background-color: rgba(255,255,255,0.25);
position:relative;
display:inline-block;
}

span2 {padding:0 4px;
background-color: rgba(0,0,0,0.35);
position:relative;
display:inline-block;
}

— Danielillo
fonte

1

Ou até mesmo um branco liso é melhor

— aloisdg diz Reinstate Monica

1

ainda é difícil ler para mim ..

— Happy Hour Coding

@Dylan o que você acha sobre jsfiddle.net/bersbers/xdkj76L3

— BERS

2

É legível. Não acho que seja uma boa ideia. Mas pode ser lido.

— Happy Hour Coding

blog.theteamw.com/2009/11/09/…

— yunzen

5

Você precisa ter uma taxa de contraste alta o suficiente entre o plano de fundo e o texto (objeto em primeiro plano) para que seja legível, com uma taxa de contraste mínima de 4,5: 1. https://www.oss-usa.com/color-check-ada-image-compliance mostra que seu plano de fundo e primeiro plano estão muito próximos para serem legíveis.

Às vezes, o cliente precisa saber que o esquema de cores não pode ser totalmente preservado e precisa ser revisado para atender aos requisitos de legibilidade. Obviamente, reverter o texto para uma cor clara daria contraste suficiente contra um fundo escuro.

— Max Tokman
fonte

3

"Como você torna o texto mais legível?" Em suma, você não! A combinação de cores não atende às diretrizes de acessibilidade da Web e não deve ser usada. Uma cor diferente de primeiro plano ou plano de fundo deve ser usada. Independentemente de qual seja seu público-alvo, você deve sempre procurar atender pessoas com deficiência visual, e essa é uma solução fácil.

As taxas de contraste para suas combinações de cores podem ser vistas aqui ... https://snook.ca/technical/colour_contrast/colour.html#fg=FF0000,bg=326598

— Andrew
fonte

2

(Não há pontos suficientes para comentar)

Você pode tentar adicionar um traço ao texto. Estou usando o termo "traço" no sentido do photoshop, basicamente a cor da borda / contorno do texto para servir como contraste. Preto / branco deve ser bom (especialmente se você brinca com a espessura do traço), mas imagino que certos tons de vermelho / azul também funcionem.

— allthemikeysaretaken
fonte

Como faço para tornar essa combinação de cores mais legível?

Mude a mente do cliente.