AbacatePay / AbacatePay/ecosystem

Hero da página inicial não garante contraste de texto sobre a imagem de fundo

未關閉 適合新手
#38 0 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視
主要語言
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.

![Screenshot_2026-07-19-12-04-09-468_com.android.chrome.jpg](https://github.com/user-attachments/assets/c150e66c-cf94-4382-b3b1-1d920197188e)

![IMG_20260719_120758.jpg](https://github.com/user-attachments/assets/7640dfc6-f5b5-4e44-8f97-3eb528757940)

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

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。