Contrast Checker: Ratio de Color WCAG

¿Qué es Contrast Checker?

Contrast Checker calcula el ratio de contraste basado en luminancia entre un color de primer plano y un color de fondo para determinar si la combinación cumple los estándares de accesibilidad WCAG 2.1. Prueba los cuatro umbrales de conformidad: AA y AAA para texto normal, y AA y AAA para texto grande. La herramienta muestra una vista previa de texto en vivo para que pueda ver exactamente lo que experimentarán los lectores. Auditores de accesibilidad, diseñadores de UI y desarrolladores frontend la usan antes de publicar cualquier nueva combinación de colores para evitar fallos de contraste en producción. Todo funciona en el navegador — sin llamadas al servidor, sin inicio de sesión.

Funciones principales

• Cálculo de ratio de contraste WCAG 2.1 — Utiliza la fórmula estándar de luminancia relativa (con el umbral de linealización 0,03928 y la fórmula de ratio (L1 + 0,05) / (L2 + 0,05)) para producir resultados coherentes con las herramientas WCAG oficiales.
• Verificación de conformidad AA y AAA — Cuatro badges de conformidad se actualizan en tiempo real: Normal AA (≥ 4,5:1), Normal AAA (≥ 7:1), Grande AA (≥ 3:1) y Grande AAA (≥ 4,5:1). Badge verde con marca de verificación significa que pasa; badge rojo con X significa que falla.
• Umbrales para texto normal y grande — La herramienta aplica umbrales separados para texto normal y texto grande (definido como 18pt o 14pt negrita), en consonancia con el Criterio de Éxito 1.4.3 de WCAG 2.1.
• Vista previa en tiempo real con texto de muestra — La tarjeta de vista previa muestra un encabezado, párrafo de cuerpo, texto pequeño y un botón con los colores elegidos, para evaluar la legibilidad de un vistazo.
• Copiar ratio de contraste al portapapeles — Haga clic en el icono Copiar junto a la pantalla de ratio para escribir la cadena del ratio (p. ej., 4,53:1) en el portapapeles y registrar la verificación en su historial.
• Funciona sin conexión tras la carga — Todos los cálculos de ratio están implementados en JavaScript sin llamadas a API externas.

Cómo usar Contrast Checker

Paso 1: Establecer el color de primer plano

