Miniaturas e daltonismo

De quem estamos falando, e por que a miniatura é o caso difícil

O daltonismo vermelho-verde é o comum: costuma ser citado em torno de 8% dos homens e 0,5% das mulheres de origem norte-europeia, em duas formas — deuteranopia, a do verde, e protanopia, a do vermelho. São as duas que eu simulei. Todo o resto é raro o bastante para virar nota de pé de página, e ganha uma no fim.

A miniatura é o caso difícil porque não tem mais nada para segurar. Um gráfico com legenda de cor tem rótulo; um site tem texto. A miniatura tem uma imagem só, de 336 pixels de largura, do lado de um título que descreve o vídeo e não a imagem. Se duas áreas dela param de ser distinguíveis, o desenho simplesmente perdeu uma fronteira, sem nada para substituir.

O que muda e o que não muda

É a parte que vale medir primeiro, porque decide todo o resto. Rodei a simulação padrão de dicromacia nas 660 miniaturas dos pacotes desta ferramenta e comparei cada imagem com ela mesma.

O brilho geral da imagem quase não se move: a mudança mediana da luminância relativa média é 0,59% na deuteranopia e 1,11% na protanopia. O que colapsa é a diferença entre tons. Vermelho puro, rgb(255,0,0), sai como rgb(147,147,0), um amarelo apagado. Verde forte, rgb(0,200,0), sai como rgb(171,171,30). Esses dois são a mesma cor, diferindo só no brilho. Branco continua branco exatamente.

Então a forma útil de pensar não é que as cores pioram. É que o eixo do tom é apagado e o eixo do brilho fica intacto. Qualquer separação que você construiu com tom se foi; qualquer separação construída com brilho está intocada.

Cores saturadas isoladas podem mudar de brilho — esse mesmo vermelho puro sobe de 0,213 para 0,271 de luminância relativa na deuteranopia e cai para 0,104 na protanopia. É a imagem como um todo que fica parada, porque a maior parte de uma foto não é totalmente saturada.

Como eu medi

A simulação é a aproximação linear de Viénot, Brettel e Mollon (1999): converter sRGB para linear, depois para a resposta dos cones LMS, projetar o cone que falta no plano que o dicromata vê, e voltar. É o método padrão atrás da maioria dos simuladores de daltonismo, e a fraqueza conhecida dele é a tritanopia — por isso este guia não afirma nada sobre ela.

Para cada miniatura peguei as duas famílias de tom dominantes — as duas fatias de 30° entre doze com maior peso ponderado pela saturação, as duas acima de 10% — e medi duas coisas nesse par. A razão de contraste WCAG entre as cores médias delas, que é medida de brilho puro, e a distância entre essas duas cores em sRGB antes e depois da simulação.

586 das 660 miniaturas têm dois tons dominantes acima do corte de 10%. São essas que os números abaixo descrevem.

Quanto brilho separa duas cores numa miniatura real

A distribuição é o achado. É a razão de contraste entre as duas cores dominantes da mesma miniatura, nas 586 que têm par mensurável.

A mediana é 1,57:1. Para referência, a WCAG pede 4,5:1 para texto de leitura e 3:1 para objetos gráficos — limiares escritos para interface e não para fotografia, então aqui são régua e não regra. Só 2% dessas miniaturas alcançam o primeiro e 9% o segundo.

Ou seja: quatro em dez se apoiam só no tom

267 dos 586 pares — 46% deles, 40% de todas as miniaturas medidas — separam as duas cores principais com menos de 1,5:1 de contraste de brilho. O que mantém essas duas áreas separadas, na maior parte, não é brilho; é tom; e tom é exatamente a parte que não chega para um dicromata vermelho-verde.

A simulação confirma direto: em todos os pares a distância entre as duas cores cai uma mediana de 9%, e dentro do grupo de brilho baixo cai 19%. Os pares que já começavam com menos contraste de brilho são justamente os que perdem mais do que tinham.

E é a mesma decisão de design que falha por outro motivo no tamanho de entrega. Uma fronteira feita de tom e não de brilho é também a fronteira que se dissolve quando o arquivo é recodificado para 336 pixels de largura, como medido no guia sobre miniaturas borradas. Dois jeitos de falhar, uma causa, um conserto.

