Colores y Contraste

Esta página reúne cuatro herramientas gratuitas para trabajar con colores de interfaz. Simulador de daltonismo muestra un color tal como lo perciben tres deficiencias, Contraste de color mide el contraste WCAG entre dos colores, y HEX a HSL convierte un color HEX en HSL. Paleta de color genera variantes claras y oscuras. Ayudan a diseñadores y desarrolladores a comprobar la legibilidad y la coherencia. Todo permanece en tu navegador, sin registro.

Elige según tu pregunta. Simulador de daltonismo comprueba cómo pueden percibir un color varias deficiencias. Contraste de color prueba la relación WCAG entre dos tonos. HEX a HSL traduce un código HEX a un modelo que facilita ajustar la luminosidad y la saturación. Paleta de color crea variantes claras y oscuras. Para una revisión de accesibilidad, empieza por el contraste y luego prueba con el simulador. Para crear una gama, empieza por HEX a HSL o por la paleta.

Cómo usar

  1. Empieza con Contraste de color para medir la relación WCAG entre el texto y su fondo antes de tomar decisiones estéticas.
  2. Luego prueba una combinación con Simulador de daltonismo para detectar tonos que se vuelven difíciles de distinguir.
  3. Pasa a HEX a HSL cuando necesites ajustar la luminosidad o la saturación de un código de color preciso.
  4. Usa Paleta de colores para generar variantes claras y oscuras que sigan siendo coherentes con el tono inicial.

Preguntas frecuentes

¿Para qué sirve el contraste WCAG?

Contraste de color mide el contraste WCAG entre dos colores. Esta comprobación ayuda a ver si el texto y su fondo siguen siendo legibles. La herramienta es gratuita, no requiere registro y se ejecuta en tu navegador.

¿El simulador sustituye las pruebas reales?

No. Simulador de daltonismo muestra una aproximación para tres deficiencias. Ayuda a detectar combinaciones problemáticas, pero no sustituye las opiniones de las personas afectadas. Úsalo junto con Contraste de color para una comprobación más completa.

¿Cómo puedo crear variantes de un color?

Paleta de color genera variantes claras y oscuras. Si partes de un código HEX, HEX a HSL puede ayudarte primero a entender el tono, la saturación y la luminosidad. Ambas herramientas son gratuitas y no requieren registro.

¿En qué orden debo comprobar una interfaz accesible?

Comprueba primero Contraste de color en textos y fondos. Luego prueba combinaciones con Simulador de daltonismo. Si un tono necesita ajuste, usa HEX a HSL y después Paleta de colores para proponer variantes coherentes. Este orden pone la legibilidad antes que el estilo.

¿Cuándo debo usar HEX a HSL en lugar de Paleta de colores?

Usa HEX a HSL cuando partas de un código HEX y quieras entender o cambiar su matiz, saturación y luminosidad. Elige Paleta de colores cuando necesites variantes claras y oscuras alrededor de una base. Las dos herramientas pueden complementarse.

Herramientas de la misma categoría