Conversor de color y verificador de contraste

Qué hace esta herramienta

Dos tareas que siempre acaban siendo una. Tiene un color y lo necesita en otra notación: el archivo de diseño dice una cosa y la hoja de estilos quiere otra. Y tiene dos colores y necesita saber si un texto del primero se lee sobre el segundo. Por eso esta página toma dos colores, muestra cada uno en todos los formatos a la vez y mide el contraste entre ellos.

Todo se ejecuta en su navegador. Nada de una paleta de marca que aún no se ha publicado necesita viajar a un servidor para convertirse.

Las cinco notaciones

Cualquiera de ellas se puede pegar, y todas salen de vuelta:

• Hexadecimal: tres, cuatro, seis u ocho dígitos. Las formas cortas duplican cada dígito, así que #f0a significa #ff00aa. Cuatro y ocho dígitos llevan el alfa en la última posición.
• RGB: los tres canales como números o porcentajes. Se aceptan tanto rgb(59, 130, 246) como rgb(59 130 246 / 50%); la forma con comas es la que esta herramienta devuelve, porque sigue siendo la que usa la mayor parte del código a su alrededor.
• HSL: tono en grados, luego saturación y luminosidad en porcentajes. Los tonos dan la vuelta, así que 480 y -120 son válidos y significan 120 y 240.
• OKLCH: luminosidad, croma y tono en un espacio perceptualmente uniforme. La luminosidad puede escribirse 62.8% o 0.628.
• Nombres CSS: los 148, incluido rebeccapurple y las dos grafías de cada gris. Un nombre solo aparece en la salida cuando la coincidencia es exacta.

Una peculiaridad que conviene conocer: hexadecimal, RGB y OKLCH sobreviven intactos a una ida y vuelta, pero HSL no del todo. Se imprime con la precisión que la gente lee de verdad —grados enteros, un decimal de porcentaje— y eso no basta para direccionar los 16,7 millones de colores sRGB. Convierta un hexadecimal a HSL y de vuelta y un canal puede moverse una unidad. La alternativa sería una salida como hsl(217.22, 91.19%, 59.8%), que nadie quiere pegar. El error queda muy por debajo de lo que el ojo puede ver.

Por qué existe OKLCH

HSL parece describir la luminosidad, y no lo hace. Su número de luminosidad es una propiedad de los números, no de la luz. El amarillo puro y el azul puro tienen ambos un 50% de luminosidad en HSL:

amarillo   #ffff00   hsl 50%   oklch 96.8%
azul       #0000ff   hsl 50%   oklch 45.2%

Cualquiera ve que el amarillo es el más claro de los dos, y OKLCH lo dice. Esto no es académico: es la razón de que una paleta construida manteniendo constante la luminosidad HSL y girando el tono produzca un conjunto de colores que se ve tremendamente desigual, y de que el mismo truco en OKLCH produzca un conjunto que parece una familia. También es la razón de que, en OKLCH, dos colores con la misma luminosidad suelan tener un contraste parecido contra el mismo fondo, algo que HSL no puede prometer en absoluto.

Los otros dos números son el croma —a grandes rasgos, cuán colorido, desde 0 para el gris— y el tono en grados. A diferencia de la saturación de HSL, el croma no es un porcentaje de nada, y por eso el valor máximo utilizable depende tanto de la luminosidad como del tono.

Cuando un color no se puede mostrar

OKLCH puede describir más colores de los que una pantalla corriente puede producir. Pida una luminosidad del 70% con un croma de 0.4 y habrá nombrado un verde que existe en principio y en ninguna parte de sRGB. La herramienta recorta ese color al rango y lo marca como fuera de sRGB, en lugar de devolver en silencio otra cosa.

