Comprender sRGB en el Cálculo de Contraste

1. ¿Qué es sRGB?

sRGB (Standard Red Green Blue) es el espacio de color predeterminado para la web, definido por el estándar internacional IEC 61966-2-1. Creado en 1996 por HP y Microsoft, sRGB fue diseñado para proporcionar una experiencia de color consistente en monitores, impresoras y cámaras digitales. WCAG 2.2 establece sRGB como el espacio de color de referencia para calcular la luminancia relativa y los ratios de contraste. Esto significa que cada cálculo de contraste debe usar la función de transferencia sRGB para producir resultados comparables. La elección de sRGB garantiza que las mediciones de accesibilidad sean consistentes independientemente de qué herramienta realice el cálculo.

2. La Función de Transferencia sRGB

Las pantallas no emiten luz proporcionalmente a los valores de color almacenados. Un valor de píxel de 128 (de 255) no produce la mitad de la luz de un píxel a 255. Esta relación no lineal se llama codificación gamma, y la función de transferencia sRGB es la curva específica que la invierte. Para calcular el contraste con precisión, cada canal de color (R, G, B) debe linealizarse primero. La especificación sRGB define una función por tramos: valores iguales o inferiores a 0,04045 se dividen por 12,92, mientras que los valores superiores usan la fórmula ((valor + 0,055) / 1,055) elevada a 2,4. Este paso de linealización es crítico. Sin él, los colores de tonos medios producirían valores de luminancia significativamente incorrectos.

3. sRGB vs Otros Espacios de Color

Las pantallas modernas soportan cada vez más espacios de color más amplios como Display P3 (usado por dispositivos Apple) y Adobe RGB (usado en fotografía profesional). Estos espacios pueden representar colores más vivos que sRGB. Sin embargo, los cálculos de contraste WCAG siempre usan sRGB, incluso cuando la pantalla soporta una gama más amplia. Los colores especificados en CSS usando P3 u otros espacios se mapean a sus equivalentes sRGB para la medición de contraste. Esta es una elección deliberada: sRGB proporciona una línea base universal. En la práctica, un par de colores que pasa el contraste WCAG en sRGB también será legible en pantallas de gama más amplia. Si diseñas en Display P3 o Adobe RGB, siempre verifica tus ratios de contraste usando la fórmula WCAG basada en sRGB.

4. Implicaciones Prácticas para Diseñadores

Comprender sRGB es importante para el trabajo diario de diseño. Primero, especifique siempre sus colores en valores hexadecimales sRGB (#RRGGBB) para proyectos web — esto es lo que los navegadores renderizan por defecto y lo que evalúan las herramientas de accesibilidad. Segundo, tenga en cuenta que los valores de color de herramientas como Figma o Sketch pueden usar perfiles de color diferentes. Al exportar colores para uso web, asegúrese de trabajar en el perfil sRGB. Tercero, la curva gamma sRGB significa que los cambios de contraste no son lineales. Pequeños ajustes en colores muy oscuros o muy claros tienen un efecto mayor en el ratio que el mismo ajuste en colores de rango medio. Al ajustar colores para alcanzar un umbral WCAG, trabaje con el verificador de contraste abierto.

Probar este ejemplo →