O aviso de vermelho no verde mira no problema errado

A dica padrão de acessibilidade para daltonismo é não colocar vermelho do lado de verde. Medida em miniaturas reais, essa combinação é rara: 13 de 660, 2%, têm uma família vermelha e uma verde como os dois tons dominantes.

Quando acontece é ruim — esses pares perdem uma mediana de 35% da distância entre si, o pior de todos os grupos aqui, e 10 dos 13 também têm menos de 2:1 de contraste de brilho. Então a dica não está errada. Ela é só estreita: descreve 2% das miniaturas, enquanto a versão geral do mesmo problema — dois tons quaisquer separados por quase nada de brilho — descreve 40%.

E varia muito por nicho

Ordenados pela fatia de pares mensuráveis que se apoiam só no tom. O padrão acompanha a cara que os nichos já têm, medida no guia sobre se destacar: as fileiras claras e saturadas têm mais separação só de tom, porque sobra menos faixa de brilho para separar qualquer coisa.

Moda e Beleza e Política estão em 65% e 62%; Finanças e Saúde e Fitness em 25% e 30%. Se o seu nicho está na metade de cima dessa tabela, é provável que a miniatura cuja cara você está prestes a copiar seja uma das que achatam.

O conserto é um para o qual você já tem número

Separe primeiro por brilho e trate o tom como bônus. É a mesma conclusão que o guia sobre cor alcança pelo outro lado — a interface é branca ou quase preta — e é o remédio inteiro aqui também, porque brilho é o eixo que a simulação deixa em paz.

O teste barato é a escala de cinza. Dessature o design por completo e veja se as partes ainda se leem como partes separadas: sujeito contra fundo, texto contra o que está atrás, uma metade de um quadro dividido contra a outra. Se sobrevive a isso, sobrevive à dicromacia, porque a escala de cinza é o teste mais severo: ela tira toda a informação de tom, enquanto o dicromata guarda um eixo dela.

O que também significa que o contrário não é prova. Algo que falha em escala de cinza pode continuar parcialmente visível para um espectador real com deuteranopia. Passar no cinza basta; não passar é aviso, não veredito. O limiar não é nosso: é a razão de contraste definida pelo critério de contraste mínimo das WCAG, o padrão a que o resto da web responde.

Texto é o caso com menos margem

Texto sobre fundo colorido é onde isso se decide mais rápido, porque texto é fino: uma chamada separada do fundo só pelo tom é ilegível para o dicromata e só difícil para todo mundo. Só 2% dos pares medidos alcançam o 4,5:1 que se espera de texto de interface.

A resposta prática não é uma razão de contraste, é um traço: contorno ou sombra dura numa cor cujo brilho está longe tanto do texto quanto do fundo, que é o que o guia sobre tamanho de texto mede para a redução. O mesmo contorno que mantém a chamada legível em 336 pixels mantém legível sem o tom.

O que este guia não cobre

A tritanopia, a forma azul-amarelo, não é simulada aqui. A aproximação de Viénot é reconhecidamente pouco confiável para ela, e ela é rara o bastante — bem abaixo de 0,1% — para que chutar não acrescentasse nada.

Daltonismo total, a monocromacia, é mais raro ainda, e o teste em escala de cinza acima é exatamente esse caso: se o seu design sobrevive à dessaturação, sobrevive à monocromacia também.

E este guia inteiro é sobre tom. A outra questão de acessibilidade da miniatura é o tamanho, que não é questão de deficiência nenhuma: todo mundo recebe seu design em 336 pixels de largura, e os pisos disso estão nos guias sobre tamanho de texto e sobre rostos.

A checagem, em um minuto

Duas passadas na mesma imagem. Dessature e veja se as partes ainda se separam. Depois devolva a versão em cor para um feed real, porque uma miniatura que se separa por dentro ainda pode perder a borda contra a interface, que é outra medição em outro guia.

Essa segunda passada é para o que a ferramenta de pré-visualização serve: sua miniatura entre concorrentes reais nos tamanhos renderizados reais. A primeira é um controle no programa em que você desenhou, e é a checagem de acessibilidade mais barata que existe nesse ofício.

As perguntas que todo mundo faz