Convertidor de color y verificador de contraste
Convierte entre HEX, RGB y HSL, y verifica el contraste de accesibilidad WCAG entre dos colores. Todo se ejecuta en tu navegador.
Convertidor de color
Verificador de contraste WCAG
Texto normal (16 px)
Texto grande (24 px / negrita 18.66)
- Elige un color con la muestra o escribe un valor HEX, RGB o HSL — los demás se actualizan automáticamente.
- Desplázate al Verificador de contraste y define un color de primer plano y otro de fondo.
- Lee la relación calculada y las insignias de aprobado/suspenso AA y AAA para texto normal y grande.
- Ajusta cualquiera de los dos colores hasta que la relación supere el umbral que necesitas.
¿Qué hace?
El convertidor traduce un único color entre HEX (#rrggbb), RGB (rgb(r, g, b)) y HSL (hsl(h, s%, l%)) en tiempo real, así pegas el formato que use tu sistema de diseño y obtienes los otros dos. El verificador de contraste toma un color de primer plano y uno de fondo, los linealiza con la curva gamma sRGB y muestra la relación WCAG 2.x junto con los veredictos AA / AAA para texto normal y grande.
Ejemplo
Entrada — un azul de marca típico:
HEX #2563eb
RGB rgb(37, 99, 235)
HSL hsl(221, 83%, 53%)Comparado con blanco (#ffffff) como fondo:
Contrast ratio 5.17:1
WCAG AA normal Pass
WCAG AA large Pass
WCAG AAA normal Fail (needs 7:1)
WCAG AAA large Pass¿Por qué este par de colores no pasa WCAG AAA?
Éstas son las trampas más comunes en contraste y conversión que conviene vigilar:
- Confundir AA grande con AA normal. El texto grande sólo necesita 3:1, por eso un enlace que se lee bien en un H1 puede suspender a tamaño de párrafo. Si un par alcanza 3.5:1, pasa los titulares pero suspende en los párrafos.
- Usar la luminosidad HSL como sustituto del contraste. hsl(0, 100%, 50%) (rojo) y hsl(240, 100%, 50%) (azul) tienen L=50% pero luminancias muy distintas. Calcula el contraste siempre desde los valores RGB, no desde la luminosidad HSL.
- Olvidar la composición alfa. Un texto rgba(0, 0, 0, 0.6) sobre blanco equivale a #666666. Comprueba el HEX aplanado, no el valor semitransparente.
- Longitud de HEX incorrecta. #fff se expande a #ffffff, pero #ffff es la forma corta de 4 dígitos con byte alfa. Revisa el número de dígitos cuando un campo HEX rechaza la entrada sin aviso.
- Mezclar display-P3 y sRGB. Los colores tomados de herramientas como Figma en modo de gama amplia pueden quedar fuera de sRGB, y los navegadores los recortan. Convierte a sRGB en la herramienta de origen antes de copiar el HEX.
- Probar el contraste sólo contra blanco puro. Si el diseño real coloca el texto sobre #f3f4f6 o sobre una foto, el contraste visible es menor. Prueba con el fondo real.
Preguntas frecuentes
¿Qué relación de contraste necesito para pasar WCAG AA?
WCAG 2.1 AA exige 4.5:1 para texto de cuerpo normal y 3:1 para texto grande, donde grande significa al menos 18 pt (24 px) regular o 14 pt (18.66 px) en negrita. Los componentes de UI y los objetos gráficos necesitan 3:1 contra su fondo. AAA eleva el listón a 7:1 para texto normal y 4.5:1 para texto grande.
¿Por qué el HSL que vuelvo a escribir da valores RGB ligeramente distintos?
La mayoría de herramientas guardan HSL como porcentajes enteros, así que la ida y vuelta RGB → HSL → RGB puede desplazar una unidad por canal. Esa deriva cae dentro de un JND y es invisible en pantalla; si necesitas fidelidad exacta en el trayecto, mantén HEX o RGB como fuente de verdad y usa HSL sólo como vista.
¿Esta herramienta usa corrección gamma sRGB para el contraste?
Sí. El cálculo sigue la fórmula WCAG 2.x: linealiza cada canal sRGB con la curva gamma, calcula la luminancia relativa y toma (L1 + 0.05) / (L2 + 0.05). Un simple promedio de canales o la luminosidad HSL ingenua dan cifras engañosas y no coincidirán con el resultado WCAG.
¿Cómo manejo colores con alfa o semitransparencias?
El contraste WCAG se define contra un fondo sólido, así que aplana el alfa componiendo primero el primer plano sobre el fondo real. Por ejemplo, un bloque de texto negro al 50% sobre una página blanca equivale a #808080 sobre #ffffff. Pasa ese HEX aplanado al verificador en lugar del valor semitransparente.
¿Es #rgb HEX lo mismo que #rrggbb?
Sí. La forma corta de 3 dígitos expande cada nibble repitiéndolo, así que #f0c se convierte en #ff00cc. Las formas de 4 y 8 dígitos añaden un canal alfa. Esta herramienta acepta HEX de 3, 6 y 8 dígitos, y trata el byte alfa como informativo sólo para contraste, ya que WCAG requiere un color sólido compuesto.
¿Guardáis los colores que escribo o elijo?
No. No guardamos ningún registro de los colores que pruebas, conviertes o verificas. Todo lo que escribes o arrastras al selector se descarta al cerrar la pestaña — sin registros, sin analítica sobre tus valores de color. Si quieres verlo por ti mismo, revisa las herramientas de desarrollo del navegador.