Contraste e o tema claro do portfólio

O que é razão de contraste

É um número que compara a luminosidade de duas cores. Preto sobre branco é 21:1; o máximo. Cinza-claro sobre branco pode ser 1,5:1, praticamente ilegível.

A recomendação internacional (WCAG, nível AA):

Tipo de conteúdo	Mínimo
Texto normal	4.5:1
Texto grande (24px, ou 19px em negrito)	3:1
Ícone, borda de campo, gráfico	3:1

Por que isso é local

Quem abre o seu portfólio está, muitas vezes, com o celular na mão, do lado de fora, ao meio-dia. Uma tela que já não é a mais nova, com brilho no máximo e ainda assim lavada pela luz.

Naquela situação, um texto com contraste de 3:1 simplesmente não existe.

E há a versão específica do portfólio: quem vai abrir esse link muitas vezes é alguém decidindo se te chama para uma conversa, num intervalo, no celular, com pressa. Se a sua descrição não puder ser lida ali, ela não vai ser lida em outro lugar depois.

Medir

O jeito rápido: WebAIM Contrast Checker - cole as duas cores e ele dá o número.

O jeito integrado: nas ferramentas do navegador (F12), clicar num texto e abrir o seletor de cor mostra a razão de contraste com a cor de fundo.

A paleta que este curso montou, medida:

/* 18:1 - passa com folga */
color: #fbfbfb;
background: #0e1116;

/* 8:1 - passa: é o texto suave, o mínimo aceitável para ficha e legenda */
color: #a1a9b8;
background: #0e1116;

/* 3,1:1 - reprova: parece elegante e desaparece no sol */
color: #5b6270;
background: #0e1116;

O texto suave é onde quase todo portfólio escorrega: a ficha técnica, a legenda da imagem, a data e o rodapé costumam ficar num cinza escolhido por gosto. Meça os seus.

Por que o quase-preto

O fundo deste curso é #0e1116 e não #000, e o texto é #fbfbfb e não #fff. Não é preciosismo.

Preto puro com branco puro dá 21:1, e essa vibração cansa a vista em texto longo - é o efeito de olhar para um letreiro. Um quase-preto com um quase-branco dá 18:1, que é folga de sobra, e lê melhor por muito mais tempo.

Cor nunca informa sozinha

/* Ruim: quem não distingue as cores não vê diferença nenhuma */
.situacao--no-ar {
  color: #6ee7a5;
}
.situacao--arquivado {
  color: #a1a9b8;
}

<!-- Bom: a palavra informa, a cor reforça -->
<p class="situacao situacao--no-ar">No ar</p>
<p class="situacao situacao--arquivado">Arquivado</p>

A cor reforça a informação. Quem carrega a informação é o texto.

O mesmo vale para link dentro de parágrafo: se ele só se distingue por ser verde, quem não percebe a diferença de cor não vê que há um link ali. O sublinhado resolve - e é por isso que a aula 2 tirou o sublinhado só do menu.

E vale para o campo com erro do formulário de contato: borda vermelha sozinha não diz nada a quem não a distingue. A borda mais grossa ajuda; o texto do erro é o que resolve, e ele é trabalho de JavaScript.

O tema claro

Se o CSS usa variáveis, é isto:

:root {
  color-scheme: dark;

  --fundo: #0e1116;
  --superficie: #161b22;
  --superficie-alta: #1d232c;
  --tinta: #fbfbfb;
  --suave: #a1a9b8;
  --realce: #6ee7a5;
  --realce-tinta: #10161d;
  --borda: rgb(255 255 255 / 0.08);
  --borda-forte: rgb(255 255 255 / 0.16);
  --erro: #f0736a;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --fundo: #fcfcfd;
    --superficie: #f6f7f9;
    --superficie-alta: #ffffff;
    --tinta: #191c21;
    --suave: #5c6470;
    --realce: #10783f;
    --realce-tinta: #ffffff;
    --borda: rgb(20 24 30 / 0.1);
    --borda-forte: rgb(20 24 30 / 0.18);
    --erro: #b3261e;
  }
}

O resto do CSS não muda uma linha, desde que leia sempre var(--fundo) em vez de #0e1116.

O que muda no claro

Quatro coisas que surpreendem:

O realce precisa escurecer. O verde #6ee7a5 sobre o fundo escuro tem contraste de 12,3:1. O mesmo verde sobre #fcfcfd tem 1,5:1 - invisível. Por isso --realce recebe #10783f no bloco claro, que dá 5,4:1.

A tinta do realce inverte. No escuro, o texto sobre o botão verde é escuro; no claro, é branco. É o que a variável --realce-tinta existe para resolver - sem ela, você teria de reescrever a regra do botão.

A borda inverte. rgb(255 255 255 / 0.08) é uma borda branca translúcida: sobre fundo claro ela desaparece por completo. No claro, a borda é preta translúcida.

A sombra volta a funcionar. No escuro, sombra escura sobre fundo escuro é invisível, e quem separa as camadas é a superfície um pouco mais clara. No claro, uma sombra suave separa melhor que uma borda.

Escuro primeiro, e não claro primeiro

Repare na ordem: as variáveis escuras estão no :root, e as claras na media query. Podia ser o contrário.

A escolha é do portfólio: escuro é a aparência que a maior parte dos portfólios de quem programa tem, e é a que você vai ver ao trabalhar. Deixá-lo no :root significa que o tema que você mais olha é o que está escrito por extenso, e o outro é a exceção declarada.

O que não dá para fazer é ter um tema só e fingir que atende aos dois: color-scheme: dark sem o bloco claro é uma escolha legítima e explícita; esquecer o bloco claro é um defeito que só aparece no aparelho de outra pessoa.

A conferência das duas paletas

Antes de publicar, faça as duas voltas:

• --tinta sobre --fundo acima de 4,5:1 nos dois temas
• --suave sobre --fundo acima de 4,5:1 nos dois temas
• --suave sobre --superficie acima de 4,5:1 nos dois temas
• --realce sobre --fundo acima de 4,5:1 nos dois temas
• --realce-tinta sobre --realce acima de 4,5:1 nos dois temas
• a borda visível nos dois temas
• o anel de foco visível nos dois temas

A terceira linha é a que mais falha: uma cor que passa sobre o fundo pode reprovar sobre a superfície do cartão, que é mais clara.

No portfólio

O tema claro entra, e a paleta é conferida:

• o bloco @media (prefers-color-scheme: light) completo, na seção 6 da folha;
• color-scheme declarado nos dois blocos;
• as sete medições da lista acima, feitas e anotadas;
• nenhuma informação transmitida só por cor - confira o selo de situação, os links dentro do texto e o campo com erro;
• nenhuma cor escrita fora do :root - procure # na folha e conte.

Depois alterne o tema do sistema com o portfólio aberto. As seis páginas devem trocar por inteiro, sem nenhuma mancha clara no escuro nem escura no claro.

Exercícios

1. Meça o contraste da sua tinta, do seu texto suave e do seu realce, nos dois temas. Anote os seis números.
2. Meça o texto suave sobre a superfície do cartão. Passou?
3. Escreva o bloco de tema claro e alterne a preferência do sistema.
4. Troque o realce claro pelo escuro de propósito e olhe a página. Dá para ler?
5. Procure algum lugar do portfólio em que só a cor informa alguma coisa, e acrescente texto.
6. Abra o portfólio no celular, do lado de fora, ao sol, nos dois temas. Anote o que não deu para ler.

Referências

• Contraste de cor - WCAG - a norma, com os números
• Contrast Checker - WebAIM - a ferramenta
• prefers-color-scheme - MDN - a media query do tema