Color y unidades

Un texto gris claro #bbbbbb sobre blanco tiene una relación de contraste de 1.92 a 1. WCAG pide al menos 4.5 a 1 para el texto normal.

Maneras de escribir un color

CSS acepta colores en varias notaciones, y todas terminan siendo lo mismo: cantidades de luz roja, verde y azul en la pantalla. Los colores con nombre, como red, navy o rebeccapurple, son fáciles de leer pero limitados. La notación hexadecimal escribe el rojo, el verde y el azul con dos dígitos hexadecimales cada uno, de 00 a ff (de 0 a 255): #1a5fb4 es 26 de rojo, 95 de verde y 180 de azul, un azul medio. rgb(26 95 180) dice lo mismo en decimal. hsl(210 80% 40%) describe un color por su tono (un ángulo en el círculo cromático, donde 0 es rojo, 120 verde y 240 azul), su saturación y su luminosidad, lo que facilita obtener un tono más claro u oscuro del mismo color cambiando un solo número.

color: navy;
color: #1a5fb4;              /* same as #1A5FB4 */
color: #36c;                 /* short form of #3366cc */
color: rgb(26 95 180);
color: rgb(26 95 180 / 50%); /* half transparent */
color: hsl(210 80% 40%);
background-color: transparent;

Un cuarto valor, después de una barra, fija el canal alfa: rgb(0 0 0 / 50%) es negro con media opacidad, así que se ve lo que hay detrás. color fija el color del texto, background-color el relleno detrás de un elemento y border-color su borde. La palabra clave currentColor significa el color del texto del elemento, algo práctico para íconos y bordes que deben coincidir con el texto.

El contraste no es opcional

Un texto con una luminosidad demasiado parecida a la de su fondo es difícil de leer para mucha gente: cualquiera con baja visión, los lectores mayores y todos los que leen el celular bajo el sol. WCAG 2.2, las pautas de accesibilidad del W3C, lo mide como una relación de contraste que va de 1 a 1 (sin diferencia) a 21 a 1 (negro sobre blanco). El criterio de conformidad 1.4.3 pide al menos 4.5 a 1 para el texto normal y 3 a 1 para el texto grande, que WCAG define como al menos 18 puntos, o 14 puntos en negrita. El gris oscuro #767676 sobre blanco pasa por poco con 4.54 a 1; #777777 no pasa por poco con 4.48. Las herramientas para desarrolladores del navegador muestran la relación cuando inspeccionas un elemento de texto, así que no hace falta adivinar.

Además, el color nunca debe ser la única forma de mostrar una información. Un formulario que marca los errores solo poniendo un borde en rojo deja fuera a quienes no ven bien el rojo; agrega también un mensaje o un ícono.

Unidades absolutas y relativas

Las longitudes necesitan una unidad, salvo el cero. px es el píxel CSS, una unidad fija; en pantallas de alta densidad un píxel CSS ocupa varios píxeles físicos, así que a la vista mantiene más o menos el mismo tamaño. Las unidades relativas cambian según otra cosa. em es relativa al tamaño de letra del propio elemento, así que padding: 0.5em en un texto de 20 píxeles son 10 píxeles. rem es relativa al tamaño de letra de la raíz (html), que en los navegadores es de 16 píxeles a menos que el lector lo haya cambiado, así que 1.25rem son normalmente 20 píxeles. % es relativo al padre, normalmente a su ancho. vw y vh son centésimas del ancho y del alto de la ventana gráfica, y ch es más o menos el ancho del dígito cero en la fuente actual.

¿Cuál usar? Dar el tamaño del texto en rem respeta al lector: si alguien configura su navegador con letra más grande, todo lo que está en rem crece con ella, mientras que el texto fijado en px puede no hacerlo. El padding en em crece con el texto que rodea. Los píxeles sirven para lo que no debe cambiar de escala, como un borde de 1 píxel.