ronutz

Contraste e formato de cor

Duas cores em qualquer notação CSS (nome, hex, rgb, hsl, hwb, lab, lch, oklab, oklch, color()) e saem a razão de contraste WCAG com aprovação ou reprovação em cada nível (AA e AAA, texto normal e grande, componentes de interface), uma prévia ao vivo, cada cor convertida a todas as notações com a sua luminância relativa, e o primeiro plano mais próximo que passaria em cada nível reprovado. Aritmética pura das fórmulas WCAG e do código de exemplo do CSS Color Level 4; nada sai do navegador.

Documentação (Markdown)

Web e HTTP
Documentação
Duas cores, em qualquer notação CSS
Experimente

4.54:1 razão de contraste, das luminâncias relativas 1.0000 (mais clara) e 0.1812 (mais escura).

AA texto 4.5:1: passa AA texto grande 3:1: passa AAA texto 7:1: falha AAA texto grande 4.5:1: passa Interface e gráficos 3:1: passa

Prévia

Texto de corpo no tamanho usual: aqui vale a regra de 4.5:1 (7:1 para AAA).

Texto grande, 18 pontos ou 14 pontos em negrito: 3:1 (4.5:1 para AAA).

O contorno de um controle ou a linha de um gráfico: 3:1 contra o que está ao lado.

Cada cor, em todas as notações

Primeiro plano (texto ou objeto)
#767676hex
rgb()
rgb(118 118 118)
hsl()
hsl(none 0% 46.27%)
hwb()
hwb(none 46.27% 53.73%)
lab()
lab(49.637 0 0)
lch()
lch(49.637 0 none)
oklab()
oklab(0.5658 0 0)
oklch()
oklch(0.5658 0 none)
sRGB linear
color(srgb-linear 0.18116 0.18116 0.18116)
CIE XYZ (D65)
color(xyz-d65 0.17219 0.18116 0.1973)
Luminância relativa
0.1812
Fundo
#ffffffuma cor nomeadawhite
rgb()
rgb(255 255 255)
hsl()
hsl(none 0% 100%)
hwb()
hwb(none 100% 0%)
lab()
lab(100 0 0)
lch()
lch(100 0 none)
oklab()
oklab(1 0 0)
oklch()
oklch(1 0 none)
sRGB linear
color(srgb-linear 1 1 1)
CIE XYZ (D65)
color(xyz-d65 0.95046 1 1.08906)
Luminância relativa
1.0000

Primeiros planos que passariam

Para cada nível que o par não alcança, o primeiro plano mais próximo que o alcança, obtido movendo a luminosidade do primeiro plano em OKLCH (matiz e croma mantidos; o croma só é reduzido quando o resultado sairia do gamut sRGB). Mais claro e mais escuro aparecem quando ambos existem.

alvodireçãoprimeiro planorazão alcançada
7:1mais escuro #595959 oklch(0.464 0 none)7.00:1

A aritmética (WCAG 2.2)

Cada canal sRGB (0 a 1) é linearizado: c / 12.92 quando c é no máximo 0.04045, senão ((c + 0.055) / 1.055) ^ 2.4. A luminância relativa é L = 0.2126 R + 0.7152 G + 0.0722 B, 0 para o preto e 1 para o branco.

A razão de contraste é (L1 + 0.05) / (L2 + 0.05), com L1 a luminância mais clara e L2 a mais escura: (1.0000 + 0.05) / (0.1812 + 0.05) = 4.54:1. Vai de 1:1 a 21:1.

Critérios de sucesso do WCAG 2.2: 1.4.3 Contraste (mínimo), nível AA, pede 4.5:1 para texto e 3:1 para texto em escala grande; 1.4.6 Contraste (aprimorado), nível AAA, pede 7:1 e 4.5:1; 1.4.11 Contraste não textual, nível AA, pede 3:1 para componentes de interface e objetos gráficos. Texto em escala grande tem ao menos 18 pontos, ou 14 pontos em negrito. Texto incidental e logotipos estão isentos.

A razão é a fórmula do WCAG sobre sRGB, que é o que os critérios exigem; não é um modelo perceptual, e duas cores que passam ainda podem ser difíceis de ler para alguns leitores. Cores fora do gamut sRGB são recortadas antes da medida, já que os critérios são definidos para cores exibíveis. O alfa do fundo é ignorado (tratado como opaco). As cores nomeadas, as notações e as conversões são as do CSS Color Level 4; as fontes estão citadas em Fontes.

Endpoint da APIGEThttps://ronutz.com/api/v1/color-contrast-formatDocumentado, não servido. Abre a especificação.

Referências