Comece com uma escolha do usuário e um sistema de tokens
Use a configuração do sistema como padrão com prefers-color-scheme. Se oferecer um interruptor, use um controle operável por teclado com nome acessível e exponha a escolha ativa programaticamente. Dê precedência à seleção manual naquele contexto de navegador; não prometa que ela acompanhará alguém em outro dispositivo ou sessão privada.
Nomeie cores por função, não por aparência: canvas, surface, text, muted text, border, link, accent, error, success, focus e disabled. Mapeie cada função em ambos os temas. Isso evita que um cinza pensado só para claro vaze para o modo escuro e torna correções reutilizáveis. Escuro não é inerentemente mais acessível nem universalmente preferido; é outra experiência a ser tornada usável.
Documente uma ordem, por exemplo escolha salva primeiro e preferência do sistema depois, para que as equipes testem o mesmo resultado.
Inclua hover, focus, selected, invalid, disabled, loading, empty e visited-link, não apenas padrões.
Meça contraste no tema renderizado
WCAG 2.2 Success Criterion 1.4.3 estabelece 4.5:1 mínimo para texto normal e imagens de texto, e 3:1 para texto grande. Não arredonde: 4.499:1 não atende 4.5:1. Tipos finos podem parecer mais fracos que a cor computada, então use uma família mais robusta ou margem extra.
Verifique cada primeiro-plano renderizado e o fundo adjacente. Texto sobre fotos, gradientes, painéis translúcidos ou vídeo tem fundos mutáveis, então um cálculo por token não garante legibilidade. Use um respaldo opaco, overlay adequado ou posicionamento diferente, em seguida inspecione em viewports realistas.
Sob WCAG 2.1 Success Criterion 1.4.11, informação visual necessária para identificar um controle ativo, estado requerido ou gráfico significativo precisa de 3:1 contra cores adjacentes.
Acompanhe mudanças de cor com texto, ícone, padrão, posição ou outro indicador claro; estados de erro e selecionado não devem depender de um tom sutil.
Proteja foco por teclado, formulários e mudanças de estado
Navegue com Tab em ambos os temas. O foco deve ser visível em links, botões, inputs, menus, diálogos, widgets personalizados e no controle de tema. Não remova o outline do navegador a menos que sua substituição seja testada em toda superfície e estado. Um outline deslocado costuma ficar mais claro que um brilho que se mistura.
WCAG 2.2 Focus Appearance é um critério AAA, não prova que um site atende AA. É um alvo útil: uma área indicadora pelo menos tão grande quanto um 2 CSS-pixel perimeter e contraste de 3:1 entre pixels focados e não focados. Verifique também que estados como erro, requerido, selecionado e indisponível mantenham significado.
Teste separadamente dica do input, valor inserido, label, texto de ajuda, texto de erro, borda inválida, marca de checkbox, seleção de rádio e estado de envio.
Para checkout ou outro fluxo regulado, use sandbox do provedor e obtenha revisão qualificada de acessibilidade e segurança quando apropriado. Isto é orientação educacional, não uma avaliação de conformidade ou segurança.
Trate imagens, ativos incorporados e UI fornecida pelo navegador
Revise logos, ilustrações, screenshots, gráficos, ícones e texto embutido em imagens em ambos os temas. Um logo reaproveitado para claro pode sumir e a legenda de um gráfico pode falhar mesmo quando o HTML ao redor passa. Forneça um ativo adequado ao propósito ou fundo estável. Imagens que transmitem instruções, status ou dados devem permanecer compreensíveis.
Declare suporte a esquemas light e dark, então estilize o conteúdo da página para o tema selecionado. A propriedade color-scheme alinha canvas do navegador, barras de rolagem, controles de formulário e outra UI do navegador. Coloque metadados correspondentes cedo no documento. SVG incorporado pode responder ao scheme do pai; teste iframes e widgets de terceiros de ponta a ponta.
Prefira controles HTML semânticos. Forced-color behavior usa semântica nativa, não um papel ARIA adicionado a um elemento genérico.
Inspecione estados baixados, em cache, de carregamento lento e de imagem falhada, especialmente onde texto ou pistas de ação ficam sobre mídia.
Respeite forced-colors e teste o release como um sistema
Forced-colors mode aplica uma paleta limitada escolhida pelo usuário, como Windows High Contrast. Navegadores podem substituir cores, remover sombras e adicionar backplates de texto. Não bloqueie a sobrescrita. Faça correções direcionadas onde um componente perde limite ou significado, por exemplo usando uma borda real onde uma sombra carregava affordance. Emulação não representa todos os dispositivos, navegadores, extensões, níveis de zoom ou combinações de tecnologia assistiva.
Execute a matriz de rotas e interações em configurações light, dark e forced-colors antes do lançamento. Chrome DevTools pode emular ambas as condições; use-o para acelerar a revisão e então navegue manualmente pelos fluxos prioritários. Scanners encontram candidatos mas não podem determinar acessibilidade sozinhos. SIU preflights critical theme assets and interactions, records a release gate, and keeps a tested rollback path for severe presentation regressions; it is not downtime monitoring.
Inclua landing, navegação, busca, acesso à conta, formulários, páginas de erro, telas autenticadas e fluxos de conversão de material.
Salve URLs testadas, versões de navegador, configurações, exceções, responsável e gatilho de rollback para que a remediação comece a partir de fatos.