- Por qué un color bonito puede ser ilegible.
- La ratio de contraste: qué mide realmente.
- Los mínimos WCAG: 3:1, 4,5:1 y 7:1.
- Cuándo un texto cuenta como grande.
- Botones, formularios e indicadores de foco.
- Errores frecuentes de contraste.
- El color no puede ser el único aviso.
- Cómo comprobarlo antes de publicar.
Por qué un color bonito puede ser ilegible
El contraste insuficiente afecta a personas con baja visión, sensibilidad reducida al contraste, cataratas, glaucoma o degeneración macular. También afecta a personas mayores y a quienes tienen dificultades para diferenciar ciertos colores.
Pero no es un problema exclusivo de una discapacidad. Cualquiera puede sufrirlo al leer bajo el sol, con el brillo bajo, desde una pantalla antigua o en un móvil con reflejos.
El informe WebAIM Million 2026 detectó texto de bajo contraste en el 83,9 % de las páginas de inicio analizadas. Es el error automático más frecuente de su muestra de un millón de páginas. Consulta el informe de WebAIM.
La conclusión es simple: una paleta atractiva no garantiza una interfaz legible.
La ratio de contraste: qué mide realmente
El ojo distingue letras y fondos sobre todo por la diferencia entre claro y oscuro, no por el tono. Un azul marino y un gris antracita pueden parecer colores distintos, pero si ambos son muy oscuros se confunden cuando uno se usa sobre el otro.
WCAG calcula la luminancia relativa de cada color en una escala de 0 a 1:
0representa el negro absoluto.1representa el blanco puro.- El cálculo pondera cada canal RGB según la sensibilidad visual: aproximadamente un 72 % para verde, un 21 % para rojo y un 7 % para azul.
Con las dos luminancias se obtiene la ratio:
Ratio = (luminancia del color más claro + 0,05) ÷ (luminancia del más oscuro + 0,05)
El resultado se expresa como X:1:
- 1:1 significa que no hay contraste.
- 21:1 es el máximo posible: negro sobre blanco.
- La ratio es simétrica: da igual que el texto oscuro esté sobre fondo claro o al revés.
Dos ejemplos claros
#333333 sobre #F5F5F5
(0,913 + 0,05) ÷ (0,033 + 0,05) = 11,59:1.
La combinación supera con margen el nivel AAA para texto normal.
#333333 sobre #1A2B4C
(0,033 + 0,05) ÷ (0,025 + 0,05) = 1,11:1.
Los dos colores parecen diferentes, pero ambos tienen una luminancia baja. Para quien lee, es oscuro sobre oscuro.
Los mínimos WCAG: 3:1, 4,5:1 y 7:1
Estos son los valores que conviene tener presentes al diseñar y revisar una web:
| Ratio mínima | Uso | Nivel WCAG |
|---|---|---|
| 3:1 | Texto grande. | AA, criterio 1.4.3. |
| 3:1 | Componentes de interfaz y gráficos significativos. | AA, criterio 1.4.11. |
| 4,5:1 | Texto normal. | AA, criterio 1.4.3. |
| 4,5:1 | Texto grande. | AAA, criterio 1.4.6. |
| 7:1 | Texto normal. | AAA, criterio 1.4.6. |
El nivel AA es el objetivo razonable para una web profesional. El nivel AAA es más exigente y puede ser especialmente útil en contenidos largos o dirigidos a personas mayores, pero no resulta viable para todos los elementos de todos los diseños.
Los límites son estrictos: 4,48:1 no es 4,5:1. No conviene confiar en un redondeo visual ni en que dos colores “parezcan suficientemente distintos”.
Cuándo un texto cuenta como grande
El texto grande puede funcionar con una ratio de 3:1 porque su tamaño mejora la legibilidad. Para WCAG se considera grande cuando tiene:
- 24 px o más en peso normal.
- 18,7 px o más en negrita, normalmente
font-weight: 700.
Los titulares principales, cifras destacadas o grandes claims de portada pueden entrar en esta categoría. El cuerpo de texto, los enlaces dentro de párrafos, los textos de botones de 14–16 px, las etiquetas y los avisos legales normalmente no.
No uses la excepción de texto grande para justificar un contraste pobre en elementos que el usuario necesita leer rápido o usar con precisión.
Botones, formularios e indicadores de foco
El contraste no se limita a los párrafos. WCAG también exige al menos 3:1 para la información visual necesaria para identificar y utilizar controles de interfaz y gráficos significativos.
Revisa especialmente:
- Bordes de campos de formulario. Un borde gris muy claro sobre fondo blanco puede hacer que el campo parezca inexistente.
- Checkboxes y botones de opción. Deben distinguirse del fondo tanto sin seleccionar como en los estados necesarios para usar el control.
- Iconos funcionales. Menú, búsqueda, cerrar, carrito o descarga no pueden desvanecerse en el fondo.
- Botones sin relleno. El contorno y el texto deben seguir diferenciándose de los colores adyacentes.
- Indicador de foco. Al navegar con teclado, debe verse con claridad dónde está el foco.
- Gráficos. Las líneas, barras o áreas necesarias para interpretar datos requieren contraste suficiente.
Los elementos puramente decorativos, los controles desactivados y los logotipos no están sujetos a ese mismo criterio. Aun así, un diseño que deja un control activo casi invisible sigue siendo un mal diseño aunque parezca minimalista.
Errores frecuentes de contraste
| Combinación | Ratio | Resultado |
|---|---|---|
Azul claro #3399FF sobre blanco. | 2,94:1. | No alcanza el mínimo ni para texto grande. |
Azul #0066CC sobre blanco. | 5,57:1. | Cumple AA para texto normal. |
Blanco sobre amarillo #FFCC00. | 1,51:1. | Ilegible. |
Rojo #FF0000 sobre verde #00AA00. | 1,29:1. | Ilegible y problemático para parte de las personas con daltonismo. |
Rojo oscuro #CC0000 sobre blanco. | 5,89:1. | Cumple AA para texto normal. |
Estos son los patrones que más se repiten:
- Grises claros usados como texto de cuerpo.
- Colores de marca usados en enlaces o botones sin comprobar el texto blanco.
- Texto blanco sobre amarillo, turquesa o verde lima.
- Placeholders demasiado claros en formularios.
- Texto sobre una foto o un vídeo sin una capa que estabilice el fondo.
- Estados hover, focus, error o selección que no se revisan.
Un buen ejemplo práctico es un botón de color amarillo con texto blanco. Puede llamar la atención, pero si no alcanza la ratio necesaria deja de ser una llamada a la acción clara.
El color no puede ser el único aviso
El contraste y el uso exclusivo del color son problemas relacionados, pero distintos.
Un error de formulario no debería indicarse únicamente con un borde rojo: necesita además un icono, un texto o un mensaje que explique qué ha ocurrido. Un gráfico no debería depender solo de líneas rojas y verdes: debe incorporar etiquetas, patrones o formas diferenciables.
En los enlaces dentro de un párrafo, el subrayado sigue siendo la solución más directa. Si se prescinde de él, el enlace debe diferenciarse suficientemente del texto que lo rodea y cambiar de forma perceptible al recibir foco o al pasar el cursor.
Cómo comprobarlo antes de publicar
Las herramientas ayudan, pero el contraste debe formar parte del proceso, no de una corrección de última hora.
Puedes utilizar:
- WebAIM Contrast Checker. Introduce dos colores y muestra la ratio y los niveles WCAG que cumplen.
- Colour Contrast Analyser de TPGi. Permite medir colores directamente con un cuentagotas de pantalla.
- DevTools de Chrome, Edge y Firefox. El selector de color suele mostrar la ratio y los límites AA/AAA al inspeccionar estilos.
- Lighthouse y axe DevTools. Detectan muchos contrastes insuficientes de forma automática.
- Plugins de Figma. Herramientas como Stark o Contrast permiten detectar el problema antes de desarrollar.
Un flujo útil tiene tres fases:
- Diseño. Define una matriz de combinaciones permitidas para fondo, texto, enlaces, botones y estados.
- Desarrollo. Guarda los colores como variables CSS o tokens y documenta para qué puede usarse cada uno.
- QA. Ejecuta una auditoría automática y revisa manualmente hover, focus, errores, controles desactivados y texto sobre imágenes.
No basta con comprobar la portada. Conviene revisar también formularios, procesos de compra o reserva, filtros, modales, mensajes de validación y cualquier componente interactivo.
¿Y APCA o WCAG 3?
APCA es un método de contraste en desarrollo que intenta tener en cuenta el tamaño, el grosor de la tipografía y la diferencia entre texto claro sobre fondo oscuro y texto oscuro sobre fondo claro.
Puede servir para seguir la evolución de la accesibilidad y mejorar decisiones de diseño, pero no sustituye hoy los criterios WCAG 2.x aplicables. Para comprobar requisitos actuales, sigue utilizando las ratios de este artículo.
El contraste se decide antes de maquetar
Cambiar un gris, oscurecer un enlace o añadir una capa sobre una fotografía puede parecer una corrección menor. Sin embargo, esos ajustes determinan si una persona puede leer, localizar un campo o completar una acción.
La forma más eficaz de evitar problemas no es revisar colores uno a uno al terminar el proyecto. Es definir desde el principio qué combinaciones están permitidas, convertirlas en componentes y comprobarlas cada vez que se añada una nueva pantalla o estado.
Si un elemento importante no se puede distinguir, no está cumpliendo su función.
