Un conversor de color con comprobador de contraste WCAG
Escribe un código HEX y lee el mismo color en RGB, HSL y CMYK. El conversor de color arranca con #3b82f6, un azul medio, que sale como rgb(59, 130, 246), hsl(217, 91%, 60%) y cmyk(76%, 47%, 0%, 4%). Al lado hay un comprobador de contraste WCAG 2.1 para un color de texto y un fondo.
Cuatro pasos para un color y un par de contraste
- Haz clic en el cuadro de color para abrir el selector de tu navegador, o pega un código en el campo HEX. Valen los seis dígitos y la forma corta de tres (#0af), con o sin #.
- Lee los campos RGB, HSL y CMYK (impresión). El botón de copiar sobre cada campo lleva su valor al portapapeles.
- En el panel derecho elige Color del texto y Fondo.
- La relación y las cuatro etiquetas (AA Normal, AAA Normal, AA Grande, AAA Grande) cambian con cada color que eliges.
Un azul de marca y un gris de formulario
Un azul corporativo llega como #003366. En CSS quieres variantes más claras y más oscuras, y HSL lo facilita: la herramienta da hsl(210, 100%, 20%) y solo subes el último número. Para un folleto, el mismo azul es cmyk(100%, 50%, 0%, 60%), un primer valor para la imprenta.
Un gris claro de marcador de posición como #999999 sobre blanco da 2.85 : 1, y no pasa AA ni con texto grande. Blanco sobre el #2563eb predeterminado da 4.68 : 1: pasa AA para texto normal, pero no AAA.
Los campos que parecen editables y no lo son
Solo el campo HEX y el selector mandan en la conversión. Los campos RGB y HSL parecen editables, pero escribir en ellos no cambia nada. CMYK es de solo lectura.
El campo HEX se reescribe en cuanto su contenido es un código válido. Si escribes #ff0 de camino a #ff0000, el campo salta a #ffff00. Pega el código completo. No se admiten códigos de ocho dígitos (alfa), nombres como «tomato» ni notaciones como OKLCH o HSV. Lo que no es válido se ignora sin mensaje de error.
Los dos selectores del contraste funcionan aparte del conversor y solo aceptan colores del selector. La herramienta no conoce tu tamaño de letra. WCAG llama grande al texto desde 18 pt, o 14 pt en negrita.
Redondeos, impresión y lo que se queda en tu equipo
La relación se muestra con dos decimales, pero la prueba de aprobado usa el valor exacto. Por eso 4.496 aparece como 4.50 : 1 y sigue suspendiendo AA. HSL y CMYK se redondean a números enteros. CMYK es la conversión matemática simple desde RGB, sin perfil ICC, así que una imprenta puede obtener otro resultado.
La conversión y el cálculo del contraste se ejecutan en JavaScript en tu navegador. Elegir o escribir un color no envía ninguna petición, y el panel de red de las herramientas de desarrollo lo confirma. Los botones de copiar escriben en tu portapapeles. El código de la herramienta no guarda tus colores.