Usar cor sem perder informação

Neste capítulo você vai conferir texto, links e avisos sem depender apenas de cor. O objetivo é terminar uma tarefa pequena e conferir seu resultado no Mirante do Mucuripe.

Seu ponto de partida

Estude depois do capítulo 06. Retome a referência se uma experiência anterior ficou alterada. Use o exemplo 07-cor-contraste do pacote anexo e copie inicio/ para uma pasta de prática fora do original. A raiz do exemplo é a referência completa desta etapa. Você não precisa copiar arquivos da etapa anterior.

Abra index.html da sua cópia no navegador e o mesmo arquivo num editor de texto simples. Para mídia, ferramenta de conferência e JSON, use o teste HTTP local explicado no README. Abrir ou testar não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Anote sua previsão antes de salvar e recarregar. Compare o resultado e investigue o erro antes de avançar. Ao terminar cada experiência, restaure somente a mudança indicada, para que a próxima parta dos valores da referência. Você pode parar depois de uma lição.

Contraste compara texto e fundo

Contraste depende da combinação entre primeiro plano e fundo. Uma cor isolada não é legível ou ilegível em todas as situações. Para texto normal, 4,5:1 é a referência de contraste usada aqui. Texto grande e controles têm critérios próprios. Use uma ferramenta de contraste com os dois valores e confira também o resultado na página. Não aprove uma combinação apenas porque parece elegante em seu monitor. A referência combina texto escuro com superfícies claras e não coloca texto pequeno sobre uma fotografia variável.

Faça na sua cópia

Compare o texto body e seu fundo na folha. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

body { background: #fbf8f0; color: #173d40; }

Mude uma coisa e preveja

Numa cópia, troque somente a cor do texto por #d5ddd5.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A leitura fica mais difícil sobre o fundo claro. A experiência mostra o problema; restaure #173d40.

Se não acontecer

Não mude o fundo ao mesmo tempo. Compare o par e registre os valores para separar as causas.

Um link precisa ser reconhecível

O link tem sublinhado, além de uma cor própria. Text-underline-offset cria um pequeno afastamento para facilitar a leitura. Se você retirar o sublinhado e usar uma cor muito próxima do texto, o link pode ficar difícil de identificar antes de receber foco. Estados de foco e hover ajudam na interação, mas não devem ser o único sinal de que existe uma ação. Leia o nome do link: Agenda informa seu destino; Clique aqui isolado não explica para onde leva.

Faça na sua cópia

Confira a regra a e os textos do menu. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

a { color: #175b65; text-underline-offset: .2em; }

Mude uma coisa e preveja

Troque somente o texto do link Agenda por Ver a agenda de prática.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O destino continua o mesmo e o nome fica mais descritivo. O sublinhado ainda identifica o link.

Se não acontecer

Confira href se o destino mudar. Não transforme o link num span para conseguir a aparência desejada.

Aviso precisa dizer o que significa

A frase Espaço cultural fictício em Fortaleza usa texto explícito, peso de fonte e cor. Mesmo sem perceber essa cor, o aluno recebe a informação. O mesmo vale para uma futura mensagem de erro: descreva o problema e a forma de seguir, em vez de desenhar apenas um campo vermelho. Uma atividade fictícia não deve parecer uma reserva real. Escrever o significado evita depender de um símbolo que cada pessoa talvez interprete de outra maneira. A cor reforça a mensagem; o texto entrega seu conteúdo.

Faça na sua cópia

Confira o aviso no cabeçalho. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

<p class="ficticio">Espaço cultural fictício em Fortaleza.</p>

Mude uma coisa e preveja

Troque somente a cor .ficticio pela mesma cor do texto principal.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O aviso continua compreensível porque a frase diz o que a página representa. Restaure a referência depois.

Se não acontecer

Se o significado desapareceu, confira se você alterou ou retirou o texto, e não apenas a cor.

A captura mostra uma parte da referência. Abra o exemplo para conferir a página inteira. Uma experiência temporária pode produzir outra aparência; restaure os valores antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia da base. Tente primeiro; depois compare seus resultados com os comentários.

1. Registre primeiro plano e fundo de um texto e compare uma combinação ruim.

2. Explique como reconhecer um link sem passar o mouse.

3. Reescreva um aviso fictício mantendo seu significado explícito.

Respostas comentadas

Compare o que você previu com o que observou. Uma solução diferente pode funcionar se mantiver o conteúdo e a tarefa acessíveis.

1. Compare o par de cores. Um valor claro sobre superfície clara pode diminuir bastante o contraste; restaure o par aprovado.

2. Sublinhado e texto descritivo permitem reconhecer o link antes de hover. Foco visível ajuda durante a navegação.

3. Diga no texto que é uma prática sem inscrição real. Um aviso só por cor não comunica esse recorte a todos.

Quando seguir

Você compara cores em contexto e mantém links e avisos compreensíveis sem depender da cor. Se ainda houver dúvida, repita somente a experiência que precisa esclarecer.

O arquivo completo

Referência do exemplo 07-cor-contraste, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!doctype html>
<html lang="pt-BR">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mirante do Mucuripe | Prática de front-end</title><link rel="stylesheet" href="assets/styles.css"></head>
<body><a class="pular" href="#conteudo">Pular para o conteúdo</a>
<header><p>Um pouco além do Webdev</p><h1>Mirante do Mucuripe</h1><p class="ficticio">Espaço cultural fictício em Fortaleza.</p>
<nav aria-label="Nesta página"><a href="#sobre">Sobre</a><a href="#agenda">Agenda</a><a href="#visitar">Orientações</a></nav></header>
<main id="conteudo" tabindex="-1"><section class="hero" aria-labelledby="sobre"><h2 id="sobre">Um lugar para aprender e criar</h2><p class="selo">Projeto fictício</p><p>O Mirante do Mucuripe reúne leitura, oficinas e conversas em Fortaleza.</p><p>Esta página é uma prática de curso. Não representa um espaço real.</p></section><section aria-labelledby="agenda"><h2 id="agenda">Agenda de prática</h2><p>Horários inventados, sem reserva ou inscrição real.</p><div class="cards"><article class="card"><h3>Leitura às 10h</h3><p>Escolha um texto curto e converse sobre ele.</p></article><article class="card"><h3>Oficina às 14h</h3><p>Experimente uma mudança pequena no seu projeto.</p></article></div></section><section aria-labelledby="visitar"><h2 id="visitar">Antes de visitar</h2><p>Local fictício em Fortaleza. A descrição é apenas um exercício, sem endereço real.</p><ul><li>Leia o horário na agenda.</li><li>Confira a descrição da atividade.</li></ul></section></main><footer><p>Mirante do Mucuripe. Conteúdo fictício para estudo.</p></footer>
</body></html>