¿Qué ratio de contraste aprueba WCAG AA?

Texto normal necesita 4.5:1; texto grande (18pt+ o 14pt negrita) necesita 3:1.

La claridad HSL difiere del valor HSV; ambos se muestran para coincidir con la convención de tu herramienta.

¿La transparencia afecta al contraste?

Sí. El contraste real de un texto semitransparente depende del fondo que se encuentre debajo. La vista previa sencilla calcula principalmente colores opacos.

Conversor de color y contraste

Convierte colores HEX, RGB, HSL y HSV. Comprueba el contraste entre texto y fondo según los requisitos de WCAG.

Archivos y contenido se procesan localmente en tu navegador y no se suben a nuestro servidor.

Acerca de esta herramienta

Introduce un color en HEX, RGB, HSL o HSV y consulta los valores equivalentes en otros formatos. También puedes elegir colores de texto y fondo y comprobar si su contraste cumple los requisitos WCAG AA o AAA para texto normal y grande.

Cómo usar

Conversión bidireccional HEX, RGB, HSL, HSV
Muestra de color en vista previa en vivo
Calculadora de ratio de contraste WCAG
Indicadores de aprobación AA y AAA
Copiar cualquier formato con un clic
Introduce un color: Escribe #hex, rgb(), hsl() o usa el selector.
Revisa conversiones: Copia el formato necesario para tu CSS o tus variables de color.
Comprueba contraste: Define colores de texto y fondo para validar legibilidad.

Ejemplos

Validar contraste de paleta de marca para cumplimiento WCAG AA
Convertir valores HEX de Figma a hsl() para utilizarlos como variables CSS
Comprobar los colores del texto en el modo oscuro
Documentar rampas de color del sistema de diseño

Limitaciones

La vista previa del contraste tiene una capacidad limitada para calcular colores con transparencia.
La precisión del selector depende de la calibración del monitor
Los valores de color introducidos se procesan directamente en tu navegador y no se envían al servidor.

Preguntas frecuentes

¿Qué ratio de contraste aprueba WCAG AA?: Texto normal necesita 4.5:1; texto grande (18pt+ o 14pt negrita) necesita 3:1.
¿HSL frente a HSV?: La claridad HSL difiere del valor HSV; ambos se muestran para coincidir con la convención de tu herramienta.
¿La transparencia afecta al contraste?: Sí. El contraste real de un texto semitransparente depende del fondo que se encuentre debajo. La vista previa sencilla calcula principalmente colores opacos.