Compositor de Contraste APCA

apcach = APCA + OKLCH. Dado um contraste, croma e matiz alvo, calcule a cor exata que o satisfaz — defina "quanto de contraste" primeiro, depois obtenha a cor.

Papel da cor composta

Superfície de referência

Contraste alvo |Lc|75

Croma C0.140

Matiz H145°

sRGB

oklch(52.2% 0.140 145.0)

Alvo |Lc|

Medido |Lc|

75.2±0.1

A luminosidade é calculada por busca binária: nesta croma e matiz, esta é a cor exata que atinge o contraste alvo. · A cor está dentro do gamut sRGB.

Componha em três etapas: escolha uma função, defina o contraste, obtenha a cor.

Transforme o contraste de uma métrica de validação em um ponto de partida — declare primeiro o nível de legibilidade necessário, e o motor calcula a cor.

01
Escolha função e referência
A cor composta será texto ou uma superfície? Considere o branco puro, preto puro ou insira um fundo personalizado.
02
Definir contraste alvo
Arraste |Lc| para o alvo (texto do corpo ≥75, tipo grande ≥60), depois ajuste a croma e a matiz; ative "Croma máxima" para obter o valor realizável mais saturado para essa matiz.
03
Copiar e aplicar
O |Lc| medido acompanha o alvo em tempo real (dentro de ±0,1); copie oklch()/hex/rgb() diretamente para o CSS.

Perguntas frequentes sobre composição de contraste

Três perguntas frequentes sobre apcach.

Por que APCA em vez da proporção WCAG?: APCA (Lc 0–108) classifica a legibilidade por tamanho e peso da fonte, e é muito mais preciso para modo escuro e contraste de faixa intermediária; é um candidato ao WCAG 3. Compor diretamente contra |Lc| torna os resultados nativamente corretos para APCA.
Qual contraste alvo devo usar?: Regras práticas: texto do corpo ≥75, manchetes ≥60, componentes/ícones de UI ≥45, elementos decorativos ≥30. Acima de 90 é contraste extremo, principalmente para tipo de exibição pequeno ou especial.
O que faz "Croma máxima"?: Na mesma matiz e contraste, croma mais alta é mais vívida, mas além do gamut sRGB não pode ser exibida. Quando ativado, o mecanismo pesquisa binariamente a borda do gamut e retorna a cor realizável mais saturada.

Após a composição

Verifique novamente a cor composta em relação à proporção WCAG na ferramenta de contraste, ou expanda-a para uma escala de 11 etapas.

Verificador de Contraste

Validação de contraste WCAG 2.1 entre qualquer cor de primeiro plano e plano de fundo.

Editor OKLCH

Ajuste L / C / H no espaço OKLCH perceptualmente uniforme com visualização ao vivo e saída oklch() / HEX / RGB.

Paleta Semântica para UI

Insira uma cor de marca, obtenha primária / secundária / sucesso / aviso / perigo — exportada como configuração Tailwind e variáveis CSS.

Componha em três etapas: escolha uma função, defina o contraste, obtenha a cor.

Transforme o contraste de uma métrica de validação em um ponto de partida — declare primeiro o nível de legibilidade necessário, e o motor calcula a cor.

Escolha função e referência

A cor composta será texto ou uma superfície? Considere o branco puro, preto puro ou insira um fundo personalizado.

Definir contraste alvo

Arraste |Lc| para o alvo (texto do corpo ≥75, tipo grande ≥60), depois ajuste a croma e a matiz; ative "Croma máxima" para obter o valor realizável mais saturado para essa matiz.

Copiar e aplicar

O |Lc| medido acompanha o alvo em tempo real (dentro de ±0,1); copie oklch()/hex/rgb() diretamente para o CSS.

Perguntas frequentes sobre composição de contraste

Três perguntas frequentes sobre apcach.

Por que APCA em vez da proporção WCAG?

APCA (Lc 0–108) classifica a legibilidade por tamanho e peso da fonte, e é muito mais preciso para modo escuro e contraste de faixa intermediária; é um candidato ao WCAG 3. Compor diretamente contra |Lc| torna os resultados nativamente corretos para APCA.

Qual contraste alvo devo usar?

Regras práticas: texto do corpo ≥75, manchetes ≥60, componentes/ícones de UI ≥45, elementos decorativos ≥30. Acima de 90 é contraste extremo, principalmente para tipo de exibição pequeno ou especial.

O que faz "Croma máxima"?

Na mesma matiz e contraste, croma mais alta é mais vívida, mas além do gamut sRGB não pode ser exibida. Quando ativado, o mecanismo pesquisa binariamente a borda do gamut e retorna a cor realizável mais saturada.