fix(overlay): contraste WCAG AA no modo escuro do card - #67
Open
caioross wants to merge 1 commit into
Open
Conversation
O bloco @media (prefers-color-scheme: dark) trocava fundos e os textos fortes, mas nenhuma cor de texto secundário: cores calibradas para fundo branco (#64748b, #475569, #0e7490, #6d28d9) seguiam valendo sobre o card escuro. Oito pares texto/fundo reprovavam o AA (4.5:1), o pior sendo o chip "você" a 2.03:1 — justamente o indicador que diz se o modelo foi detectado ou escolhido pelo usuário. Só cor, só dentro do @media dark: os fundos escuros e o tema claro (escopo do #9) ficam intactos. A distinção de matiz dos chips é preservada (ciano = detectado, violeta = você), apenas clareada. Refs #54
|
Caution The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Contexto
overlay.css:107é o único bloco de modo escuro. Ele trocava fundos (.pm-card,.pm-model,.pm-src,.pm-menu,.pm-mitem) e os textos fortes (.pm-cost-val,.pm-metric b,.pm-foot b), mas nenhuma cor de texto secundário — as cores calibradas para fundo branco continuavam valendo sobre o card escuro.Modo escuro é o padrão de facto nos quatro sites suportados, então isso atinge a maioria dos usuários. O pior par é o chip de origem (
.pm-src-user, 2.03:1), que é exatamente o indicador que separa custo confiável (modelo detectado) de custo chutado (modelo escolhido à mão).O que mudou
Só cor, só dentro do
@media (prefers-color-scheme: dark)(7 linhas adicionadas, 1 alterada; nenhum outro arquivo):.pm-caret,.pm-srcbase,.pm-metric-label,.pm-brl,.pm-foot— este último cobre também.pm-resppor herança) →#94a3b8, token que já existe na paleta (usado por.pm-x,.pm-menu-group,.pm-mprice), o que evita introduzir cor nova..pm-src-detected#67e8f9(cyan-300) e.pm-src-user#c4b5fd(violet-300): contrapartes escuras diretas do cyan-700/violet-700 do modo claro. A semântica de matiz é preservada — ciano = detectado, violeta = você —, só clareada..pm-menu-title→#cbd5e1, mais claro que o#94a3b8do.pm-menu-group, mantendo a mesma hierarquia visual do modo claro (título > grupo).Contrastes medidos (WCAG 2.1, luminância relativa)
Cores alteradas — antes → depois:
.pm-src-user#232a36#6d28d92.03:1#c4b5fd7.81:1.pm-menu-title#181c24#4755692.25:1#cbd5e111.50:1.pm-src-detected#232a36#0e74902.69:1#67e8f99.95:1.pm-src(base)#232a36#64748b3.03:1#94a3b85.63:1.pm-caret#232a36#64748b3.03:1#94a3b85.63:1.pm-metric-label#181c24#64748b3.59:1#94a3b86.66:1.pm-brl#181c24#64748b3.59:1#94a3b86.66:1.pm-foot/.pm-resp#181c24#64748b3.59:1#94a3b86.66:1Correção de duas linhas da tabela da issue:
.pm-carete o.pm-srcbase ficam sobre#232a36(dentro de.pm-model/ do próprio chip), não sobre#181c24— logo o valor real era 3.03:1, não 3.59:1, e são 8 pares reprovando, não 6 (o.pm-srcsem sufixo não constava). Todos os 8 estão corrigidos.Varri todos os 24 pares texto/fundo do card no escuro (incluindo estados
:hovere.pm-seldo menu): os 16 restantes já passavam e seguem passando —.pm-x6.66,.pm-menu-group6.66,.pm-mprice6.66/5.63/5.71,.pm-menu-foot6.66,.pm-est7.95/6.72/6.82,.pm-mitem14.51/12.45,.pm-model12.26/10.82,.pm-cost-val+.pm-foot b15.58,.pm-card14.51,.pm-x:hover12.73. Nenhum par reprova.Pior caso composto:
.pm-cardérgba(24,28,36,.92), então o fundo real depende da página. Compus os dois extremos: sobre página preta →#161a21(contraste sobe), sobre página branca →#2a2e36(pior caso). Mesmo no pior caso#94a3b8rende 5.31:1 e#cbd5e19.17:1 — margem preservada.Conferência feita com um script de contraste zero-dependência, fora do repo (a issue sugere versioná-lo em
scripts/num PR posterior, não aqui).Critérios de aceitação
@mediada linha 107.pm-card,.pm-src,.pm-menu,.pm-mitem): a correção é de cor de texto, não de temanode scripts/gate.mjsverdeResultado real do gate
Riscos
Baixo. Mudança puramente cosmética em CSS: sem JS, sem markup, sem rede, sem permissão, sem dependência (zero-build preservado). Ordem de cascata conferida —
.pm-src-detected/.pm-src-uservêm depois da regra de grupo (mesma especificidade 0,1,0), e.pm-foot b(0,1,1) segue vencendo.pm-foot(0,1,0), então os valores em negrito continuam#f1f5f9.Teste manual (mudança visual do overlay): com o SO/navegador em tema escuro, abrir ChatGPT (ou Claude/Gemini/Perplexity), digitar um prompt e conferir no card: (1) o chip de origem legível em ciano quando o modelo é detectado e em violeta ao escolher outro modelo no menu; (2) os rótulos "tokens"/"custo de entrada", o rodapé "resposta"/"sessão" e o sufixo em R$ legíveis; (3) abrir o menu de modelos e conferir o título "Escolha o modelo cobrado". Em tema claro, nada deve ter mudado.
Classificação HANDBOOK §7.3 (Normal): a11y/CSS do overlay;
overlay.cssnão consta da lista de quórum §7.2.Closes #54