Color Contrast Checker

¿Qué es un Comprobador de Contraste de Color?

Esta herramienta calcula la Contrast Ratio (relación de contraste) entre un color de primer plano (texto) y un color de fondo, y luego comprueba si la combinación cumple con las pautas de accesibilidad WCAG 2.0 en los niveles AA y AAA. También simula daltonismo, sugiere correcciones para pares que no cumplen los requisitos y exporta código en múltiples formatos.

Cómo Comprobar el Contraste de Color

Seleccionar Colores

• Color A (primer plano/texto) y Color B (fondo) tienen cada uno una entrada hex y un selector de color.
• La Shade Scale debajo de cada selector le permite ajustar la luminosidad. Haga clic en cualquier tono para aplicarlo instantáneamente.
• El Color Wheel ajusta visualmente el tono de Color A. El color complementario se muestra debajo: haga clic para aplicarlo como Color B.
• Swap invierte Color A y Color B.

Qué Significan los Resultados

Resultado	Qué Muestra
Contrast Ratio	La relación calculada (1:1 – 21:1). Cuanto más alta, mejor.
A11y Score	Una puntuación de accesibilidad sobre 100 basada en la relación de contraste.
WCAG AA / AAA	Aprobado o suspenso para Normal Text y Large Text en cada nivel.
Preview	Una vista previa en vivo que muestra un encabezado, texto del cuerpo, botón, insignia, entrada y tarjeta con sus colores.
Fix Suggestion	Cuando el contraste no aprueba AA, una tarjeta en la que se puede hacer clic sugiere el tono más cercano que aprueba con su relación. Haga clic para aplicarlo.

Umbrales WCAG

Nivel	Normal Text	Large Text
AA	Mínimo 4.5:1	Mínimo 3:1
AAA	Mínimo 7:1	Mínimo 4.5:1

• Normal text: menos de 18pt (o menos de 14pt en negrita)
• Large text: 18pt o más (o 14pt o más en negrita)

Funciones Adicionales

• Undo / Redo – deshaga o rehaga sus cambios de color.
• Share Result – copia una URL con los colores actuales incrustados. Cualquiera que la abra verá el mismo par.
• Pin – guarde hasta 8 pares de colores para comparar uno al lado del otro. Haga clic en un par fijado para volver a cargarlo.
• Brand Colors – 8 paletas de marcas del mundo real (Spotify, Slack, GitHub, etc.) con sus relaciones de contraste. Haga clic en cualquiera para cargarla.
• A11y Check – simula 4 tipos de daltonismo (Protanopia, Deuteranopia, Tritanopia, Achromatopsia) con la relación de contraste efectiva para cada uno.
• Code Output – genera código listo para pegar en CSS, Tailwind 4, Tailwind 3, Flutter y React. Sección desplegable, abierta por defecto.
• Randomize / Clear All – genere un par de colores accesibles al azar o restablezca los valores predeterminados.

Buenos Ejemplos

Ejemplo 1: Texto Gris sobre Blanco – un Error Común

El texto gris claro sobre fondo blanco se ve sutil, pero suspende en accesibilidad.

• Color A: #999999, Color B: #ffffff
• Contrast Ratio: 2.85:1 – Suspenso AA
• Fix Suggestion recomienda el tono 600 (#595959) para un 4.9:1 – Aprobado AA. Haga clic para aplicar.

Ejemplo 2: Comprobar una Paleta de Marca

Haga clic en Spotify en la sección Brand Colors.

• Color A: #191414 (negro), Color B: #1DB954 (verde)
• Contrast Ratio: 4.9:1 – Aprobado AA, Suspenso AAA
• Fije (Pin) este par, luego pruebe LinkedIn (#ffffff sobre #0A66C2, 4.7:1) y compare.

Ejemplo 3: Diseñar el Modo Oscuro

Encontrar un color de texto legible para un fondo azul marino oscuro.

• Color A: #e0e0e0, Color B: #1a1a2e
• Contrast Ratio: 12.4:1 – Aprobado AA y AAA
• Abra A11y Check para confirmar que los 4 tipos de daltonismo también aprueban.

Ejemplo 4: Flujo de Trabajo del Desarrollador – Exportar Código

Después de encontrar un buen par, expanda Code Output y seleccione su framework:

• CSS: propiedades personalizadas --fg y --bg
• Tailwind 4: valores de color arbitrarios
• React: objeto de estilo en línea

Copie el fragmento directamente en su proyecto.

Consejos Clave

• Comience con Brand Colors. Si está comprobando una marca existente, haga clic en ella desde la lista predeterminada en lugar de escribir valores hex manualmente.
• Use Fix Suggestion. Cuando el contraste falle, no adivine: haga clic en la tarjeta de sugerencia para saltar automáticamente al tono más cercano que aprueba.
• Fije pares para comparar (Pin). Al elegir entre varias opciones de color, fije cada una. Puede volver a cargarlas y compararlas juntas.
• Compruebe también el daltonismo. Un par que apruebe las WCAG aún puede ser difícil de distinguir para los usuarios daltónicos. Abra la sección A11y Check para verificar.
• Comparta su decisión. Use Share Result para enviar la URL exacta del par de colores a un diseñador o revisor.

Fórmula

WCAG 2.0 define la Contrast Ratio utilizando la luminancia relativa:

$CR = \frac{L_1 + 0.05}{L_2 + 0.05}$

Variable	Significado
$CR$	Contrast Ratio
$L_1$	Luminancia relativa del color más claro
$L_2$	Luminancia relativa del color más oscuro

La luminancia relativa se calcula a partir de los valores sRGB después de la linealización: $L = 0.2126R + 0.7152G + 0.0722B$

Preguntas Frecuentes

¿Debería apuntar a AA o AAA?

AA es el estándar legal mínimo en la mayoría de los países. AAA proporciona una mejor legibilidad, pero es más difícil de lograr en todos los elementos de diseño. Un enfoque práctico: AA para el texto principal, AAA para información crítica como advertencias o errores.

¿Aprobar las WCAG garantiza la accesibilidad para usuarios daltónicos?

La relación de contraste de WCAG comprueba la luminancia, no la distinción de tono. Un par puede aprobar las WCAG pero verse idéntico para alguien con daltonismo. Use la sección A11y Check para verificar, y siempre complemente el color con íconos o etiquetas de texto.

¿Qué formatos de código admite esta herramienta?

Propiedades personalizadas de CSS, Tailwind CSS v3 y v4 (valores arbitrarios), objetos Color() de Flutter y estilos en línea de React. Seleccione el formato en el menú de la sección Code Output.

¿Puedo guardar y compartir mis pares de colores?

Sí. Pin guarda hasta 8 pares localmente para comparar. Share Result copia una URL con los colores incrustados: cualquiera que la abra verá exactamente el mismo par.