Cor e unidades

Texto cinza-claro #bbbbbb sobre branco tem razão de contraste de 1.92 para 1. A WCAG pede pelo menos 4.5 para 1 em texto normal.

Jeitos de escrever uma cor

O CSS aceita cores em várias notações, e todas acabam virando a mesma coisa: quantidades de luz vermelha, verde e azul na tela. Cores com nome, como red, navy ou rebeccapurple, são fáceis de ler, mas limitadas. A notação hex escreve vermelho, verde e azul com dois dígitos hexadecimais cada, de 00 a ff (0 a 255): #1a5fb4 é 26 de vermelho, 95 de verde e 180 de azul, um azul médio. rgb(26 95 180) diz a mesma coisa em decimal. hsl(210 80% 40%) descreve uma cor pelo matiz (um ângulo no círculo cromático, em que 0 é vermelho, 120 verde e 240 azul), pela saturação e pela luminosidade, o que facilita obter um tom mais claro ou mais escuro do mesmo matiz mudando um só número.

color: navy;
color: #1a5fb4;              /* same as #1A5FB4 */
color: #36c;                 /* short form of #3366cc */
color: rgb(26 95 180);
color: rgb(26 95 180 / 50%); /* half transparent */
color: hsl(210 80% 40%);
background-color: transparent;

Um quarto valor, depois de uma barra, define o canal alfa: rgb(0 0 0 / 50%) é preto com metade da opacidade, então o que está atrás aparece. color define a cor do texto, background-color o preenchimento atrás do elemento e border-color a borda. A palavra-chave currentColor significa a cor do texto do elemento, o que é útil para ícones e bordas que devem combinar com o texto.

Contraste não é opcional

Texto com luminosidade muito parecida com a do fundo é difícil de ler para muita gente: pessoas com baixa visão, leitores mais velhos e qualquer um lendo o celular no sol. A WCAG 2.2, as diretrizes de acessibilidade do W3C, mede isso como uma razão de contraste que vai de 1 para 1 (nenhuma diferença) a 21 para 1 (preto sobre branco). O critério de sucesso 1.4.3 pede pelo menos 4.5 para 1 em texto normal e 3 para 1 em texto grande, que a WCAG define como pelo menos 18 pontos, ou 14 pontos em negrito. O cinza-escuro #767676 sobre branco passa por pouco, com 4.54 para 1; #777777 falha por pouco, com 4.48. As ferramentas de desenvolvedor do navegador mostram a razão quando você inspeciona um elemento de texto, então não é preciso adivinhar.

A cor também nunca deve ser o único jeito de mostrar uma informação. Um formulário que marca erros só deixando a borda vermelha exclui quem não enxerga bem o vermelho; acrescente também uma mensagem ou um ícone.

Unidades absolutas e relativas

Comprimentos precisam de unidade, exceto o zero. px é o pixel CSS, uma unidade fixa; em telas de alta densidade um pixel CSS cobre vários pixels físicos, então ele continua com mais ou menos o mesmo tamanho para o olho. Unidades relativas acompanham outra coisa. em é relativo ao tamanho da fonte do próprio elemento, então padding: 0.5em num texto de 20 pixels dá 10 pixels. rem é relativo ao tamanho da fonte da raiz (html), que é 16 pixels nos navegadores, a não ser que o leitor tenha mudado, então 1.25rem normalmente dá 20 pixels. % é relativo ao pai, em geral à largura dele. vw e vh são centésimos da largura e da altura da viewport, e ch é mais ou menos a largura do algarismo zero na fonte atual.

Qual usar? Dimensionar o texto em rem respeita o leitor: se alguém configura o navegador para letras maiores, tudo o que está em rem cresce junto, enquanto um texto fixo em px pode não crescer. Padding em em cresce com o texto que envolve. Pixels servem para o que não deve mudar de escala, como uma borda de 1 pixel.