← Previews de staging Escuela de Bitcoin Argentina

Review de diseño · Home v1

Auditoría UI/UX · Escuela de Bitcoin Argentina

Home v1 (PR #18) — 10 hallazgos priorizados de accesibilidad y usabilidad.

Realizado por el agente experto en UI/UX de la Agencia. Auditoría contra las 10 heurísticas de Nielsen y WCAG 2.2 AA, con contrastes medidos sobre los tokens reales del código. No es asesoramiento legal.

El objetivo del sitio es que un sponsor vea una organización financiable y seria; la vara de esta revisión se calibra sobre esa tarea.

Fuente PR #18 · fix/agencia-feedback-pass Preview staging.bitcoinschoolar.com/preview/PR-18/ Fecha 2026-07-07
3
Alta
4
Media
3
Baja
10
Total

Arreglar primero

Las 3 fallas Alta son WCAG-AA reales en un sitio con formularios, y comparten una causa: el naranja de marca se usa como texto y borde sobre fondos claros, donde no da contraste. Orden de ataque:

  1. 1
    Token de naranja-texto oscuro

    Un --color-accent-text aparte (≈ #b5670a) para eyebrows y precios de sponsor. El fill naranja de marca no se toca. Arregla el número clave para el sponsor.

  2. 2
    Borde de controles ≥ 3:1

    Los campos de formulario y las tarjetas usan un borde a 1.5:1. Un solo token de borde más oscuro los vuelve visibles (y las cards, más nítidas).

  3. 3
    Foco de teclado visible

    No hay estilo :focus-visible; el foco queda al default del navegador. Una regla global de anillo de foco.

Severidad alta · WCAG-AA

01 Alta WCAG-AA · 1.4.3 .tier-price — USD 20K / 7.5K / 2K

El precio del sponsor es el texto que peor se lee

ProblemaNaranja #f7931a sobre blanco da 2.3:1. Aun como texto grande necesita 3:1. Es el dato que más pesa en la decisión del sponsor.
FixNaranja-texto oscuro solo para el precio; el fill de marca se conserva.
USD 20K 2.3:1Falla
→
USD 20K 4.6:1AA
02 Alta WCAG-AA · 1.4.3 .eyebrow / .panel-kicker

Los rótulos de sección (naranja) no llegan al mínimo

ProblemaEl mismo naranja sobre crema #f6f3ee da 2.08:1. Texto chico (0.78rem) → umbral 4.5:1. Afecta a todos los eyebrows de la página, en tema claro.
FixNaranja-texto oscuro, o convertir el rótulo en un tag con fill naranja + texto oscuro adentro.
Sponsors 2.08:1Falla
→
Sponsors 4.5:1AA
03 Alta WCAG-AA · 1.4.11 input / textarea — forms sponsor + newsletter

Los bordes de los campos casi no se ven

ProblemaBorde #d8d2c8 sobre el input da 1.5:1 (claro) y 1.39:1 (oscuro); los controles requieren ≥ 3:1. En un formulario que guarda datos personales.
FixToken de borde de control ≥ 3:1 — claro ≈ #a9a196, oscuro ≈ #5c554b. Corrige también las tarjetas (hallazgo 10).
Email 1.5:1Falla
→
Email 3.1:1AA

Severidad media

04 Media WCAG-AA · 1.4.3 .site-footer p / .runtime-status

Texto gris de pie apenas debajo del mínimo

Problema--color-muted #707070 sobre crema da 4.47:1, apenas debajo de 4.5 para texto normal.
FixOscurecer --color-muted a ≈ #5f5f5f (→ 5.4:1). Alcanza a otros usos del mismo token.
05 Media WCAG-AA · 2.4.7 global — botones y links

Sin estado de foco propio para teclado

ProblemaEl CSS no define :focus-visible; el foco queda al default del navegador, poco visible sobre los botones oscuros.
FixAnillo global: outline: 2px solid accent; outline-offset: 2px;
06 Media Diseño · Nielsen #8 Hero

El eyebrow repite la marca del header

ProblemaEl eyebrow «Bitcoin School Argentina» repite el nombre que ya está en el header, justo encima del H1. Ruido sin información nueva.
FixReemplazar por un descriptor con dato («Córdoba · comunidad Bitcoin») o quitarlo.
07 Media Diseño · NN/g pricing Sección Sponsors

Los tres tiers pesan igual; nada guía la mirada

ProblemaSin tier destacado, el ojo no encuentra el foco recomendado — patrón esperado en tablas de pricing/sponsorship.
FixDestacar Title Partner (borde/fondo acento + badge «Cupo principal»).

Severidad baja · pulido

08 Baja Diseño · Nielsen #2 / #6 Hero — CTA secundario + nav

«Empezá acá» lleva a Servicios y no está en el nav

ProblemaEl CTA «Empezá acá» apunta a #servicios (no a educación/programas); label y destino no coinciden, y Servicios no figura en el nav.
FixApuntar a #nosotros o a programas; o sumar «Servicios» al nav.
09 Baja Diseño · Nielsen #6 Banda Donaciones

«Donar ahora» queda de-enfatizado

ProblemaLa única acción de plata directa es un botón secondary (outline) sobre la banda oscura, con menos jerarquía.
FixAceptable si es intencional (sponsor-first). Si no, subirlo a primary naranja.
10 Baja Diseño · Gestalt feature / tier / activity cards

Las tarjetas «flotan» sin definición

ProblemaBordes a 1.5:1 dejan las tarjetas sin límite claro contra el fondo.
FixSe resuelve con el mismo token de borde del hallazgo 3.