Cor e design
O design começa aqui pela cor: como o olho transforma a luz em cor, como uma tela a escreve com três números e como verificar se um texto continua legível.
Sete unidades sobre um sólido de cores
Por enquanto a matéria tem um só curso, Teoria das cores, com sete unidades. A primeira explica como vemos as cores. As duas seguintes tratam do RGB com os códigos hex e depois de matiz, saturação e luminosidade. A quarta monta harmonias de cores, a quinta compara a mistura de luz com a mistura de tinta, e as duas últimas tratam do contraste e do uso da cor num design real. Quase todas as unidades usam o mesmo modelo, que você pode girar com o mouse: um cubo RGB de 512 bloquinhos, ou as mesmas cores reorganizadas num cilindro HSL. Clique num ponto e o painel abaixo mostra o código hex, os valores HSL, as cores em harmonia e a razão de contraste com o fundo que você escolher.
Cones, prismas e o cubo RGB
Uma maçã vermelha não tem vermelho nenhum. Ela absorve os comprimentos de onda curtos e médios da luz do sol e devolve os longos. A retina tem cerca de 6 milhões de cones de três tipos, e a cor surge quando o cérebro os compara. Por isso uma luz amarela pura e uma mistura de luz vermelha e verde podem parecer idênticas. Newton decompôs a luz do sol com prismas na década de 1660 e desenhou um dos primeiros círculos cromáticos em Opticks, em 1704. Na web cada canal vai de 0 a 255, então rgb(0 0 0) é o preto e rgb(255 255 255) é o branco. Um código hex é formado por três pares de dígitos em base 16: em #2273c3, o par c3 vale 12 × 16 + 3 = 195.
Ângulos no círculo de matizes
O HSL coloca o matiz como um ângulo: 0deg é vermelho, 120deg verde e 240deg azul. Com 0% de saturação o matiz não faz diferença, e 50% de luminosidade dá a versão mais viva de cada matiz. Esse modelo tem um limite, e isso é dito com franqueza: amarelo e azul com a mesma luminosidade de 50% têm luminâncias de 0.9278 e 0.0722. Quando as cores estão no círculo, uma harmonia é um conjunto de ângulos. Matizes complementares ficam a 180 graus um do outro, uma tríade são três matizes separados por 120 graus e um esquema de complementares divididas usa 150 e 210 graus. Atenção a uma diferença: o círculo da luz coloca o azul diante do amarelo, enquanto o círculo do pintor o coloca diante do laranja. As tintas funcionam ao contrário da luz: o ciano remove o vermelho, o magenta remove o verde e o amarelo remove o azul. As gráficas acrescentam preto porque as tintas reais dão um marrom sujo.
A razão que decide a legibilidade
A legibilidade de um texto se mede, não se julga a olho. A luminância relativa das WCAG pondera os canais linearizados com 0.2126 para o vermelho, 0.7152 para o verde e 0.0722 para o azul, e a razão de contraste é (L1 + 0.05) / (L2 + 0.05), que vai de 1:1 a 21:1. O nível AA exige 4.5:1 para o texto comum e 3:1 para texto grande e partes da interface; o AAA exige 7:1. O cinza #767676 sobre branco chega a 4.54:1 e passa, enquanto o vermelho #ff0000 chega a 4.00:1 e não passa para texto comum. A última unidade acrescenta o critério 1.4.1 das WCAG: a cor nunca deve ser a única forma de transmitir uma informação, já que o daltonismo para vermelho e verde atinge cerca de 8% dos homens. Planeje primeiro os degraus de luminosidade e depois os matizes; no modelo, o laranja da marca e o azul complementar chegam a apenas 1.06:1.
Perguntas sobre esta matéria
O que significam os números de uma cor RGB?
Eles definem os canais vermelho, verde e azul, normalmente de zero a 255 no código web. Zero desliga e 255 liga totalmente: todos zerados dão preto e todos em 255 dão branco. A cor hexadecimal registra os mesmos três canais em três pares de algarismos de base dezesseis, não usa outras cores. Teoria das cores
Por que duas cores HSL com a mesma luminosidade parecem ter brilhos diferentes?
A luminosidade HSL é coordenada de um modelo, não medida direta do brilho percebido. Amarelo e azul totalmente saturados têm luminosidade de cinquenta por cento, mas amarelo parece muito mais claro. As luminâncias relativas WCAG são 0.9278 e 0.0722, respectivamente: igualar HSL não garante contraste suficiente entre texto e fundo. Teoria das cores
Por que mudar o matiz não faz nada com saturação zero?
Com saturação zero, a cor está no eixo cinza do HSL. O matiz não a afeta: ângulos vermelho e ciano com luminosidade de cinquenta por cento dão o mesmo cinza. A luminosidade ainda importa: zero por cento dá preto e cem por cento branco, independentemente do ângulo escolhido no círculo. Teoria das cores
Por que impressoras acrescentam tinta preta em vez de misturar três cores?
Tintas reais ciano, magenta e amarela são filtros imperfeitos: misturadas podem dar marrom escuro sujo, não preto limpo. Imprimir três camadas só para texto preto também é lento e úmido. CMYK acrescenta tinta preta separada; tinta de pintura é ainda mais complexa porque pigmentos espalham e absorvem luz. Teoria das cores
Que contraste o texto normal precisa para WCAG AA?
Texto normal precisa de pelo menos 4.5:1; texto grande que atende aos critérios, 3:1. A razão compara luminâncias relativas do primeiro plano e fundo, não só matizes. Vermelho #ff0000 no branco dá 4.00:1: passa para texto grande, mas falha para normal, embora pareça uma escolha forte e viva. Teoria das cores