Cómo se usa
La pantalla tiene dos partes, el conversor de colores arriba y el verificador de contraste abajo, y lo que hagas en una no afecta a la otra.
Conversor de colores
- Escribe un valor de color CSS en Color o elígelo con el selector de la izquierda. Se leen los HEX de 3, 4, 6 y 8 dígitos, con o sin
#; las dos maneras de escribir RGB,rgb(51, 102, 255)yrgb(51 102 255), y nombres de color comorebeccapurple. - Con el control deslizante Alfa (opacidad), junto a la muestra de color, cambias la transparencia. Lo notarás en cuánto se deja ver el fondo de cuadros de detrás de la muestra.
- En Todos los formatos aparecen siete líneas (HEX, RGB, HSL, HWB, LAB, LCH y OKLCH), cada una con su botón de copiar. Si el alfa baja del 100 %, se añade una línea más, «HEX (con alfa)», escrita con 8 dígitos.
Verificador de contraste
- Introduce el Color del texto y el Color de fondo. «Intercambiar colores» los cambia entre sí.
- En Relación de contraste aparece la proporción y, debajo, cuatro casillas indican «Aprobado» o «No aprobado» para cada criterio.
- La vista previa del final muestra los dos colores con texto grande y con texto normal.
Un color, siete maneras de escribirlo
El valor que viene de entrada, #3366ff, se convierte así:
| Formato | Resultado | Qué significan los números |
|---|---|---|
| HEX | #3366ff |
Rojo, verde y azul con dos dígitos hexadecimales cada uno |
| RGB | rgb(51, 102, 255) |
Rojo, verde y azul de 0 a 255 |
| HSL | hsl(225, 100%, 60%) |
Tono, saturación y luminosidad |
| HWB | hwb(225 20% 0%) |
Tono, cantidad de blanco mezclado y cantidad de negro mezclado |
| LAB | lab(47.4 26.93 -82.47) |
Luminosidad, eje verde-rojo y eje azul-amarillo |
| LCH | lch(47.4 86.76 288.08) |
Luminosidad, croma y tono |
| OKLCH | oklch(0.5726 0.2338 265.28) |
Luminosidad, croma y tono |
HEX y RGB son los mismos números escritos en bases distintas, y HSL y HWB reparten esos números en ejes más cómodos de manejar para una persona. LAB, LCH y OKLCH son espacios de color construidos a partir de cómo percibimos el color; OKLCH es un LCH retocado para ser más uniforme a la vista, y en CSS se puede usar directamente con oklch(). El mismo azul tiene un ángulo de tono de 225 en HSL, de 288.08 en LCH y de 265.28 en OKLCH. Cada espacio de color mide el ángulo con su propia referencia, de modo que copiar los números de un formato en otro da un color distinto.
La luminosidad de HSL y la de OKLCH
La luminosidad de HSL es la media entre el mayor y el menor de los valores de rojo, verde y azul, y no se corresponde bien con el brillo que ve el ojo. El amarillo puro hsl(60 100% 50%) y el azul puro hsl(240 100% 50%) tienen la misma luminosidad HSL, un 50 %. Pásalos por el conversor y verás esto:
- El amarillo es
oklch(0.968 0.211 109.77): luminosidad OKLCH de 0,968. - El azul es
oklch(0.452 0.3132 264.05): luminosidad OKLCH de 0,452.
Sobre un fondo blanco la diferencia salta a la vista. En el verificador de contraste, con #ffffff como color de fondo, el amarillo #ffff00 se queda en 1,07:1 y apenas se distingue, mientras que el azul #0000ff llega a 8,59:1. Para montar una paleta de colores que solo se diferencien en el tono y tengan un brillo parecido, el resultado queda más parejo igualando la luminosidad de OKLCH que la de HSL.
Así se calcula el contraste WCAG
Se usa la fórmula de WCAG 2. Para cada color se obtiene la luminancia relativa (relative luminance: la suma ponderada de los valores de rojo, verde y azul una vez linealizados); se llama L1 a la del color más claro y L2 a la del más oscuro, y se calcula (L1 + 0,05) ÷ (L2 + 0,05). Dos colores iguales dan 1:1; negro y blanco, 21:1.
| Criterio en pantalla | Relación necesaria |
|---|---|
| AA · texto normal | 4,5:1 |
| AA · texto grande | 3:1 |
| AAA · texto normal | 7:1 |
| AAA · texto grande | 4,5:1 |
Se considera «texto grande» el de 18 pt o más (unos 24 px) en grosor normal y el de 14 pt o más (unos 19 px) en negrita. AA es el nivel que exige la mayoría de las pautas de accesibilidad; AAA es más estricto.
- Los colores que vienen de entrada, texto
#1f2937sobre fondo#ffffff, dan 14,67:1 y aprueban los cuatro criterios. - El gris
#767676sobre fondo blanco da 4,54:1 y aprueba AA para texto normal. Un punto más claro,#777777, se queda en 4,47:1 y no aprueba.
La relación que se ve en pantalla no se redondea: se trunca a partir del segundo decimal. Así se evita que una combinación de 4,499:1 se muestre como 4,50:1 y figure al mismo tiempo como no aprobada. Para decidir si aprueba se usa el valor sin truncar.
El contraste de los colores semitransparentes
La fórmula de WCAG solo contempla colores opacos. Por eso, cuando un color tiene alfa, primero se compone el color que se vería realmente en pantalla y después se calcula.
- Un color de fondo semitransparente se trata como si estuviera colocado sobre una base blanca.
- Un color de texto semitransparente se trata como si estuviera colocado sobre ese fondo ya resuelto.
Texto rgb(0 0 0 / 50%) sobre fondo #ffffff equivale a un texto gris: 3,97:1, que solo aprueba AA para texto grande. En una página real, si detrás del fondo semitransparente hay una foto o un color que no es blanco, el resultado será otro. En ese caso mide con el color de fondo que se ve finalmente en pantalla, escrito como valor opaco.
Colores fuera de la gama sRGB
Con LAB, LCH y OKLCH se pueden escribir colores que una pantalla sRGB corriente no es capaz de mostrar. oklch(70% 0.3 150) es uno de ellos. Al introducirlo aparece el aviso de que está fuera de la gama y los resultados son estos:
- El HEX es
#00cb00y el RGB,rgb(0, 203, 0). No es el color que has escrito, sino ese color recortado para que quepa en sRGB. - Las líneas LAB, LCH y OKLCH conservan el color original, sin recortar.
- Las líneas HSL y HWB son, igual que HEX y RGB, el color recortado pasado a esos formatos. Dan
hsl(120, 100%, 39.84%)yhwb(120 0% 20.32%), sin números fuera de rango.
La muestra de color y el selector de color enseñan también el color recortado.