O que o 500 em blue-500 realmente significa nos design systems

O problema: o mesmo número, significados diferentes

A maioria dos design systems entrega cor como paletas numeradas - no Tailwind, do blue-50 ao blue-950 - e designers, engenheiros e revisões de código usam esses números como linguagem comum. O artigo mostra que, embora os números pareçam alinhados entre tons, o mesmo número significa coisas distintas em cada sistema. O exemplo inicial: texto branco sobre bg-blue-600 no Tailwind v3 tem contraste de 5,17:1 (passa AA), mas a mesma combinação em bg-green-600 dá 3,30:1 e falha para texto de corpo segundo o WCAG 2 (que exige 4,5:1 para texto normal e 3:1 para texto grande).

Numerado por posição

Material Design (2014) introduziu dez tons por matiz, de 50 a 900 mais acentos A100–A700, sugerindo o 500 como cor primária. Tailwind adotou a escala no v1 (2019), com crédito a Adam Wathan, e depois adicionou o 50 (v2) e o 950 (v3.3). Nesses sistemas, o número indica apenas a posição no degradê, e a luminosidade real varia por matiz: medidos em OKLCH, os tons 500 do Tailwind v3 vão de 0,585 (indigo) a 0,795 (yellow), porque modelos como HSL tratam amarelo e azul com a mesma "luminosidade" média, ainda que a percepção humana seja muito diferente (na escala CIELAB, o amarelo puro mede ~98 e o azul ~30). Consequência: uma regra como "texto 200 sobre fundo 700" passa AA em violeta (5,12:1) e falha em amarelo (4,23:1) - em 12 das 17 famílias do Tailwind v3 ela falha. No Material 2014, texto branco sobre os tons 500 varia de 7,33:1 (deep purple) a 1,22:1 (yellow).

Numerado por contraste

IBM Carbon usa graus de 10 a 100 com uma regra explícita: a diferença de 50 ou mais entre dois graus garante acessibilidade - todo par de azuis 50 ou mais distante mede pelo menos 4,55:1. O US Web Design System (USWDS), inspirado numa paleta da IBM, define cada grau por luminância fixa (o "magic number" de 50 atende AA para texto de corpo, 40 para texto grande, 70 para AAA) e a regra vale em todas as 25 famílias. Stripe, ao reconstruir sua paleta em CIELAB em 2019, adotou regra análoga: cinco níveis de distância garantem contraste para texto pequeno, quatro para ícones e texto grande. Nesses sistemas a regra pode ser escrita uma vez só.

Numerado por luminosidade e por papel

Material 3 (2021) substituiu a escala por tons baseados no espaço HCT, criado por James O'Leary no Google: o tom 40 tem luminosidade CIELAB de 40 em qualquer matiz, e a biblioteca garante 3:1 com diferença de 40 e 4,5:1 com diferença de 50. Radix numera os doze passos por papel: 1–2 fundos de aplicativo, 3–5 fundos de componente, 6–8 bordas, 9–10 preenchimentos sólidos, 11–12 texto, com contraste garantido em termos APCA.

O custo da consistência aparece no amarelo: o yellow-500 do Tailwind é um amarelo vivo (#eab308), enquanto o yellow-50 do USWDS (#8a7237) e o tom 40 do Material 3 (#6d5e0f) são oliva escuros - um amarelo brilhante é claro demais para ocupar essas posições definidas por luminosidade.

A fórmula de contraste e o futuro

Todas essas garantias (exceto as da Radix) usam a fórmula do WCAG 2, de 2008, com limites herdados de ISO 9241-3 e ANSI/HFES. O APCA, método candidato para o WCAG 3, pontua os mesmos pares de forma diferente - o cinza de grau 50 do USWDS recebe Lc 72,0 sobre branco e −29,6 sobre preto, mostrando dependência de direção. O APCA foi removido do rascunho do WCAG 3 em julho de 2023 por falta de apoio no grupo de trabalho, e o padrão não deve ficar pronto antes de 2030; se outro método for adotado, as regras baseadas em distâncias atuais teriam de ser revalidadas.

Mudar paletas em uso

O Tailwind v4 (janeiro de 2025) migrou para oklch com cores mais saturadas, mas manteve a luminosidade: 220 das 242 cores preservam a luz do v3 a três decimais, e praticamente todas as proporções de contraste mudaram menos de 4% - apenas uma das 484 combinações cruzou a linha de 4,5:1 (branco sobre blue-600 foi de 5,17:1 para 5,26:1). Como a luminosidade não mudou, os números continuam indicando posição, não luminosidade. O artigo fecha notando que instruções como "texto 200 sobre 700" dependem da matiz em Tailwind e Material original, mas valem em qualquer matiz em Carbon, USWDS e Material 3 - e que blue-500 significa o que cada paleta decidiu que significa.