El aviso aparece solo cuando el recorte cambia realmente el color que obtiene. Esa distinción importa más de lo que parece. El rojo sRGB está justo en el borde de la gama, así que un valor OKLCH publicado para él, redondeado a cuatro decimales, cae técnicamente un pelo fuera: unas dos partes por diez mil, que caen en el mismo byte y son invisibles. Avisar de eso le enseñaría a ignorar el aviso. Un color de una paleta de gama amplia falla por pasos enteros: el blue-500 de Tailwind v4 pide 261 de un máximo de 255 en el canal azul, y en una pantalla sRGB realmente no es el color solicitado.

El contraste y sus tres umbrales

La relación de contraste compara la luminancia relativa de dos colores. Va de 1:1 para dos colores idénticos a 21:1 para negro sobre blanco, y nada puede superar eso. WCAG 2.1 fija tres umbrales, y no son intercambiables:

• 4.5:1 para el texto corrido: cualquier cosa por debajo de 18pt, o por debajo de 14pt en negrita. Es el que la gente quiere decir cuando afirma que un color «no cumple el contraste».
• 3:1 para el texto grande: 18pt o más, o 14pt en negrita o más. Las letras grandes portan más señal por sí mismas, así que el listón baja.
• 3:1 para controles y gráficos: el borde de un campo, la flecha de un desplegable, las barras de un gráfico. Se añadió en WCAG 2.1 y se pasa por alto muy a menudo, porque la gente comprueba su texto y nunca la caja que lo rodea.

El nivel AAA sube los dos primeros a 7:1 y 4.5:1. Merece la pena aspirar a él en el texto corrido y es genuinamente difícil de alcanzar con una paleta de marca; AA es lo que piden las normativas y las auditorías.

Los tamaños de esas reglas son puntos CSS, no píxeles: 18pt son 24px y 14pt unos 18,7px con la configuración predeterminada. Es fácil suponer que un titular de 20px cuenta como texto grande. No cuenta.

Colores translúcidos

Un texto semitransparente sobre un fondo sólido tiene una relación de contraste perfectamente definida: el navegador mezcla los dos colores antes de pintar, y esta herramienta también. Un texto gris al 60% de opacidad es simplemente un gris más claro una vez aterriza, y se mide como aquello en lo que aterriza. Las herramientas que ignoran el canal alfa informan de la relación del color que usted escribió y no del que ve cualquiera, lo que siempre la exagera: un verificador de accesibilidad que se equivoca a su favor es peor que ninguno.

Un fondo translúcido es otra situación, y la herramienta la rechaza. Lo que se ve a través depende de lo que haya debajo, y eso no es algo que los dos colores de esta página puedan responder. Resuelva el fondo al color que realmente compone y mida ese.

Lo que la relación no le dice

Una relación que cumple es un suelo, no un veredicto. Tres cosas que no cubre:

• El daltonismo. Un rojo y un verde de idéntica luminancia tienen una relación cercana a 1:1 y son indistinguibles para todo el mundo, pero dos colores pueden cumplir la relación y seguir siendo lo único que separa dos estados, lo que falla para quien no puede diferenciarlos. Nunca lleve el significado solo en el tono.
• La tipografía fina. La fórmula no sabe nada del grosor del trazo. Un peso muy fino a 4.5:1 puede costar más de leer que un peso normal a 4:1.
• La propia fórmula. Se sabe que el contraste de WCAG 2 es poco amable con el texto claro sobre fondo oscuro, e informa de relaciones que parecen más altas de lo que se leen. APCA, redactado para WCAG 3, modela esto mejor, pero no es normativo, ninguna auditoría lo acepta todavía y mostrar dos puntuaciones que se contradicen no ayudaría a nadie. Por eso se comenta aquí y no se imprime arriba.

Una nota de implementación para quien compare resultados con su propio código: la fórmula de luminancia usa un umbral de 0.03928, que difiere levemente del 0.04045 de la definición actual de sRGB. WCAG cita el valor antiguo, así que es el que se usa aquí. Ajustarse a la especificación importa más que la coherencia interna, y la diferencia nunca convierte un cumple en un no cumple.