Accesibilidad

Los estándares con los que está construido el sitio, medidos contra WCAG 2.2 con AA como objetivo. Lo que sigue es lo que hace el código realmente, incluido dónde el verde de marca obligó a un compromiso honesto.

Los estándares

  1. Enlace de salto y puntos de referencia

    2.4.1 Evitar bloques · A

    Quien navega con teclado llega primero a un enlace Saltar al contenido que salta por encima del armazón de la interfaz hasta la región principal. La página se construye a partir de puntos de referencia reales: un main, elementos de navegación etiquetados y un footer.

  2. Foco visible

    2.4.7 Foco visible · AA

    Cada control muestra al recibir el foco un anillo verde de dos píxeles situado a dos píxeles del borde, que aparece con el foco de teclado y no al hacer clic con el ratón.

  3. Tamaño del objetivo

    2.5.8 AA · 2.5.5 AAA

    Los controles táctiles principales (el dock de pestañas, las filas de la hoja, las píldoras de llamada a la acción) miden de 44 a 48 píxeles; el control de puntero más pequeño supera aún los 24. Así, cada control cumple el mínimo de AA, y los controles táctiles cumplen el tamaño AAA, más estricto.

  4. Movimiento reducido

    2.3.3 · AAA

    Cuando el sistema de un visitante pide menos movimiento, el sitio reduce cada animación y transición a un pelo por encima de cero, y convierte el desplazamiento suave en un salto directo.

  5. Paridad de temas, sin parpadeo

    El tema claro y el oscuro son ambos de primer nivel: cada superficie se diseña en los dos, y el tema se resuelve antes del primer renderizado, de modo que quien usa el modo oscuro nunca ve un parpadeo blanco.

  6. El color no es la única señal

    1.4.1 Uso del color · A

    Los enlaces en la prosa de los artículos van subrayados, de modo que su significado nunca depende solo del verde.

El verde legible

El verde de marca es una lima brillante, y la lima brillante no se lee como texto sobre blanco: --color-green mide 2,2:1 ahí. De ahí salen dos decisiones. El texto que debe ir sobre el verde usa --color-on-green, una tinta casi negra a 8,8:1, y por eso ningún botón ni enlace de salto pinta blanco sobre la lima. Y el verde usado como texto usa --color-green-text, un verde más profundo que supera el listón de 4,5:1 para texto normal en todos los fondos claros donde aparece: 5,6:1 sobre blanco, 5,2:1 sobre las bandas tintadas y 4,9:1 sobre el relleno de las etiquetas. El modo oscuro conserva la lima de marca, que se lee a 8,6:1 en la página.

Un enlace verde Un enlace verde
Un enlace verde
Token Sobre blanco Sobre casi negro
--color-green
2.2:1 8.6:1
--color-green-text
5.6:1 8.6:1
--color-on-green
8.8:1 6.2:1

Cumple AA Solo texto grande e interfaz No alcanza el umbral

Hasta agosto de 2026 esto era una concesión. --color-green-text era un verde más claro que solo superaba el listón de 3:1 para texto grande e interfaz, y solo sobre blanco; sobre las bandas tintadas bajaba a 2,9:1, que es justo donde están la tarjeta del autor, las etiquetas de anterior y siguiente y el enlace de privacidad del formulario de suscripción. Un token que se usa en un centenar de sitios no se protege con una frase que explique dónde corresponde, así que se movió el valor en lugar de la documentación, y ahora todos los usos superan el listón de texto normal en ambos temas. Los enlaces de los artículos siguen subrayados, así que el color nunca es la única señal, y el cuerpo de texto sigue siendo neutro.

Alcance

Esto cubre el sitio web. La aplicación de React Native y las plantillas de correo son superficies propias, con sus propios estándares, y no se documentan aquí.

¿Has visto algo mal en esta página? Escríbeme