Navegue hasta Contrast Checker. La herramienta se abre con negro (#000000) como primer plano y blanco (#FFFFFF) como fondo — un ratio de 21:1 que supera los cuatro niveles WCAG.

Establezca el color de primer plano (texto) de cualquiera de estas formas:

• Haciendo clic en la muestra de color (cuadrado coloreado) para abrir el selector de color nativo del navegador
• Escribiendo un código hexadecimal directamente en el campo de texto junto a la muestra (p. ej., #1E293B)

Tanto la muestra como el campo de texto permanecen sincronizados. La muestra de vista previa debajo de los campos muestra el color con texto de etiqueta con contraste automático.

Paso 2: Establecer el color de fondo

Use los mismos controles en el lado derecho de la tarjeta de entradas de color para establecer el color de fondo. La herramienta usa un diseño de tres columnas: primer plano a la izquierda, un botón de intercambio en el centro y fondo a la derecha.

Paso 3: Leer el ratio de contraste y los badges de conformidad

La tarjeta Ratio de Contraste aparece debajo de las entradas y muestra:

• El ratio calculado en tipo de pixel-art grande (p. ej., 7,23:1)
• Un icono Copiar para copiar la cadena del ratio
• Cuatro badges de conformidad: Normal AA (≥ 4,5:1), Normal AAA (≥ 7:1), Grande AA (≥ 3:1), Grande AAA (≥ 4,5:1)

Un badge verde con icono de marca de verificación indica que la combinación supera ese nivel. Un badge rojo con X indica un fallo. Apunte al menos a Normal AA para todo el texto del cuerpo.

Paso 4: Revisar la vista previa en vivo

Desplácese hasta la tarjeta Vista previa. Muestra cuatro elementos con los colores elegidos:

• Un encabezado grande (text-2xl)
• Texto de cuerpo (text-base)
• Texto pequeño (text-sm)
• Un botón con los colores intercambiados (el primer plano pasa a ser fondo y viceversa)

Esta vista previa permite evaluar si los colores parecen legibles antes de escribir ningún código.

Paso 5: Intercambiar colores o probar sugerencias de paleta accesible

Haga clic en el botón de intercambio (icono de flecha doble) entre las dos entradas de color para invertir instantáneamente primer plano y fondo. Esto es útil para probar variantes claras sobre oscuro y oscuro sobre claro.

Desplácese hasta el panel Pares de Colores Accesibles en la parte inferior de la página. Muestra 20 combinaciones de colores con sus ratios de contraste. Haga clic en cualquier par para cargar esos dos colores en la herramienta. La mayoría de los pares superan AA (4,5:1), indicado con una marca de verificación. Algunos pares solo superan Grande AA (3:1) y están marcados con X — estos funcionan para encabezados y elementos grandes de UI, pero no para texto de cuerpo normal.

Ejemplos prácticos

Verificar etiqueta de botón contra su fondo

Su diseño usa texto blanco #FFFFFF sobre un botón azul #3B82F6. Introduzca #FFFFFF como primer plano y #3B82F6 como fondo. La herramienta calcula aproximadamente 3,7:1. El badge Normal AA falla (requiere 4,5:1), pero Grande AA pasa. Necesita oscurecer el azul — pruebe #1D4ED8, que produce aproximadamente 6,7:1 y supera Normal AA.

Validar un color de texto en modo oscuro

Su diseño en modo oscuro usa texto #94A3B8 (slate-400) sobre fondo #0F172A (slate-900). Introduzca estos valores. El ratio resulta aproximadamente 6,96:1, superando Normal AA, Grande AA y Grande AAA. Falla Normal AAA por poco (requiere 7:1). Puede usar esta combinación con confianza para el cuerpo del texto al nivel AA.

Probar un color de marca como color de texto

Su naranja de marca es #F97316. Quiere usarlo como color de enlace sobre fondo blanco #FFFFFF. El ratio es aproximadamente 2,8:1 — falla Normal AA. La vista previa confirma que el texto parece legible para algunos usuarios, pero fallaría una auditoría de accesibilidad. Cambie a un tono más oscuro como #C2410C (≈ 5,2:1) para superar AA.

Consejos y buenas prácticas

Pruebe tanto primer plano sobre fondo como fondo sobre primer plano. El botón de intercambio permite invertir los roles con un clic. Algunos patrones de UI (botones, selecciones resaltadas) usan el color de primer plano como fondo de área pequeña.

El panel de Pares de Colores Accesibles muestra ratios con un decimal. Estos ratios calculados en tiempo real se muestran en cada tarjeta de muestra preestablecida. Haga clic en cualquier muestra para cargar ambos colores — úselo como punto de partida cuando necesite una paleta funcional rápidamente.

Los umbrales de texto grande se aplican a 18pt (24px) o 14pt negrita (aproximadamente 18,67px negrita). La herramienta muestra los resultados Grande AA y Grande AAA para recordarle que los encabezados tienen umbrales más permisivos. Una combinación que falla Normal AA puede ser válida para uso exclusivo en encabezados grandes.

Comparta resultados con una URL. Los colores actuales de primer plano y fondo se codifican en la URL de la página. Copie la URL de la barra de direcciones después de introducir sus colores para enviar una verificación de contraste específica a un colega o incluirla en un documento de revisión de diseño.

Guarde pares de colores comunes como preajustes. Las cuentas de seguidores pueden guardar tanto los valores hexadecimales de primer plano como de fondo como un preajuste con nombre. Esto es útil para equipos que verifican las mismas combinaciones de colores de marca repetidamente.

Problemas comunes y resolución de problemas

El ratio muestra 1:1 independientemente de la entrada. Esto normalmente significa que ambos campos de color tienen el mismo valor. Compruebe que introdujo diferentes colores en primer plano y fondo. Si acaba de pegar el mismo hex en ambos campos, uno debe cambiarse.

El badge de conformidad dice que falla, pero creía que mis colores eran correctos. La fórmula WCAG es más estricta de lo que puede parecer visualmente. Una combinación negro sobre gris oscuro como texto #333333 sobre fondo #555555 produce solo aproximadamente 1,7:1, muy por debajo de AA. Use el resultado de la herramienta en lugar de confiar en el juicio visual.

La restauración del historial no recarga mis colores. La función de restauración del historial analiza entradas en el formato FG: #XXXXXX / BG: #XXXXXX. Las entradas registradas fuera de esta herramienta (o con datos corruptos) pueden no analizarse correctamente. Reintroduzca los colores manualmente en esos casos.

El botón Copiar ratio no muestra respuesta. La API de portapapeles requiere HTTPS o localhost. En HTTP simple, la escritura en el portapapeles falla. La herramienta muestra un toast de error en ese caso. Haga clic derecho en el texto del ratio y use la opción de copia nativa del navegador como alternativa.

La tarjeta de vista previa muestra colores de texto inesperados. La vista previa muestra el encabezado y el texto del cuerpo en su color de primer plano sobre su color de fondo. El botón de la vista previa intercambia los dos colores intencionalmente para demostrar la combinación inversa.

Privacidad y seguridad

Contrast Checker realiza todos los cálculos localmente en su navegador. La fórmula de luminancia relativa y el cálculo del ratio de contraste se ejecutan en JavaScript en su dispositivo. No se envían valores de color a ningún servidor. La herramienta no requiere cuenta, no establece cookies de seguimiento y no registra qué combinaciones de colores prueba. Funciona completamente sin conexión una vez cargada la página, lo que la hace segura para evaluar colores en sistemas de diseño confidenciales o directrices de marca no publicadas.

Preguntas frecuentes

¿Es gratuito Contrast Checker?

Sí. La funcionalidad completa de verificación de contraste WCAG — incluidos los cuatro badges de conformidad, la vista previa en tiempo real, el botón de intercambio y el panel de paleta accesible — es completamente gratuita sin necesidad de cuenta. Las funciones de seguidor como preajustes, seguimiento de historial y notas de herramienta están disponibles con una suscripción de seguidor de Ko-fi.

¿Funciona Contrast Checker sin conexión?

Sí. Una vez cargada la página, todos los cálculos de contraste, la representación de vista previa y las actualizaciones de badges de conformidad funcionan sin acceso a red. Las fórmulas de luminancia relativa y las comparaciones de umbrales WCAG son JavaScript puro ejecutándose en su navegador.

¿Están seguros mis datos con Contrast Checker?

Sí. No se transmiten datos de color a ningún servidor. La herramienta no realiza ninguna solicitud de red durante una verificación de contraste. Sus colores de primer plano y fondo solo existen en la memoria del navegador y, si usa la función de compartir, están codificados en la URL que elija copiar.

¿Qué versión de WCAG sigue esta herramienta?

La herramienta implementa el Criterio de Éxito 1.4.3 de WCAG 2.1 (Contraste — Mínimo) y 1.4.6 (Contraste — Mejorado). El nivel AA requiere un ratio de al menos 4,5:1 para texto normal y 3:1 para texto grande. El nivel AAA requiere 7:1 para texto normal y 4,5:1 para texto grande. Estos umbrales coinciden con los valores mostrados en los badges de conformidad (Normal AA ≥ 4,5:1, Normal AAA ≥ 7:1, Grande AA ≥ 3:1, Grande AAA ≥ 4,5:1).

¿Qué cuenta como "texto grande" en WCAG?

WCAG define texto grande como texto de al menos 18 puntos (aproximadamente 24px) en peso normal, o al menos 14 puntos (aproximadamente 18,67px) en negrita. La herramienta etiqueta los badges tercero y cuarto como "Grande AA" y "Grande AAA". La vista previa muestra un encabezado en text-2xl que típicamente cae en el rango de texto grande.

¿Cómo se calcula el ratio de contraste?

La herramienta convierte cada color hexadecimal a luminancia relativa usando la fórmula WCAG: cada canal RGB se linealiza (dividido por 255, luego aplicando la corrección gamma sRGB: s / 12,92 si s <= 0,03928, de lo contrario ((s + 0,055) / 1,055) ^ 2,4). La luminancia es entonces 0,2126 R + 0,7152 G + 0,0722 * B. El ratio de contraste es (L_más_claro + 0,05) / (L_más_oscuro + 0,05).

¿Puedo probar colores que no sean códigos hexadecimales?

Las entradas de color aceptan códigos hex escritos como texto (con o sin #). También puede usar la muestra del selector de color nativo. Si tiene un valor RGB o HSL, use el Color Picker para convertirlo a hex primero y luego péguelo aquí.

¿Cuál es el ratio de contraste máximo posible?

El ratio de contraste máximo es 21:1, que es el ratio entre negro puro (#000000) y blanco puro (#FFFFFF). La herramienta se abre con estos dos colores por defecto para demostrar el ratio máximo alcanzable.

¿Puedo usarlo para elementos de UI distintos del texto?

WCAG 2.1 también cubre el contraste no textual en el Criterio de Éxito 1.4.11, que requiere un ratio de 3:1 para componentes de UI y objetos gráficos. El badge Grande AA de la herramienta (≥ 3:1) corresponde a este umbral y puede usarse para evaluar colores de iconos, indicadores de foco y bordes de controles de formulario, aunque la vista previa muestre texto.

¿Cómo comparto una verificación de contraste con mi equipo?

Después de introducir sus colores de primer plano y fondo, la URL de la página codifica ambos valores. Copie la URL de la barra de direcciones y compártala directamente. Los destinatarios que abran el enlace verán los mismos colores precargados con una notificación "Cargado desde compartir". También puede usar los botones de compartir en la parte inferior de la página para publicar en Twitter, LinkedIn o Reddit.

Herramientas relacionadas

• Color Picker — Extraiga valores hex exactos de su pantalla o diseños existentes antes de probarlos aquí.
• Color Converter — Convierta su color de RGB, HSL o CMYK a hex antes de introducirlo en el verificador de contraste.
• Próximamente: Palette Generator — Genere una paleta completa y luego compruebe cada combinación en Contrast Checker para garantizar el cumplimiento de accesibilidad.

Pruebe Contrast Checker ahora: Glyph Widgets Contrast Checker