Verificador de Contraste de Colores
Verificador de contraste de colores gratuito — verifica conformidad WCAG 2.2 AA y AAA al instante. Vista previa en vivo, simulación de daltonismo y...
Actualizado mayo de 2026
Revisado por Rafael Duarte
Good color contrast ensures text is readable for all users, including those with low vision or color blindness. Aim for WCAG 2.2 AA compliance to meet legal accessibility standards.
Accessibility Fix
Your colors pass AA!
No fix needed for normal text contrast.
Color Blindness Simulation
WCAG 2.2 Reference
| Metric | Current Value | Threshold | Status |
|---|---|---|---|
| Normal Text (AA) | 6.18:1 | 4.5:1 | PASS |
| Normal Text (AAA) | 6.18:1 | 7:1 | FAIL |
| Large Text (AA) | 6.18:1 | 3:1 | PASS |
| Large Text (AAA) | 6.18:1 | 4.5:1 | PASS |
| UI Components (AA) | 6.18:1 | 3:1 | PASS |
Cómo usar el verificador de contraste de colores
Dos colores, cumplimiento WCAG al instante
1. Define el texto y el fondo
Haz clic en la muestra de color para abrir el selector o escribe el código HEX de 6 dígitos. "Swap Colors" invierte texto y fondo al instante.
2. Revisa el ratio y el nivel WCAG
El ratio de contraste y el estado AA/AAA para texto normal, texto grande y componentes de interfaz aparecen en la misma pantalla, sin recargar nada.
3. Corrige el color o simula daltonismo
"Accessibility Fix" sugiere el tono aprobado más cercano conservando tu matiz; el simulador muestra Deuteranopia, Protanopia, Tritanopia y Acromatopsia.
Qué hace este verificador de contraste
Más allá de calcular el ratio
Sugerencia automática de color accesible
Encuentra el color aprobado más cercano al original preservando el matiz, en vez de solo marcar el fallo y dejarte a ti la búsqueda.
Simulación de 4 tipos de daltonismo
Deuteranopia, Protanopia, Tritanopia y Acromatopsia, además de la visión normal, para comprobar lo que realmente distinguen esos usuarios.
Vista previa de texto en vivo
Muestra la combinación en texto grande, texto de párrafo y botones para juzgar la legibilidad real, no solo un número aislado.
100% en el navegador
Ningún color se envía a un servidor — seguro para revisar paletas de marca que todavía no se han lanzado públicamente.
Copia el ratio con Shift+Enter
Presiona Shift+Enter en cualquier parte de la página para copiar el ratio actual — útil para pegarlo directo en un informe de auditoría.
Puntos de referencia de contraste
Combinaciones habituales y en qué nivel quedan
Cuándo vas a necesitar esta herramienta
Los escenarios más comunes entre quienes la usan
Revisión de diseño web y móvil
Verifica texto, botones y campos de formulario antes de publicar — corregir un par que reprueba antes del lanzamiento sale mucho más barato que después.
Auditorías de cumplimiento legal
EAA, Ley 11/2023 (España), ADA y Section 508 citan este mismo umbral — la tabla de referencia muestra cada métrica con su límite exacto.
Verificación de modo oscuro
Las mismas razones WCAG aplican con cualquier tema — confirma que el texto claro siga cumpliendo sobre un fondo oscuro, no solo sobre blanco.
Accesibilidad del color de marca
Comprueba si un color corporativo funciona como texto o como componente de interfaz y encuentra la alternativa más cercana que aprueba.
Seguridad para usuarios con daltonismo
Confirma que una combinación aprobada por luminancia siga siendo distinguible — corre las simulaciones de Deuteranopia y Protanopia antes de dar el diseño por cerrado.
¿Error común? Empieza por aquí
Confiar en la diferencia visual y no en el ratio
Dos colores que se ven muy distintos pueden tener una luminancia casi idéntica y reprobar igual — comprueba siempre el número, no el ojo.
Ignorar el daltonismo aunque el ratio apruebe WCAG
WCAG mide luminancia, no distinción de color — una combinación rojo/verde puede aprobar el ratio y seguir siendo indistinguible para una persona daltónica.
No tener en cuenta el tamaño del texto
El texto grande (18pt o más, o 14pt en negrita) solo necesita 3:1 en vez de 4.5:1 — subir el tamaño de fuente puede salvar un color que de otro modo reprueba.
Aplicar el umbral de componentes de interfaz al texto
Los componentes de interfaz exigen solo 3:1 y no tienen nivel AAA — usar esa regla para texto normal, que exige 4.5:1, aprueba por error un texto que en la práctica reprueba.
Pensar que la corrección sugerida también aprueba en AAA
El panel "Accessibility Fix" apunta al mínimo de AA (4.5:1), no a AAA (7:1) — si tu proyecto exige AAA, revisa el ratio sugerido en la tabla antes de aplicarlo.
Por qué usar este verificador de contraste
El contraste insuficiente sigue siendo el fallo de accesibilidad más común en la web, presente en la gran mayoría de los sitios analizados por WebAIM Million. Con normativas ya en vigor a ambos lados del Atlántico, comprobarlo dejó de ser opcional.
La sugerencia automática de corrección y la simulación de daltonismo van más allá de calcular un ratio: muestran exactamente cómo resolver un fallo y revelan problemas que el número por sí solo no captura.
En España, la Ley 11/2023 exige el nivel AA de WCAG 2.1 para el sector público y para empresas que prestan servicios esenciales; en la Unión Europea la EAA marca el mismo estándar desde junio de 2025; y en Latinoamérica leyes como la 26.653 en Argentina van sumando países que citan WCAG como referencia técnica. Verificar el contraste ya es parte del cumplimiento legal, no solo buena práctica de diseño.
Requisitos de contraste WCAG 2.2
AA (mínimo legal) frente a AAA (nivel mejorado)
Preguntas frecuentes
Es una herramienta que calcula el ratio de contraste entre dos colores — normalmente texto y fondo — y determina si cumple los estándares WCAG de accesibilidad. Esta también simula daltonismo y sugiere alternativas accesibles cuando un par reprueba.
Recursos
La herramienta de referencia original para verificar el contraste WCAG.
Guía en español de MDN sobre el criterio de contraste mínimo de WCAG y cómo aplicarlo.
Análisis anual de accesibilidad de un millón de páginas de inicio, con el contraste como fallo más frecuente.
Herramientas relacionadas
- Conversor de Colores Diseño Convierte colores entre HEX, RGB, HSL y CMYK al instante. Selector de color gratuito online con comprobador de contraste WCAG y generador de paletas.
- Generador de Paleta de Colores Diseño Genera paletas de colores armoniosas desde cualquier color base. Elige armonía Análoga, Complementaria, Triádica o Tetrádica — exporta como CSS variables o...
- Paleta de Colores desde Imagen Diseño Extrae paletas de colores de cualquier imagen — obtén códigos HEX, RGB, HSL y exporta como CSS variables, Tailwind, JSON o PNG. 100% en el navegador, sin...
- Generador CSS Box Shadow — Neumorfismo, Glassmorfismo y Tailwind Diseño Generador CSS box shadow gratuito con vista previa en tiempo real. Crea sombras, efectos neumorfismo y glassmorfismo. Exporta a CSS, Tailwind o variables CSS.
- Generador CSS Flexbox Diseño Generador CSS Flexbox gratis: vista previa en tiempo real, CSS y Tailwind simultáneos, 10 layouts predefinidos, avisos contextuales y exportación React/JSX. Sin registro.
