Verificador de Contraste de Color (WCAG)

Comprueba si dos colores cumplen los mínimos de contraste de WCAG 2.1.

Contraste y accesibilidad

WCAG (Pautas de Accesibilidad para el Contenido Web) establece las relaciones mínimas de contraste para texto legible. El nivel AA — el estándar que buscan la mayoría de los sitios — requiere 4.5:1 para texto normal y 3:1 para texto grande (18pt+ o 14pt en negrita). AAA es más estricto con 7:1. No cumplir con estos hace tu sitio ilegible para usuarios con baja visión o pantallas antiguas.

Las relaciones de contraste no son intuitivas. El rojo sobre negro puede verse llamativo pero solo alcanza 5.25:1 — apenas pasando AA. El gris pálido sobre fondos blancos, común en diseños modernos "minimalistas", a menudo falla por completo. Esta calculadora muestra la relación y qué niveles de WCAG pasa cada par de colores.

Frequently asked questions

¿Qué es WCAG y cuáles son los requisitos de contraste?
WCAG (Pautas de Accesibilidad para el Contenido Web) es el estándar para la accesibilidad web. Los requisitos de contraste: el nivel AA requiere una relación de contraste de 4.5:1 para texto normal y 3:1 para texto grande (18pt+ o 14pt en negrita). AAA (más estricto) requiere 7:1 y 4.5:1 respectivamente. La mayoría de los sitios apuntan al AA.
¿Cómo se calcula la relación de contraste?
Comparando la luminancia relativa de dos colores: relación = (L1 + 0.05) / (L2 + 0.05), donde L1 es el color más claro y L2 el más oscuro. Blanco sobre negro es 21:1 (el máximo). Rojo puro (#FF0000) sobre negro puro es solo 5.25:1 — el rojo se percibe más apagado de lo que uno esperaría.
¿Por qué algunos pares de colores se ven bien pero fallan?
Tus ojos se ajustan al contexto. El gris sobre gris puede sentirse legible para alguien con visión perfecta en buena iluminación, pero fallar para usuarios con baja visión, monitores antiguos, reflejos del sol o daltonismo. Las relaciones de WCAG son mínimos que funcionan para la audiencia más amplia — no el estándar de "me parece bien a mí".
¿Qué hay de los elementos que no son texto?
WCAG 2.1 añadió la directriz 1.4.11: los componentes de UI y objetos gráficos necesitan un contraste de 3:1 con los colores adyacentes. Eso incluye bordes de formulario, iconos, gráficas e indicadores de foco. Los bordes gris claro sutiles sobre fondos blancos fallan en esto — un problema común en los diseños minimalistas modernos.

Calculadora de comisiones de Shopify Payments

Comisiones de procesamiento de Shopify Payments por nivel de plan (Basic/Shopify/Advanced/Plus), en línea o presencial, más recargo por pasarela externa.

Generador Aleatorio

Números aleatorios seguros, contraseñas y cadenas.

Calculadora de comisiones de Mercari

Comisión de venta de Mercari + procesamiento de pago con modo de ganancia y búsqueda de objetivo.