Metodologia e fontes
Como o editor faz as contas, com as referências. Assim você pode conferir.
Contraste de cores
Usamos a fórmula da Web Content Accessibility Guidelines (WCAG) 2.1. Primeiro, cada canal da cor (vermelho, verde e azul) é convertido de sRGB para valor linear. Depois calculamos a luminância relativa: 0,2126·R + 0,7152·G + 0,0722·B. A razão de contraste é (L1 + 0,05) / (L2 + 0,05), em que L1 é a luminância da cor mais clara.
| Nível | Texto normal | Texto grande |
|---|---|---|
| AA | 4,5 para 1 | 3 para 1 |
| AAA | 7 para 1 | 4,5 para 1 |
Texto grande, na WCAG, é o de 18 pontos (cerca de 24 px) ou mais, ou de 14 pontos (cerca de 18,66 px) ou mais em negrito. Componentes de interface, como bordas de botões e ícones, pedem 3 para 1 (critério 1.4.11, nível AA).
Referência: W3C, Web Content Accessibility Guidelines (WCAG) 2.1, critérios 1.4.3, 1.4.6 e 1.4.11.
Harmonias de cor
As harmonias são calculadas no modelo HSL (matiz, saturação, luminosidade). A partir do matiz da cor base, somamos deslocamentos em graus no círculo de cores:
- complementar: 180°;
- análoga: −60°, −30°, 0°, +30° e +60°;
- tríade: 0°, 120° e 240°;
- complementar dividida: 0°, 150° e 210°;
- monocromática: o mesmo matiz com luminosidade entre 25% e 85%.
É um recurso para começar, não uma regra de beleza. Ajuste a gosto e confira o contraste.
Simulação de daltonismo
Aplicamos as matrizes de 3 tipos de deficiência de visão de cor (protanopia, deuteranopia e tritanopia) sobre as cores em RGB linear, com severidade máxima. A fonte é: Machado, Oliveira e Fernandes (2009), "A Physiologically-based Model for Simulation of Color Vision Deficiency", IEEE Transactions on Visualization and Computer Graphics 15(6), severidade 1,0.
A simulação é uma aproximação. Pessoas com daltonismo têm graus diferentes, e a aparência varia com a tela e a luz do ambiente. Use a simulação como alerta, não como diagnóstico.
Nomes das cores
Os nomes (“Azul escuro”, “Laranja”) são aproximações simples feitas a partir do matiz, da saturação e da luminosidade. Servem para não depender só da cor vista, mas não substituem um catálogo de cores.
Onde ficam seus dados
Todos os cálculos acontecem no seu navegador. Nenhuma paleta é enviada a servidor. Veja a política de privacidade.
Fontes dos artigos
Cada artigo lista suas fontes no final. Veja também a política editorial.