Herramientas › Contraste WCAG

Verificador de contraste de colores WCAG

Introduce el color del texto y del fondo — obtén el ratio de contraste y verificación según los estándares WCAG AA y AAA. Gratis, sin registro.

Texto
Fondo
Texto grande (18px+)
Texto normal (14px). Texto en negrita (14px). Así se ve el contenido sobre el fondo seleccionado con el color de texto elegido.
21 : 1
Ratio de contraste
Requisitos WCAG 2.1
📝AA — texto normal: mínimo 4.5:1
🔤AA — texto grande (18px+ o 14px negrita): mínimo 3:1
✨AAA — texto normal: mínimo 7:1
⭐AAA — texto grande: mínimo 4.5:1

Qué es WCAG

WCAG (Web Content Accessibility Guidelines) es un estándar internacional de accesibilidad web. El nivel AA es la base requerida para la mayoría de los sitios. AAA es el nivel ampliado para máxima accesibilidad.

Cómo se calcula el contraste

El ratio de contraste se calcula mediante la fórmula WCAG basada en la luminancia relativa de dos colores. El contraste máximo es 21:1 (negro sobre blanco), el mínimo es 1:1 (colores idénticos).

Por qué es importante

El bajo contraste dificulta la lectura para personas con discapacidad visual. En muchos países, el cumplimiento de WCAG AA es un requisito legal para sitios gubernamentales y comerciales.

Preguntas frecuentes
¿Cuál es el contraste mínimo para un sitio web?
Para texto normal — mínimo 4.5:1 (nivel AA). Para texto grande (18px o superior, o 14px en negrita) — 3:1. Estos son los requisitos básicos de WCAG para la accesibilidad.
¿Cuál es la diferencia entre AA y AAA?
AA es el nivel de accesibilidad estándar alcanzable para la mayoría de los diseños. AAA es el nivel ampliado con requisitos de contraste más estrictos. El cumplimiento AAA es deseable pero no siempre obligatorio.
¿Se aplican los requisitos a las imágenes?
Los requisitos de contraste WCAG se aplican al texto — normal y en imágenes. Los elementos decorativos y logotipos están excluidos de los requisitos.
¿Es gratuita esta herramienta?
Sí, completamente gratuito y sin límites. Sin registro.

Más herramientas de color

Selector de colorSube una foto y haz clic en cualquier punto — obtén HEX, RGB, HSL y nombre Paleta de imagenExtrae 5–8 colores dominantes de cualquier imagen Paleta para proyectoGenera N colores con legibilidad de texto garantizada Armonías de colorComplementarias, análogas, triádicas y split-complementarias Variaciones de colorMás claro, oscuro, saturado, pálido, cálido, frío Generador de degradadosCrea hermosos degradados y copia el código CSS Simulador de daltonismoCómo ven los colores personas con protanopía, deuteranopía y otros tipos Convertidor TailwindLa clase Tailwind más cercana para cualquier color HEX Convertidor de colorHEX ↔ RGB ↔ HSL ↔ CMYK al instante, con copia de código Color por nombreEncuentra HEX por nombre — «terracota», «índigo», «azur» Filtro CSS para SVGRecolorea iconos SVG con cualquier color vía CSS sin editor Paletas de coloresPaletas listas por temas — clic en un color para copiar HEX