Contrast Checker — Herramienta gratuita de proporción de contraste de accesibilidad WCAG

El color es una de las herramientas más poderosas en el diseño, pero también puede ser una de las más excluyentes. Una paleta de colores hermosa no significa nada si tus usuarios no pueden leer el texto. Un bajo contraste es la falla de accesibilidad más común en la web, afectando a más de 300 millones de personas con deficiencia en la visión cromática y a incontables otras que usan dispositivos móviles bajo la luz del sol o pantallas envejecidas con brillo desvanecido. Nuestra herramienta gratuita Contrast Checker calcula instantáneamente la proporción de contraste entre cualquier par de colores y te dice exactamente en qué posición se encuentran frente a los estándares WCAG AA y AAA — así puedes diseñar de forma inclusiva sin adivinar.

¿Qué es el contraste de color y por qué importa?

El contraste de color es la diferencia en el brillo percibido entre dos colores. Cuando el texto se encuentra sobre un fondo, el contraste entre ellos determina si el texto es legible. Si los colores son demasiado similares en brillo, se fusionan y se vuelven invisibles para personas con baja visión, daltonismo o incluso usuarios que fruncen los ojos ante una pantalla bajo la luz del sol directa.

Las Guías de Accesibilidad del Contenido Web (WCAG) definen el contraste matemáticamente usando la luminancia relativa — una medida de cuán brillante aparece un color al ojo humano. La fórmula tiene en cuenta el hecho de que nuestros ojos son más sensibles a la luz verde que al rojo o al azul. Un verde brillante podría parecer más claro que un rojo brillante incluso si tienen el mismo brillo numérico en RGB. La fórmula WCAG corrige esto, produciendo una proporción de contraste que refleja con precisión la percepción humana.

La proporción varía desde 1:1 (colores idénticos, sin contraste) hasta 21:1 (negro puro sobre blanco puro, máximo contraste). La mayoría de los diseños accesibles se sitúan en el medio. Una proporción de 4.5:1 es el mínimo para el texto normal bajo WCAG AA. 7:1 es el estándar más estricto AAA. Estos números no son arbitrarios — están basados en investigaciones extensas sobre lo que las personas con diferentes discapacidades visuales pueden distinguir realmente.

Más allá de la accesibilidad, el contraste afecta a todos. Los diseños de alto contraste son más fáciles de leer en pantallas pequeñas, en entornos brillantes y para usuarios mayores de 40 años cuyos ojos pierden naturalmente la sensibilidad al contraste. El texto de bajo contraste podría parecer elegante en una pantalla calibrada del diseñador, pero se vuelve ilegible en una laptop de bajo presupuesto, una pantalla de teléfono rota o un proyector en una habitación iluminada.

Cómo usar el Contrast Checker

Probar una combinación de colores toma segundos. Elige dos colores y obtén un veredicto inmediato.

1. Elige tu color de primer plano. Normalmente es el color de tu texto. Haz clic en el cuadro de color para abrir el selector nativo, o escribe directamente un código HEX en el campo de entrada.
2. Elige tu color de fondo. Es la superficie detrás de tu texto. Usa el mismo selector o ingresa manualmente un código HEX.
3. Lee la proporción de contraste. La herramienta muestra la proporción exacta de forma destacada — por ejemplo, 7.23:1 — para que sepas exactamente en qué posición te encuentras.
4. Verifica la conformidad con WCAG. La tabla de resultados muestra el estado de aprobación o rechazo para:
   • Texto normal en WCAG AA (4.5:1) y AAA (7:1)
   • Texto grande en WCAG AA (3:1) y AAA (4.5:1)
   • Componentes de UI en WCAG AA (3:1)
5. Previsualiza los colores en contexto. La herramienta muestra muestras de texto normal y de encabezados grandes renderizados con tu combinación elegida, para que puedas juzgar la legibilidad real visualmente.
6. Intercambia los colores con el botón de voltea para probar la combinación inversa — texto claro sobre fondo oscuro en lugar de texto oscuro sobre fondo claro.
7. Copia la proporción a tu portapapeles con un solo clic para documentación o notas del sistema de diseño.

Todo el proceso es instantáneo. Ajusta cualquiera de los colores y observa cómo la proporción, la tabla de conformidad y la previsualización se actualizan en tiempo real.

Entendiendo las proporciones de contraste

Rango de proporción	Nivel de accesibilidad	Qué significa
1:1 a 2.99:1	Fails all standards	El texto es apenas distinguible del fondo; inutilizable para cualquier contenido legible
3:1 a 4.49:1	Pasa AA solo para texto grande y UI	Adecuado para títulos grandes (18pt+), botones, iconos y bordes; falla para texto cuerpo
4.5:1 a 6.99:1	Pasa AA para todo el texto	Cumple con el estándar mínimo para texto cuerpo normal; legible para la mayoría de los usuarios
7:1 a 21:1	Pasa AAA para texto normal	Accesibilidad mejorada; legible para usuarios con pérdida significativa de visión; ideal para contenido extenso

