AbacatePay / AbacatePay/ecosystem
Hero da página inicial não garante contraste de texto sobre a imagem de fundo
- 主要語言
- TypeScript
- 星號
- 8
- 分支
- 5
- PR 合併指標
- 30 天內沒有已合併 PR
描述
**Descrição:**
O hero da página `/pages/start/welcome` usa uma `backgroundImage` com
texto sobreposto (título em branco, parágrafo em cinza claro/opacidade),
mas não há overlay/gradiente escuro fixo entre a imagem e o texto.
Isso já causa um problema visível hoje: onde o parágrafo de introdução
cruza a faixa mais clara (verde) da imagem de fundo, o contraste cai
sensivelmente em relação ao trecho sobre o fundo preto (ver screenshots
em anexo, Print 1: contexto geral do hero; Print 2: zoom nas linhas
finais do parágrafo, onde a perda de contraste é mais evidente).
**Por que isso precisa ser corrigido:**
- É a primeira página que qualquer desenvolvedor vê ao acessar a
documentação, um problema de legibilidade logo no topo passa uma
impressão de descuido, especialmente numa doc voltada para devs atentos a detalhes técnicos.
- Contraste insuficiente fere a diretriz WCAG 2.1 (nível AA, critério 1.4.3), que exige razão mínima de 4.5:1 entre texto e fundo, texto sobre a faixa verde provavelmente não atinge esse mínimo.
- Afeta ainda mais usuários com baixa visão, e piora em telas de celular sob luz solar direta, onde o brilho reduz o contraste percebido ainda mais.
- Como a imagem de fundo pode ser trocada no futuro (nova arte, campanha, etc.), corrigir com um overlay fixo resolve o problema de forma permanente, em vez de depender de a próxima imagem
"calhar" de ser escura o suficiente.
**Sugestão de correção:**
Adicionar um gradiente escuro fixo entre a imagem e o texto, por exemplo:
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('...');
Isso garante contraste mínimo independente das áreas claras/escuras
da imagem de fundo.


Posso trabalhar nessa correção! Um overlay/gradiente escuro sobre o
background do hero resolveria. Fico no aguardo de aprovação antes de
abrir o PR.
貢獻指南
研究方向
Find the hero component for the `/pages/start/welcome` page. Look for the backgroundImage styling and add a dark gradient overlay as suggested. Test the contrast by viewing the page locally and using a browser's accessibility tools to verify the contrast ratio meets WCAG AA. The fix is done when text is readable over all parts of the background image.
由索引模型根據 Issue 內容生成。
評估
- 技術堆疊
- css, typescript
- 領域
- accessibility, frontend
- Issue 類型
- 缺陷
- 難度
- 2/5
- 預估耗時
- 1-3 小時
- 活躍度
- 冷清
- 描述清晰度
- 描述清楚
- 新手友好度
- 75/100