DevBentoVerificar Accesibilidad de Color de Botones WCAG
Verifique si los colores de sus botones cumplen con los requisitos de contraste WCAG. Pruebe pares de primer plano y fondo de botones CTA para accesibilidad.
El veloz murciélago hindú comía feliz cardillo y kiwi
El veloz murciélago hindú comía feliz cardillo y kiwi
El veloz murciélago hindú comía feliz cardillo y kiwi
Verificar Contraste de Color de Botones
Los botones son el fallo más común de auditoría de accesibilidad después del contraste de color en texto. Un botón que no cumple con los requisitos de contraste bloquea a los usuarios para completar tareas, enviar formularios o navegar su aplicación. Este ejemplo prueba texto blanco (#ffffff) en un botón azul estándar (#3b82f6).
Por Qué el Contraste de Botones es Tricky
Los botones tienen dos requisitos de contraste separados que a menudo se confunden:
- Contraste de texto (SC 1.4.3): El color del texto dentro del botón debe tener 4.5:1 de contraste contra el color de fondo del botón
- Contraste no textual (SC 1.4.11): El límite visual del botón debe tener 3:1 de contraste contra el fondo adyacente (la página o tarjeta detrás)
Un botón puede pasar el contraste de texto pero fallar el no textual, o viceversa. Debe verificar ambos.
El Problema del Botón Azul
La mayoría de los sistemas de diseño usan azul como color de botón primario. Cómo se desempeñan los tonos azules comunes con texto blanco:
| Color del botón | Ratio texto blanco | WCAG AA | Notas |
|---|---|---|---|
| #3b82f6 (blue-500) | 4.56:1 | Pasa | Pasa apenas, sin margen |
| #2563eb (blue-600) | 6.44:1 | Pasa | Mínimo recomendado |
| #1d4ed8 (blue-700) | 8.59:1 | Pasa | Bueno para CTAs primarios |
| #60a5fa (blue-400) | 2.73:1 | Falla | Error común |
| #93c5fd (blue-300) | 1.47:1 | Falla | Nunca usar con texto blanco |
Estados del Botón y Contraste
Cada estado interactivo debe cumplir con los requisitos de contraste:
| Estado | Primer plano | Fondo | Ratio | ¿Pasa? |
|---|---|---|---|---|
| Predeterminado | #ffffff | #3b82f6 | 4.56:1 | AA pasa |
| Hover | #ffffff | #2563eb | 6.44:1 | AA pasa |
| Activo | #ffffff | #1d4ed8 | 8.59:1 | AA pasa |
| Deshabilitado | #94a3b8 | #cbd5e1 | 1.46:1 | Exento |
| Focus ring | #ffffff | #1e40af | 10.03:1 | AA pasa |
Errores Comunes de Accesibilidad de Botones
- Azul claro con texto blanco: Usar blue-400 o blue-300 con texto blanco falla WCAG
- Fondos de degradado: Un degradado que transiciona de pasar a fallar crea contraste inconsistente
- Focus rings que se mezclan: Los indicadores de focus deben ser visibles contra tanto el botón como el fondo de la página
- Botones solo de icono sin etiquetas: Falta aria-label hace el botón invisible para lectores de pantalla
- Color como único indicador: Botones deshabilitados que dependen únicamente de opacidad reducida sin otras señales visuales
Cómo Usar
- Ingrese el color de texto de su botón en el campo de primer plano
- Ingrese el color de fondo del botón en el campo de fondo
- Verifique si el ratio cumple con 4.5:1 para texto normal o 3:1 para texto grande (18px bold o 24px+)
- Pruebe cada estado del botón (predeterminado, hover, activo, focus) por separado
- Use las sugerencias de color accesible para encontrar mejores combinaciones
Probando el Stack Completo de Botones
Los botones rara vez existen aislados. Verifique cada variante en su sistema de diseño: primario, secundario, borde, fantasma y deshabilitado. La herramienta CSS Gradient puede ayudarle a generar fondos de botones, pero siempre verifique el ratio de contraste final con el Verificador de Contraste WCAG antes de publicar.
Nothing you paste leaves this tab. Every tool runs entirely in your browser — no upload, no server, no account.