Relación de contraste y texto legible

El gris #767676 sobre blanco tiene una relación de contraste de 4.54:1 y cumple el mínimo de WCAG para el texto de cuerpo; un paso más claro, #777777, da 4.48:1 y no cumple.

Luminancia relativa

Para decidir si un texto se puede leer, las Pautas de Accesibilidad para el Contenido Web (WCAG) no usan el tono ni la luminosidad HSL. Usan la luminancia relativa, un número de 0 para el negro a 1 para el blanco que sigue cuánta luz envía un color al ojo. WCAG 2.2 la define en dos pasos. Primero, cada canal se convierte en un número de 0 a 1 dividiendo entre 255 y deshaciendo después la curva sRGB: si el valor es como máximo 0.04045, se divide entre 12.92; si no, se calcula ((valor + 0.055) / 1.055) elevado a 2.4. Segundo, los tres resultados se ponderan y se suman: L = 0.2126 R + 0.7152 G + 0.0722 B.

Los pesos explican mucho. El verde aporta más de 70% del total, el azul apenas 7%. Por eso el azul puro #0000ff tiene una luminancia de solo 0.0722 y el amarillo puro, rojo más verde, tiene 0.9278. La especificación también registra un poco de historia: antes de mayo de 2021, el umbral estaba escrito 0.03928, copiado de un documento más antiguo. Se corrigió a 0.04045, y WCAG señala que esto no tiene efecto práctico en los resultados.

Relación de contraste

La relación de contraste compara dos luminancias: (L1 + 0.05) / (L2 + 0.05), donde L1 es el color más claro y L2 el más oscuro. El 0.05 representa un poco de luz dispersa que siempre llega al ojo, y mantiene finita la relación para el negro. Las relaciones van de 1:1, un color contra sí mismo, a 21:1, negro contra blanco: (1 + 0.05) / (0 + 0.05) = 21. Para #767676 sobre blanco la luminancia es 0.1812, así que la relación es 1.05 / 0.2312 = 4.54.

Este es el cálculo completo para el azul #2273c3 de la unidad 2, rgb(34 115 195). Divididos entre 255, los canales son 0.1333, 0.4510 y 0.7647. Los tres están por encima de 0.04045, así que cada uno pasa por la fórmula de la potencia y da 0.0160, 0.1714 y 0.5457. Ponderados, quedan 0.0034 del rojo, 0.1226 del verde y 0.0394 del azul, y la suma es una luminancia de 0.1654. Contra el blanco, la relación es 1.05 / 0.2154 = 4.87, así que este azul cumple AA para texto de cuerpo sobre una página blanca. Contra el negro es 0.2154 / 0.05 = 4.31, un poco por debajo.

Los umbrales

WCAG 2.2 convierte la relación en indicaciones «Cumple» o «No cumple». El criterio de conformidad 1.4.3, de nivel AA, pide al menos 4.5:1 para el texto normal y 3:1 para el texto de gran tamaño. De gran tamaño significa al menos 18 puntos, o 14 puntos en negrita; WCAG señala que esto equivale a más o menos 1.5 em y 1.2 em en negrita para las fuentes de cuerpo habituales. El criterio 1.4.6, de nivel AAA, sube el listón a 7:1 y 4.5:1. El criterio 1.4.11 pide 3:1 para las partes de botones, campos de formulario e iconos que la gente necesita ver. El rojo puro #ff0000 sobre blanco da 4.00:1, lo cual sirve para un título grande pero no cumple para texto de cuerpo. El azul #0000ff sobre blanco da 8.59:1 y cumple todo.

De la fórmula sale otro dato útil. Un color con luminancia de más o menos 0.179 tiene el mismo contraste contra el blanco y contra el negro, unos 4.58:1. Con un color más oscuro, el texto blanco se lee mejor; con uno más claro, el negro. El panel bajo el modelo muestra ambas relaciones y señala la mejor opción.