o compilador

Como estas cores foram feitas

Esta página é sobre o programa, não sobre a paleta. Se você veio por uma folha de estilo, tudo o que precisa está na página inicial — isto existe porque cores só merecem confiança se o método merecer.

Voltar para as cores

Como funciona

Croma relativo

O croma é guardado como uma fração do que o gamut de destino realmente consegue exibir em dada luminosidade e matiz — nunca como um número absoluto. Uma única definição se comporta bem no sRGB e fica mais vívida num monitor de gamut amplo, sem ser redefinida.

srgbC 0.0985
display-p3C 0.1132

Números diferentes, não a mesma cor repetida. O gamut mais amplo resolve o mesmo croma relativo contra mais espaço disponível.

Passos ancorados no contraste

A luminosidade de um passo é resolvida, não escrita à mão. Cada papel declara o que precisa alcançar em relação a uma referência — contraste APCA para textos e preenchimentos, separação perceptual de luminosidade para superfícies e bordas — e o motor encontra a luminosidade que satisfaz esse alvo.

APCA em vez de WCAG 2.x, porque o WCAG aprova combinações de cinza-claro sobre preto que são genuinamente difíceis de ler. Projetar contra ele produz temas escuros que passam na auditoria e cansam a vista.

Torção de matiz

O matiz se desloca de propósito ao longo da escala — sombras mais frias, luzes mais quentes, ou o contrário. É o que faz uma escala parecer projetada em vez de calculada.

Fica num campo separado do termo corretivo que compensa o desvio do azul em direção ao roxo no Oklab. Misturar intenção com contorno técnico torna "isso foi de propósito?" impossível de responder um ano depois.

Contraste

Cada par que uma aplicação de fato entrega, medido em APCA. Texto sobre um cartão, rótulo sobre um botão preenchido, anel de foco sobre a página. A maioria cruza a fronteira entre famílias, que é exatamente onde uma verificação por família não enxerga.

Lc é o contraste de luminosidade do APCA, de 0 a cerca de 108. Não é uma razão e não se compara com a do WCAG: 90 é o limiar para texto corrido, 75 para texto corrido maior, 60 para títulos, 45 para texto grande ou em negrito, 30 para um elemento não textual que ainda precisa ser visto, e 15 é o piso em que qualquer coisa é perceptível.

Os números abaixo são medidos no seu navegador, a partir dos pixels com que esta página é de fato pintada — não lidos de uma tabela. Aparecem com quatro casas decimais porque é a precisão em que a paleta é quantizada, então um par que erra o alvo por um décimo de milésimo diz isso em vez de arredondar para o número que não alcançou. Espere que a última casa difira da do compilador: ele mede os próprios valores, isto mede pixels de oito bits.

Contraste APCA para cada par entregue
frentefundousoLcexige
--nc-color-fg--nc-color-surfacetexto corrido90
--nc-color-fg--nc-color-surface-raisedtexto sobre um cartão90
--nc-color-fg-muted--nc-color-surfacetexto secundário60
--nc-color-on-accent--nc-color-accentrótulo em botão preenchido45
--nc-color-ring--nc-color-surfaceanel de foco30
--nc-color-border-strong--nc-color-surfaceborda mais forte15
--nc-color-accent--nc-color-surfacedestaque como texto45
--nc-color-danger--nc-color-surfacepreenchimento semântico30
--nc-color-fg--nc-color-danger-bgtexto dentro de um aviso90
--nc-color-on-danger--nc-color-dangerfrente sobre preenchimento30
--nc-color-danger-border--nc-color-surfaceborda de estado8
--nc-color-fg--nc-color-surface-cooltexto corrido90
Contraste APCA para cada par entregue
frentefundousoLcexige
--nc-color-fg--nc-color-surfacetexto corrido90
--nc-color-fg--nc-color-surface-raisedtexto sobre um cartão90
--nc-color-fg-muted--nc-color-surfacetexto secundário60
--nc-color-on-accent--nc-color-accentrótulo em botão preenchido45
--nc-color-ring--nc-color-surfaceanel de foco30
--nc-color-border-strong--nc-color-surfaceborda mais forte15
--nc-color-accent--nc-color-surfacedestaque como texto45
--nc-color-danger--nc-color-surfacepreenchimento semântico30
--nc-color-fg--nc-color-danger-bgtexto dentro de um aviso90
--nc-color-on-danger--nc-color-dangerfrente sobre preenchimento30
--nc-color-danger-border--nc-color-surfaceborda de estado8
--nc-color-fg--nc-color-surface-cooltexto corrido90

Calculado ao vivo no navegador a partir dos tokens emitidos, usando a mesma implementação de APCA que o compilador usa como critério.

O que os portões encontraram, e não puderam corrigir

Os portões de qualidade foram ligados depois dos emissores e imediatamente relataram 175 falhas contra uma paleta que havia passado em todo o resto. A causa era estrutural: cada sólido semântico estava ancorado no mesmo alvo de contraste, então todos caíam na mesma luminosidade e diferiam apenas no matiz — e o matiz é exatamente o eixo que a dicromacia remove.

As famílias agora se separam em luminosidade além do matiz, que é a única alavanca que sobrevive. Isso não é uma correção completa, e o sistema diz isso em vez de fingir. Buscando em todas as combinações, sujeitas a os preenchimentos permanecerem visíveis e as rampas permanecerem sãs, a melhor separação de pior caso alcançável para um conjunto semântico de seis famílias é 0.0163 — abaixo de uma diferença minimamente perceptível, e agora são dez famílias.

Então o portão relata margens e avisa; ele falha apenas quando duas cores são literalmente iguais. Todos os números são publicados em system/reports/colour-vision.md. Esta é a razão de a WCAG 1.4.1 existir: nunca transmita informação apenas por cor. A paleta leva você até onde a cor consegue, e diz exatamente até onde isso é.

A mesma medição decidiu a escala categórica. Oito cores geradas chegam ao fundo em 0,0416 de separação; seis alcançam 0,0724. O padrão é seis, e pedir mais gera um aviso em vez de publicar silenciosamente um gráfico que um dicromata não consegue ler.