Cómo comprobar el contraste de colores para accesibilidad
El contraste entre el texto y el fondo determina si tu contenido se puede leer: un gris claro sobre blanco puede parecer elegante en tu pantalla y ser ilegible para la mitad de tus visitantes, especialmente con sol en la pantalla o con alguna limitación visual.
Las pautas WCAG (Web Content Accessibility Guidelines) definen ratios de contraste mínimos y medibles, y cumplirlos no es solo buena práctica: en muchos países es una obligación legal para webs públicas y cada vez más para privadas. En esta guía aprenderás los umbrales exactos y cómo comprobarlos. Cuando necesites pasar tus colores entre formatos para hacer las pruebas, la herramienta gratuita de Tótem (usatotem.com/herramientas-diseno/rgb-a-hex/) convierte RGB a HEX al instante.
Los umbrales WCAG que debes memorizar
El WCAG define dos niveles de conformidad. El nivel AA (el estándar exigible en la mayoría de normativas) pide un ratio de contraste de al menos 4,5:1 para texto normal y 3:1 para texto grande (a partir de 18 pt, o 14 pt en negrita) y componentes de interfaz.
El nivel AAA (el más exigente) sube a 7:1 para texto normal y 4,5:1 para texto grande. Es el objetivo ideal para cuerpos de texto largos, aunque no siempre es exigible legalmente.
El ratio se calcula con la luminancia relativa de cada color mediante la fórmula (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia del color más claro. El resultado va de 1:1 (sin contraste, p. ej. blanco sobre blanco) a 21:1 (negro sobre blanco, el máximo).
Paso 1: Mide el contraste de tus combinaciones
Paso 1: identifica todas las combinaciones texto/fondo de tu diseño: cuerpo de texto, titulares, botones (texto del botón sobre su fondo), enlaces, placeholders de formularios y texto sobre imágenes.
Paso 2: obtén los valores de color exactos en HEX o RGB de cada pareja. Si tus colores están en RGB (por ejemplo, de un archivo de diseño), el conversor gratuito de RGB a HEX de Tótem te da el formato que aceptan la mayoría de comprobadores.
Paso 3: introduce cada pareja en un comprobador de contraste (hay varios gratuitos online): te devuelve el ratio exacto y si supera AA y AAA para texto normal y grande.
Paso 4: prioriza por impacto: primero el cuerpo de texto (lo que más se lee), después botones y llamadas a la acción, después titulares y por último elementos decorativos.
Paso 5: documenta los resultados en tu guía de estilo: «Texto principal #1A1A1A sobre #FFFFFF = 17,4:1 (AAA)». Así, cada diseño futuro parte de combinaciones ya validadas.
Paso 2: Corrige las combinaciones que no pasan
Estrategia 1: oscurece el texto o aclara el fondo. Es el ajuste más simple: pasar un gris #999999 (2,85:1 sobre blanco, insuficiente) a #595959 (7,0:1, AAA) mantiene la estética grisácea y resuelve el problema.
Estrategia 2: aumenta el grosor o el tamaño. Un texto que no llega al 4,5:1 como texto normal puede cumplir como texto grande (3:1) si lo subes a 18 pt o a 14 pt en negrita. Útil para titulares, no para párrafos.
Estrategia 3: añade un fondo semitransparente tras el texto sobre imágenes. Un degradado oscuro bajo un titular blanco sobre foto garantiza el contraste sin importar la imagen de fondo.
Estrategia 4: reserva los colores de bajo contraste para elementos no esenciales. Un gris claro puede usarse en un divisor decorativo, pero nunca en el precio de un producto o en un mensaje de error.
Paso 3: Más allá del texto (formularios, focos y gráficos)
Los campos de formulario necesitan contraste en sus bordes: el WCAG 2.1 (criterio 1.4.11) pide 3:1 para los componentes de interfaz. Un input con borde #E0E0E0 sobre fondo blanco (1,3:1) es prácticamente invisible para muchos usuarios.
El indicador de foco del teclado (el contorno que aparece al navegar con Tab) también debe tener 3:1 contra el fondo adyacente. Eliminar el outline «porque queda feo» sin sustituirlo por otro indicador visible es un fallo grave de accesibilidad.
En gráficos y diagramas, no codifiques información solo con color: un gráfico de tarta con segmentos rojo/verde es inútil para una persona con daltonismo. Añade etiquetas, patrones o iconos además del color.
Los placeholders (el texto de ejemplo dentro de los inputs) suelen tener contraste insuficiente por diseño: úsalos como ayuda, nunca como sustituto de la etiqueta visible del campo.
Regla de oro: si un usuario no puede percibirlo, no puede usarlo. El contraste no es decoración, es funcionalidad.
Cómo integrar el contraste en tu flujo de trabajo
Paso 1: valida la paleta antes de diseñar. Cuando elijas los colores de marca, comprueba de inmediato las combinaciones texto/fondo principales. Cambiar un color en la fase de paleta cuesta minutos; cambiarlo con 50 pantallas diseñadas cuesta semanas.
Paso 2: incluye la comprobación en tu checklist de publicación: cada componente nuevo (botón, tarjeta, banner) pasa por el comprobador antes de aprobarse.
Paso 3: automatiza donde puedas: los linters de accesibilidad y las herramientas de auditoría (como el panel de accesibilidad de las DevTools del navegador) detectan fallos de contraste en toda la página de un vistazo.
Paso 4: forma al equipo en los umbrales básicos (4,5:1 y 3:1). Cuando diseñadores y redactores conocen los números, dejan de proponer combinaciones imposibles y las revisiones se reducen.
Paso 5: audita tu web completa una vez al año o tras un rediseño. Las webs crecen por acumulación y los fallos de contraste se cuelan en banners, popups y secciones nuevas sin que nadie los revise.
Herramientas gratuitas mencionadas
RGB a HEX
Convierte valores RGB (0–255) a código hexadecimal listo para tu CSS.
Usar gratisHEX a RGB
Convierte cualquier color hexadecimal a sus valores RGB al instante.
Usar gratisGenerador de paletas
Elige un color base y genera paletas armónicas: análoga, complementaria, triádica y más.
Usar gratisPreguntas frecuentes
¿Cuál es el contraste mínimo exigido por las WCAG?
Nivel AA: 4,5:1 para texto normal y 3:1 para texto grande (18 pt o 14 pt en negrita) y componentes de interfaz. Nivel AAA: 7:1 para texto normal y 4,5:1 para texto grande. El AA es el estándar exigido por la mayoría de normativas de accesibilidad.
¿Cómo se calcula el ratio de contraste?
Con la fórmula (L1 + 0,05) / (L2 + 0,05), donde L1 y L2 son las luminancias relativas del color más claro y el más oscuro. Va de 1:1 (sin contraste) a 21:1 (negro sobre blanco). En la práctica se usan comprobadores online que hacen el cálculo automáticamente.
¿El texto gris claro sobre blanco es accesible?
Depende del gris exacto: #777777 sobre blanco da 4,48:1 (no alcanza el AA) y #767676 da 4,54:1 (sí lo alcanza). Los grises intermedios viven justo en el límite, así que hay que medirlos con un comprobador en lugar de estimarlos a ojo.
¿El contraste importa también en botones y formularios?
Sí. El WCAG 2.1 exige 3:1 para componentes de interfaz (bordes de inputs, indicadores de foco) y el texto dentro de los botones debe cumplir los mismos umbrales que el resto del texto. Un botón bonito pero ilegible no convierte.
En resumen
El contraste es la base de la legibilidad: 4,5:1 para texto normal, 3:1 para texto grande e interfaces, medido con herramientas y no a ojo. Cumplirlo mejora la experiencia de todos tus usuarios, no solo de quienes tienen limitaciones visuales, y te protege ante exigencias legales crecientes.
Audita hoy tus combinaciones principales de texto y fondo, corrige las que no lleguen al AA y anota los valores validados en tu guía de estilo. Y para convertir tus colores al formato que necesite cada comprobador, el conversor gratuito de RGB a HEX de Tótem está a un clic.