neumorphism acessibilidade contraste
Neumorphism virou um dos estilos mais criticados por especialistas em acessibilidade desde que ganhou popularidade em 2019-2020, e o motivo é estrutural, não um detalhe de implementação: o próprio conceito do estilo depende de o elemento ter praticamente a mesma cor do fundo, diferenciado só por sombras sutis, o que é o oposto do que WCAG recomenda para identificar elementos interativos.
Independente da sombra neumórfica, o foco de teclado precisa de um indicador de alto contraste próprio, nunca dependa só do relevo.
Reserve o estilo para controles secundários e mantenha ações críticas (compra, envio, exclusão) em componentes de alto contraste tradicionais.
O efeito só é visível quando há algo atrás do elemento para ser borrado, uma imagem, gradiente ou cor vibrante. Sobre um fundo liso e uniforme, o blur não tem o que desfocar e o resultado parece só uma cor sólida meio transparente. Use o preview desta ferramenta com um dos fundos vibrantes para conferir o efeito real.
Não automaticamente, mas na prática a maioria das implementações "puras" (sem nenhum outro indicador de contraste) falha o critério 1.4.11 no primeiro teste. É perfeitamente possível passar na auditoria combinando o efeito com bordas, ícones ou mudanças de cor que garantam os 3:1 exigidos independentemente da sombra.
Geralmente piora, telas escuras tendem a ter menos faixa dinâmica de luminosidade disponível para diferenciar sombra clara de sombra escura sem ficar artificial. Se for aplicar neumorphism em dark mode, teste a intensidade da sombra especificamente nesse tema, não assuma que o valor calibrado para o tema claro funciona igual.
A recomendação mais comum é aumentar a diferença de luminosidade entre elemento e fundo (não deixá-los quase idênticos) e sempre emparelhar o efeito com um segundo sinal visual de interatividade, é uma versão hibridizada, não o neumorphism "puro" das primeiras explorações de 2019.
backdrop-filter tem bom suporte nos navegadores modernos, mas sempre inclua o prefixo -webkit- para Safari e trate a ausência de suporte com um fundo sólido de fallback.
.glass {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}O CSS é gerado localmente no navegador.