Español

94 · Productividad

Convertidor de color y comprobador de contraste

Ingrese un color en cualquier formato común para obtener los demás, luego verifique si es legible en su color de fondo.

Tus datos: Esta herramienta procesa su entrada en este navegador. CapyHelp no carga esa entrada para generar su resultado. Detalles de privacidad

HEX, rgb() o hsl().

aaEl veloz zorro marrón salta sobre el perro perezoso.

HEXAGONAL

—

Cómo utilizar el conversor de color y el comprobador de contraste

  1. Escriba un color como HEX (#4f46e5), rgb() o hsl(), o utilice el selector.
  2. Ingrese un color de fondo para verificar el contraste.
  3. Vea la relación de contraste y si pasa WCAG AA y AAA para texto normal y grande.

Comprender las relaciones de contraste

Las Pautas de accesibilidad al contenido web (WCAG) comparan el brillo relativo de dos colores en una escala de 1:1 (idéntico) a 21:1 (negro sobre blanco).

  • AA necesita al menos 4,5:1 para texto normal y 3:1 para texto grande (aproximadamente 24 px o 19 px en negrita).
  • aaa necesita 7:1 para texto normal y 4,5:1 para texto grande.

Un buen contraste ayuda a todos a leer con luz brillante o en pantallas de mala calidad, no sólo a las personas con baja visión.

Ejemplos

#4F46E5 texto en blanco

Contraste 6.29:1 · pasa AA, no pasa AAA para texto normal

hsl(243, 75%, 59%)

#5048E5 · rgb(80, 72, 229)

Preguntas

¿Por qué HSL a HEX no es exactamente de ida y vuelta?

Los valores HSL se redondean a números enteros, por lo que la conversión inversa puede desplazar un canal en un paso. La diferencia no es visible.

¿Apoya la transparencia?

Los valores alfa en rgba() y hsla() se aceptan pero se ignoran, porque el contraste depende de lo que hay detrás de un color transparente.

¿Se admite HEX de 3 dígitos?

Sí. #f80 se lee como #ff8800.

Traducción automática. Revisar resultados importantes.