Contrast Checker
Check the contrast ratio between two colors for WCAG accessibility compliance.
Preview
Large Text (18pt+)
Heading Example
This is an example of large text content to demonstrate contrast.
Normal Text (under 18pt)
Regular paragraph text that users would typically read.
Smaller text that might be used for secondary content.
Verificador de Contraste de Color
Asegúrate que tus diseños web cumplan con los estándares de accesibilidad con nuestro verificador profesional de contraste de color. Prueba combinaciones de colores contra las directrices WCAG 2.1 para cumplimiento AA y AAA.
¿Por Qué Usar Nuestro Verificador de Contraste de Color?
Nuestro verificador de contraste de color es una herramienta esencial para diseñadores y desarrolladores web que desean crear experiencias digitales accesibles e inclusivas. Esta poderosa herramienta te ayuda a garantizar que tus combinaciones de colores cumplan con los rigurosos estándares establecidos por las Directrices de Accesibilidad para el Contenido Web (WCAG), haciendo tu contenido utilizable para personas con diversas discapacidades visuales.
El cumplimiento de accesibilidad no se trata solo de seguir regulaciones—se trata de alcanzar la audiencia más amplia posible. Aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres en todo el mundo experimentan alguna forma de deficiencia de visión del color, y muchos otros se benefician del alto contraste debido a la visión relacionada con la edad o la visualización en condiciones de iluminación desafiantes.
Nuestra herramienta proporciona retroalimentación instantánea sobre tus elecciones de color, mostrándote exactamente qué combinaciones funcionan y cuáles no, ayudándote a tomar decisiones informadas sobre los colores de tu sistema de diseño e interfaz de usuario.
Beneficios Clave
- Cumplimiento Legal: Cumple con requisitos de accesibilidad como ADA, Sección 508 y estándares WCAG
- Mejor Experiencia de Usuario: Crea interfaces fáciles de leer y navegar para todos los usuarios
- Diseño Profesional: Asegura que tus elecciones de color funcionen bien en todos los contextos y condiciones de iluminación
- Ahorro de Tiempo: Obtén resultados instantáneos sin cálculos manuales o suposiciones
Entendiendo los Estándares WCAG
Las Directrices de Accesibilidad para el Contenido Web (WCAG) proporcionan ratios de contraste específicos que aseguran que el texto permanezca legible:
Nivel AA (Cumplimiento Mínimo)
Ratio 4.5:1 para texto normal (menos de 18pt o 14pt negrita)
Ratio 3:1 para texto grande (18pt+ o 14pt+ negrita)
Nivel AAA (Cumplimiento Mejorado)
Ratio 7:1 para texto normal
Ratio 4.5:1 para texto grande
Estos ratios aseguran que el texto permanezca legible para usuarios con deficiencias de visión del color, baja visión, o aquellos que visualizan contenido en condiciones de iluminación deficientes.
¿Quién Debería Usar Esta Herramienta?
Diseñadores UI/UX
Crean interfaces accesibles y sistemas de diseño
Desarrolladores Web
Implementan esquemas de color accesibles en código
Creadores de Contenido
Aseguran legibilidad del texto en todos los dispositivos
WCAG AA vs AAA, explicado
El contraste de color es el fallo de accesibilidad más común en la web — y uno de los más fáciles de corregir. Esto es lo que significan los números y cómo cumplirlos siempre.
AA (mínimo)
4.5:1 para texto normal · 3:1 para texto grande (18pt / 14pt bold o mayor) y componentes de interfaz como botones, inputs e iconos.
AAA (reforzado)
7:1 para texto normal · 4.5:1 para texto grande. Requisito habitual en sector público, salud y guías de marca estrictas.
Cómo se calcula el contraste
Es el ratio entre la luminancia relativa de dos colores, de 1:1 (blanco sobre blanco) a 21:1 (negro sobre blanco):
(L1 + 0.05) / (L2 + 0.05) La luminancia relativa pondera cada canal RGB tras la corrección gamma. Por eso dos colores que parecen distintos en saturación pueden fallar igualmente: la saturación no importa, la luminancia sí.
Fallos comunes y soluciones
Texto gris sobre blanco
#999999 sobre blanco da 2.8:1 — suspende AA. Oscurece a #767676 (4.54:1) para texto cuerpo conforme.
Texto blanco sobre colores de marca
Blanco sobre ámbar #F59E0B da 2.2:1. Oscurece el fondo, cambia a texto oscuro o reserva la combinación para elementos decorativos.
Placeholders poco visibles
Los placeholders gris claro suelen fallar — no están exentos de WCAG, y una pista invisible es además un problema de usabilidad.
Enlaces coloreados en texto coloreado
Un enlace dentro del texto debe alcanzar 4.5:1 contra el fondo y distinguirse por algo más que el color — súbelo con subrayado.
| Tipo de texto | AA | AAA |
|---|---|---|
| Texto cuerpo (< 18pt) | 4.5:1 | 7:1 |
| Texto grande (≥ 18pt / 14pt bold) | 3:1 | 4.5:1 |
| Componentes UI y gráficos | 3:1 | — |
Usa el verificador de arriba para probar cualquier par texto/fondo en tiempo real. El color accesible no es el color aburrido — es el que verifica relaciones de luminancia desde el principio.