En este artículo
Que es el contraste de color y por que importa
El contraste de color es la diferencia de luminancia entre dos colores, normalmente el texto en primer plano y su fondo. Un contraste suficiente garantiza que el texto sea legible para todos, incluidas las personas con baja vision o daltonismo. Un contraste deficiente hace que el contenido sea dificil o imposible de leer, excluyendo a millones de usuarios.
Las Pautas de Accesibilidad al Contenido Web (WCAG) definen relaciones de contraste minimas que garantizan la legibilidad para una amplia gama de capacidades visuales. Cumplir estos estandares no es solo una buena practica, sino un requisito legal en muchas jurisdicciones bajo leyes de accesibilidad como la ADA, EAA y EN 301 549.
Como funcionan las relaciones de contraste WCAG
WCAG utiliza la luminancia relativa para calcular las relaciones de contraste entre dos colores. La formula produce una relacion de 1:1 (sin contraste, colores identicos) a 21:1 (contraste maximo, negro sobre blanco).
- La luminancia relativa se calcula a partir de valores sRGB linealizados con la formula: L = 0.2126R + 0.7152G + 0.0722B
- La relacion de contraste es (L1 + 0.05) / (L2 + 0.05) donde L1 es el color mas claro y L2 el mas oscuro
- El texto normal (menos de 18pt o 14pt negrita) requiere al menos 4.5:1 para AA y 7:1 para AAA
Pruébalo gratis — sin registro
Verificar contraste →Niveles de conformidad WCAG AA vs AAA
WCAG define dos niveles de conformidad para el contraste de color. El nivel AA es el estandar minimo requerido por la mayoria de las regulaciones de accesibilidad, mientras que AAA proporciona accesibilidad mejorada para usuarios con deficiencias visuales mas severas.
- AA texto normal — requiere una relacion de contraste de al menos 4.5:1 para texto menor de 18pt (o 14pt negrita)
- AA texto grande — requiere al menos 3:1 para texto de 18pt o mas (o 14pt negrita o mas)
- AAA texto normal — requiere al menos 7:1 para el nivel mas alto de legibilidad
- AAA texto grande — requiere al menos 4.5:1 para texto grande en el nivel mejorado
- Contraste no textual — los componentes de interfaz y objetos graficos requieren al menos 3:1 contra colores adyacentes
Consejos para un diseno de color accesible
Disenar con accesibilidad en mente no significa sacrificar la estetica. Estos consejos practicos ayudan a crear disenos atractivos que todos puedan usar.
- Comience con el contraste — elija primero los colores de texto y fondo, luego construya su paleta alrededor
- Nunca confie solo en el color — use iconos, patrones o etiquetas junto con el color para transmitir significado
- Pruebe con contenido real — el texto de relleno puede verse bien, pero el contenido real puede revelar problemas de contraste
- Considere el modo oscuro por separado — los colores que pasan en modo claro pueden fallar en modo oscuro y viceversa
- Use una herramienta de verificacion de contraste — las herramientas automatizadas detectan problemas mas rapido que la inspeccion manual
Preguntas frecuentes
Cual es la relacion de contraste minima para la conformidad WCAG?
Para WCAG 2.1 Nivel AA, el texto normal requiere una relacion de contraste de al menos 4.5:1, y el texto grande (18pt o 14pt negrita) requiere al menos 3:1. El nivel AAA eleva estos a 7:1 y 4.5:1 respectivamente. La mayoria de las leyes de accesibilidad hacen referencia al nivel AA como estandar minimo.
El contraste de color importa para imagenes e iconos?
Si. El criterio de exito WCAG 2.1 1.4.11 requiere que los componentes de interfaz y objetos graficos tengan al menos 3:1 de contraste con los colores adyacentes. Esto incluye iconos, bordes de campos, indicadores de foco y elementos de graficos. Las imagenes decorativas estan exentas.
Como corrijo el bajo contraste sin cambiar mis colores de marca?
Puede ajustar la luminosidad de sus colores de marca manteniendo el mismo tono y saturacion. Por ejemplo, oscurezca un azul claro para texto o aclare un fondo oscuro. Otro enfoque es usar sus colores de marca para elementos decorativos grandes y neutros de alto contraste para el cuerpo del texto.