¿Qué se considera "Texto Grande"?

WCAG define texto grande como 18 puntos (24 píxeles) o más grande, o 14 puntos en negrita (aproximadamente 18.67 píxeles en negrita) o más grande. Los títulos, botones de llamada a la acción y texto heroico suelen calificar como texto grande, lo que significa que pueden pasar con una proporción de contraste más baja que el texto cuerpo. Sin embargo, perseguir al menos 4.5:1 en todas partes sigue siendo una mejor práctica porque asegura coherencia y protege tu diseño contra el redimensionamiento y el zoom.

¿Por qué la fórmula usa luminancia relativa?

La fórmula de contraste WCAG no es una comparación simple de valores RGB. Primero convierte cada color en luminancia relativa — una medida del brillo percibido que pondera el verde más que el rojo o el azul porque los ojos humanos son más sensibles a la luz verde. Por eso dos colores con valores de brillo idénticos en RGB pueden producir proporciones de contraste muy diferentes. Un rojo puro (#FF0000) y un verde puro (#00FF00) tienen intensidad máxima en un canal, pero el verde aparece mucho más brillante para los ojos humanos, por lo que su luminancia relativa es mayor.

Características clave

Característica	¿Qué hace?	¿Por qué importa?
Cálculo de contraste en tiempo real	Calcula la proporción WCAG instantáneamente al ajustar colores	Itera a través de opciones de paleta y ve actualizaciones de conformidad inmediatamente
Pruebas WCAG AA & AAA	Muestra aprobación/rechazo para texto normal, texto grande y componentes de UI en ambos niveles	Sepa exactamente qué estándares cumple sin memorizar umbrales
Previsualización de texto en vivo	Renderiza muestras de texto cuerpo y encabezados grandes con sus colores	Juzgue la legibilidad visualmente, no solo matemáticamente
Intercambio de colores	Invierte primer plano y fondo con un solo clic	Pruebe variantes de texto claro sobre fondo oscuro y viceversa instantáneamente
Entrada HEX	Acepta códigos HEX directamente para coincidencias de color precisas	Coincida con colores exactos de su sistema de diseño
Copiar proporción	Copia la proporción de contraste al portapapeles	Documente la conformidad de accesibilidad en especificaciones de diseño y auditorías
Primero la privacidad	Todos los cálculos se realizan en su navegador	No se envía ningún dato de diseño a ningún servidor

A diferencia de herramientas básicas de contraste que solo muestran un número, este verificador coloca la proporción en contexto. No solo ve que su combinación obtiene 4.2:1, sino que falla AA para texto cuerpo mientras pasa para texto grande — información accionable que le ayuda a decidir si oscurece su texto o aumenta el tamaño de la fuente.

Casos de uso en el mundo real

Diseñadores web creando interfaces accesibles Un diseñador está construyendo una página de aterrizaje con fondo azul marino oscuro y texto gris claro. La combinación parece elegante en su monitor, pero el verificador de contraste revela una proporción de solo 3.8:1 — fallando AA para texto cuerpo. El diseñador aclara ligeramente el texto, alcanzando 4.6:1, y ahora la página es legible para usuarios con baja visión sin sacrificar el aspecto estético oscuro.

Desarrolladores implementando sistemas de diseño Un desarrollador mantiene una biblioteca de componentes con docenas de tokens de color. Antes de lanzar un nuevo tema, ejecuta cada par de texto y fondo a través del verificador de contraste. Detectar fallos temprano evita que errores de accesibilidad lleguen a producción y evita el costoso rediseño de componentes después de una auditoría.

Creadores de contenido formateando documentos Un marketero crea una guía en PDF con cuadros de llamada en color y texto resaltado. Usa el verificador de contraste para verificar que cada color de texto en cada fondo pase WCAG AA. Esto asegura que el PDF sea accesible cuando se convierta a HTML o se lea con lectores de pantalla, y protege a la organización de quejas relacionadas con la accesibilidad.

Gerentes de producto realizando auditorías de accesibilidad Un PM está preparándose para una revisión de VPAT (Voluntary Product Accessibility Template). Usa el verificador de contraste para probar cada combinación de colores en su aplicación contra los estándares WCAG, documentando las proporciones para cada una. Esto crea una pista de auditoría que demuestra la diligencia debida y la conformidad.

Educadores creando materiales de aprendizaje Un profesor construye un curso en línea con diapositivas, cuestionarios y materiales de lectura. Verifica cada combinación de texto y fondo para asegurar que los estudiantes con discapacidades visuales puedan participar igualmente. El alto contraste también beneficia a los estudiantes que ven conferencias en teléfonos o tablets bajo condiciones de iluminación variables.

Diseñadores de aplicaciones móviles Las pantallas móviles se ven en todas partes — al aire libre bajo la luz del sol, en interiores bajo luces fluorescentes y en la cama con el modo nocturno activado. Un verificador de contraste ayuda a los diseñadores a considerar estas condiciones variables asegurando que las combinaciones tengan suficiente margen para permanecer legibles cuando el brillo es bajo, las pantallas están sucias o se aplican filtros anti-reflejos.

Consejos y buenas prácticas

• Busque alcanzar AAA cuando sea posible. Aunque AA es el mínimo legal en la mayoría de jurisdicciones, AAA proporciona una mejor experiencia para todos. Si los colores de su marca pueden alcanzar 7:1 sin chocar, úselos. El pequeño compromiso visual es digno del gran avance de accesibilidad.
• No dependa solo del color. Incluso con un contraste perfecto, el color no es accesible para todos. Los usuarios daltonicos pueden no distinguir el rojo del verde. Siempre combine color con iconos, etiquetas, patrones o texto para transmitir significado.
• Pruebe toda su paleta. Un sistema de diseño puede tener diez colores de texto y diez colores de fondo. Eso es cien combinaciones posibles. Probar sistemáticamente cada par — o al menos los más comunes — previene que los fallos de accesibilidad se infiltran.
• Verifique estados de enfoque y elementos interactivos. Los botones, enlaces, campos de formulario y conmutadores necesitan al menos 3:1 de contraste contra su área circundante. Un botón que pasa para texto puede fallar como componente de UI si su borde es demasiado sutil.
• Considere la transparencia y superposiciones. Si su texto está sobre una imagen o una superposición semitransparente, el fondo efectivo es una mezcla de colores. El verificador de contraste prueba colores sólidos, por lo que para superposiciones necesita calcular el resultado mezclado primero o probar conservadoramente.
• Pruebe en diferentes niveles de zoom. Los usuarios con baja visión pueden aumentar hasta el 200% o más. En alto zoom, el texto aparece más grande, lo que ayuda, pero el contraste relativo permanece igual. Asegúrese de que sus proporciones sean lo suficientemente fuertes para resistir la magnificación.
• Documente sus proporciones. Cuando finalice un par de colores, registre su proporción de contraste en la documentación de su sistema de diseño. Esto ayuda a futuros diseñadores y desarrolladores a mantener la accesibilidad a medida que el producto evoluciona.

Preguntas frecuentes

¿El Contrast Checker es gratuito para usar?

Sí. El Contrast Checker es completamente gratuito sin límites de uso, sin registro y sin anuncios. Puede probar tantas combinaciones de colores como necesite.

¿Qué es WCAG?

WCAG significa Web Content Accessibility Guidelines. Es un estándar internacional reconocido publicado por el W3C que define cómo hacer contenido web accesible para personas con discapacidades. WCAG 2.1 es la versión actual, y WCAG 2.2 agrega criterios adicionales. Las guías se organizan en tres niveles: A (mínimo), AA (estándar) y AAA (mejorado).

¿Qué proporción de contraste necesito para pasar WCAG AA?

Para texto normal (menos de 18pt o 14pt en negrita), necesitas al menos 4.5:1. Para texto grande (18pt o más grande, o 14pt en negrita o más grande) y componentes de UI como botones y campos de formulario, necesitas al menos 3:1.

¿Cuál es la diferencia entre WCAG AA y AAA?

AA es el nivel estándar de conformidad requerido por la mayoría de las leyes y directrices de accesibilidad a nivel mundial, incluyendo la Sección 508 en Estados Unidos y la Ley Europea de Accesibilidad. AAA es un nivel mejorado que proporciona mayor accesibilidad pero no es requerido en todas partes y a veces se considera excesivamente estricto para contenido web general. Para AAA, el texto normal necesita 7:1 de contraste y el texto grande necesita 4.5:1.

¿Puedo probar colores RGB o HSL?

La herramienta acepta entrada directa de códigos HEX. Si tienes valores RGB o HSL, usa primero nuestra herramienta Color Picker para convertirlos a HEX. Ingresa el código HEX en el Contrast Checker y prueba instantáneamente.

¿Esta herramienta funciona en dispositivos móviles?

Sí. El Contrast Checker es completamente responsivo y funciona en smartphones y tablets. Los selectores de color, el texto de previsualización y la tabla de resultados están optimizados para pantallas táctiles y pantallas pequeñas.

¿Puedo usar esto para diseño impreso?

Aunque WCAG está diseñado específicamente para contenido digital, los principios de contraste también se aplican al diseño impreso. Una proporción de 4.5:1 o más generalmente asegura texto legible en materiales impresos. Sin embargo, los diseñadores de impresión también deben considerar la cobertura de tinta, la calidad del papel y la distancia de visualización además de las proporciones de contraste digitales.

¿Qué pasa si mis colores de marca fallan WCAG?

Si tus colores de marca no cumplen con la proporción requerida, tienes varias opciones. Aclara o oscurece ligeramente el texto. Aumenta el tamaño de la fuente para que el texto califique como "texto grande", lo que requiere una proporción más baja. Añade una sombra o contorno al texto para aumentar el contraste percibido. O usa el color no conforme solo para elementos decorativos y elige una alternativa accesible para el texto funcional.