Contraste y colores: cómo revisarlos en tu diseño web
Diseña textos, botones y mensajes de error comprensibles: mide bien el contraste según las WCAG y revisa los colores en todo el diseño.
En resumen
Un esquema de color accesible hace que los textos sean legibles, los controles reconocibles y la información comprensible sin depender de un color concreto. Para ello, revisa combinaciones y estados concretos: una paleta bonita por sí sola no dice nada sobre la legibilidad de un error de formulario o de un botón.
Entender bien los valores mínimos
WCAG 2.2 AA exige un contraste mínimo de 4,5:1 entre el texto normal y el fondo. El texto grande necesita al menos 3:1. Se considera grande a partir de 18 puntos, o de 14 puntos en negrita; en CSS, 18 puntos equivalen a 24 píxeles. Por tanto, los encabezados no quedan exentos del valor más alto solo por su función. El valor calculado no se redondea: 4,49:1 no llega a 4,5:1.
La pauta incluye excepciones, por ejemplo para el texto puramente decorativo, los controles inactivos y el texto de los logotipos. Un texto corrido normal en el color de la marca no entra en la excepción de los logotipos. En el día a día, deja algo de margen, sobre todo con tipografías finas.
No medir solo el texto
Según el criterio de conformidad 1.4.11, la información gráfica importante y los indicadores visuales que permiten reconocer los controles activos o su estado necesitan, por regla general, un contraste de 3:1 con los colores adyacentes. Esto afecta, por ejemplo, al contorno necesario de un campo, a un icono con significado o a la marca de una casilla seleccionada. Lo decisivo es la presentación concreta; no todo borde decorativo tiene que cumplir este valor.
Por eso, revisa un campo de búsqueda en su conjunto: ¿puedes reconocer el campo, leer el texto que escribes y distinguir el foco del teclado? Una etiqueta con mucho contraste no resuelve por sí sola un foco invisible.
Complementar la información con palabras y formas
Un borde rojo no explica un error. Añade, por ejemplo: «Introduce una dirección de correo electrónico con @». Un estado de disponibilidad puede mostrar «En stock» junto al punto de color. Los gráficos se entienden mejor cuando las líneas tienen además patrones distintos y etiquetas directas. Así, el significado sigue siendo visible cuando alguien percibe los colores de otra manera o usa una pantalla con un modo de color modificado.
Crear una matriz de colores para componentes reales
- Reúne el texto corrido, los enlaces, los botones, los campos de entrada, los avisos y los mensajes de error de tu diseño real.
- Anota para cada componente el primer plano y el fondo en los estados predeterminado, foco, selección y error.
- Mide los colores CSS utilizados con un comprobador de contraste; ten en cuenta las transparencias, las imágenes y los degradados del fondo.
- Define variantes bien legibles como valores de diseño compartidos (design tokens) y corrige el componente en su origen.
- Después, comprueba los modos claro y oscuro, así como las páginas afectadas en el navegador.
Ejemplo: revisar un formulario y no solo una paleta
Toma un formulario de contacto y provoca un error a propósito. Revisa la etiqueta del campo, el texto introducido, el mensaje de error y el botón de envío. Cambia de un campo a otro con el teclado. Amplía la página y comprueba si el mensaje de error sigue asociado a su campo. Este pequeño escenario muestra qué combinaciones de colores coinciden realmente en el producto y te da una prueba repetible para cambios posteriores.
Documentar la aprobación de forma trazable
Documenta el componente revisado, sus estados y los valores utilizados. En los textos sobre imágenes, anota la zona concreta de la imagen o añade un fondo sólido detrás del texto. Un error de contraste detectado automáticamente es un buen punto de partida; su validez termina en el estado que se ha revisado realmente. Vuelve a revisar los componentes nuevos y los cambios de diseño importantes para que las combinaciones aprobadas se mantengan en el día a día.
Fuentes y estado de revisión
Aquí encontrarás las fuentes originales de este artículo. Última revisión: .
- W3C: contraste del texto y excepciones (1.4.3)
- W3C: contraste de controles y gráficos (1.4.11)
- W3C: no usar el color como única señal (1.4.1)
Los requisitos legales dependen del país, del proveedor y de la oferta concreta. Este artículo explica los fundamentos y los pasos de trabajo. Los resultados de las pruebas se refieren al alcance y la fecha documentados.