Verificador de Contraste de Colores
Verifica las relaciones de contraste de colores para el cumplimiento de accesibilidad WCAG. Prueba combinaciones de color de primer plano y fondo para garantizar que tus diseños sean accesibles para todos los usuarios.
Live Preview
Sample Text
Así es como se verá tu texto con la combinación de colores seleccionada.
Relación de contraste
14.18
Excellent
Copia la relación, colores y resultados WCAG
Cumplimiento WCAG
Min. ratio: 4.5:1
Regular text under 18pt / 14pt bold
Min. ratio: 7:1
Enhanced contrast for regular text
Min. ratio: 3:1
Text 18pt+ or 14pt+ bold
Min. ratio: 4.5:1
Enhanced contrast for large text
Min. ratio: 3:1
Icons, borders, form controls
Min. ratio: 3:1
Charts, graphs, meaningful graphics
Preset Combinations
Tabla de Contenidos
¿Qué es el contraste de color?
El contraste de color se refiere a la diferencia de luminancia (brillo) entre dos colores. Cuando se coloca texto sobre un fondo, la relación de contraste determina con qué facilidad se puede distinguir el texto de su fondo. Una mayor relación de contraste significa mejor visibilidad y legibilidad.
La relación de contraste se calcula usando una fórmula definida por el Consorcio World Wide Web (W3C) como parte de las Pautas de Accesibilidad para el Contenido Web (WCAG). Esta fórmula compara la luminancia relativa de dos colores para producir una relación que va desde 1:1 (sin contraste, colores idénticos) hasta 21:1 (contraste máximo, negro sobre blanco o viceversa).
Entender y probar el contraste de colores es esencial para crear sitios web y aplicaciones accesibles que puedan ser utilizados por todos, incluidas personas con discapacidades visuales.
Pautas WCAG explicadas
Las Pautas de Accesibilidad para el Contenido Web (WCAG) definen requisitos específicos de relación de contraste para diferentes tipos de contenido. Estas pautas se organizan en dos niveles de conformidad: AA (mínimo) y AAA (mejorado).
| Tipo de contenido | Nivel AA | Nivel AAA |
|---|---|---|
| Texto normal (menor de 18pt / 14pt negrita) | 4.5:1 | 7:1 |
| Texto grande (18pt+ / 14pt+ negrita) | 3:1 | 4.5:1 |
| Componentes UI y Gráficos | 3:1 | N/A |
Nivel AA (Mínimo)
El nivel AA es el estándar base que la mayoría de las organizaciones buscan cumplir. Garantiza que el contenido sea legible por usuarios con visión moderadamente baja, lo que representa una parte significativa de la población. La mayoría de los requisitos legales de accesibilidad hacen referencia a WCAG 2.1 Nivel AA.
Nivel AAA (Mejorado)
El nivel AAA proporciona accesibilidad mejorada y se recomienda para usuarios con discapacidades visuales más graves. Si bien cumplir con AAA para todo el contenido puede no ser siempre factible, es beneficioso para el contenido crítico como la navegación principal y el texto importante.
Por qué importa el contraste
El buen contraste de color es esencial por varias razones:
- Discapacidades visuales: Aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres tienen algún tipo de deficiencia en la visión de colores. El contraste adecuado garantiza que el contenido sea legible independientemente de la percepción del color.
- Ojos envejecidos: A medida que las personas envejecen, la capacidad de sus ojos para distinguir colores y percibir el contraste disminuye. Un buen contraste ayuda a mantener la legibilidad para usuarios mayores.
- Condiciones ambientales: El deslumbramiento de la pantalla, la luz solar brillante y las condiciones de poca luz afectan cómo aparecen los colores. El texto de alto contraste sigue siendo legible en diversas condiciones.
- Cumplimiento legal: Muchos países tienen leyes que requieren que los sitios web cumplan con los estándares de accesibilidad. La Ley de Estadounidenses con Discapacidades (ADA) y legislación similar a menudo hacen referencia a las pautas WCAG.
- Mejor UX para todos: El texto de alto contraste es más fácil y rápido de leer para todos los usuarios, reduciendo la fatiga visual y mejorando la experiencia de usuario en general.
- Beneficios de SEO: Los motores de búsqueda consideran cada vez más la accesibilidad como un factor de clasificación, lo que hace que el diseño accesible sea beneficioso también para la visibilidad.
Cómo usar esta herramienta
1. Ingresa tus colores
Usa los selectores de color o ingresa códigos de color hexadecimales directamente. El color de primer plano representa el color de tu texto, mientras que el color de fondo representa la superficie detrás del texto.
2. Revisa los resultados
La herramienta calcula instantáneamente la relación de contraste y te muestra qué niveles de cumplimiento WCAG pasa tu combinación de colores. Busca las insignias verdes "PASA" para confirmar la accesibilidad.
3. Usa la vista previa
El área de vista previa en vivo muestra exactamente cómo aparecerá tu texto sobre el fondo. Esto te ayuda a hacer juicios visuales junto con la relación numérica.
4. Aplica sugerencias
Si tu combinación no cumple los requisitos WCAG, la herramienta sugerirá colores ajustados que cumplen la relación de contraste mínima mientras permanecen cercanos a tu elección original.
Mejores prácticas
Prueba temprano y con frecuencia
Verifica el contraste de colores durante la fase de diseño, no después del desarrollo. Es mucho más fácil ajustar colores en maquetas que refactorizar interfaces implementadas.
No confíes solo en el color
Usa señales visuales adicionales como iconos, subrayados o patrones para transmitir información. Esto ayuda a los usuarios que pueden tener dificultades para distinguir ciertos colores.
Considera todos los estados
Prueba el contraste para todos los estados interactivos: los estados de hover, focus, activo y deshabilitado deben mantener relaciones de contraste adecuadas.
Cuida el tamaño de tu texto
Recuerda que el texto grande (18pt+ o 14pt+ negrita) tiene requisitos de contraste más bajos. Aprovecha esto para encabezados mientras aseguras que el texto del cuerpo cumpla con estándares más estrictos.
Documenta tu sistema de colores
Crea y mantén una paleta de colores documentada con combinaciones aprobadas. Esto garantiza consistencia en tu proyecto y acelera las futuras decisiones de diseño.
Preguntas frecuentes
El nivel AA es el estándar mínimo que la mayoría de las organizaciones deben cumplir. Requiere una relación de contraste de 4,5:1 para texto normal y 3:1 para texto grande. El nivel AAA es accesibilidad mejorada, que requiere 7:1 para texto normal y 4,5:1 para texto grande. Si bien AAA es ideal, el cumplimiento AA es típicamente suficiente para los requisitos legales y cubre a la mayoría de los usuarios con discapacidades visuales.
El texto grande se define como texto de al menos 18 puntos (24px) con peso normal, o al menos 14 puntos (aproximadamente 18,5px) en negrita. Esto incluye la mayoría de los encabezados y texto de visualización. El texto grande tiene requisitos de contraste más bajos porque su tamaño lo hace inherentemente más legible.
Esta herramienta actualmente prueba solo colores sólidos (opacos). Para colores transparentes, necesitarías calcular el color efectivo después de que se componga sobre su fondo. El color final renderizado es lo que importa para las pruebas de contraste.
La relación 4,5:1 se determinó mediante investigación exhaustiva para proporcionar contraste suficiente para usuarios con visión moderadamente baja (aproximadamente 20/40 de visión). Este nivel compensa la pérdida de sensibilidad al contraste que viene con las discapacidades visuales típicas y el envejecimiento.
Concéntrate en probar combinaciones donde aparece texto: texto del cuerpo sobre fondos, botones, etiquetas de formulario, elementos de navegación y cualquier texto significativo. Los elementos decorativos sin texto no requieren pruebas de contraste. Crear una paleta de colores documentada con combinaciones pre-aprobadas puede agilizar este proceso.
Sí, pero debes asegurarte de que el texto mantenga un contraste adecuado contra todas las partes del degradado que superpone. Prueba contra las áreas más claras y más oscuras del degradado. Si el contraste falla en algún punto, considera agregar una superposición de fondo sólido detrás del texto.
El texto sobre imágenes es desafiante porque el fondo varía. Las soluciones comunes incluyen usar una superposición semitransparente, sombras de texto o asegurarse de que el texto esté en un área de color consistente. Siempre prueba el peor escenario (punto de menor contraste) cuando el texto superpone fondos variables.
Si bien el contraste máximo (21:1, negro puro sobre blanco puro) es técnicamente accesible, algunos usuarios con dislexia o sensibilidad visual lo encuentran duro. Considera usar fondos blancos apagados (#F5F5F5) o texto gris muy oscuro (#1A1A1A) en lugar de extremos puros para el texto del cuerpo mientras mantienes excelentes relaciones de contraste.