Trampas de contraste en modo oscuro

Toma los colores de primer plano de un tema claro en el que confías — el azul de marca, ambos grises de texto, el blanco roto que nunca se usa, el blanco puro — y vuelve a medir cada uno contra una página casi negra en lugar de una blanca. Los números no se degradan de forma uniforme; se reordenan. El gris de texto secundario que pasaba con margen de sobra cae a ≈2,5:1. El azul de marca que sostenía los botones baja a ≈3,3:1. Y los dos valores que eran inservibles sobre blanco — el blanco roto y el blanco puro — arrojan los mejores resultados de la columna.

El contraste en modo oscuro se rige por los mismos mínimos — 4,5:1 para texto de cuerpo, 3:1 para texto grande y componentes de interfaz — pero la geografía del fallo se desplaza: los valores de luminosidad media que tenían margen sobre blanco se hunden contra el casi negro, los colores de marca saturados caen por debajo de los mínimos, y el rango utilizable para texto queda comprimido por abajo por la separación y por arriba por el deslumbramiento. Cada emparejamiento hay que volver a medirlo sobre el fondo oscuro, y leerlo con la polaridad en mente, porque la ratio por sí sola no puede ver qué lado es el texto. Este artículo mapea adónde se trasladan los fallos; cómo se deriva una paleta oscura para que sus valores lleguen ya comprobados es el tema mayor de nuestra guía de modo oscuro.

¿Cambian los requisitos de contraste de WCAG en modo oscuro?

No. El mínimo de contraste de WCAG pide los mismos 4,5:1 en el texto de cuerpo y 3:1 en el texto grande y los componentes de interfaz, sea cual sea el tema que se muestre. La fórmula es simétrica — divide la luminancia más clara entre la más oscura y compara el resultado contra el mínimo — así que no sabe, ni le importa, que la página se haya oscurecido.

Lo que cambia es cuáles de tus valores todavía pueden superar el listón. Ese conjunto resulta ser casi el opuesto al del tema claro, y por eso un tema oscuro no hereda casi nada de las comprobaciones del tema claro: no porque el estándar se haya endurecido, sino porque ambos lados de cada emparejamiento se han movido.

¿Por qué fallan los colores de tono medio sobre fondos oscuros?

Porque en una página oscura, el texto tiene que aportar toda la luz por sí mismo. Sobre blanco, el fondo suministra el contraste — su luminancia es casi máxima, de modo que cualquier primer plano suficientemente oscuro pasa, y los valores elegibles se extienden por media escala de luminosidad. Contra el casi negro los papeles se invierten: la página aporta casi nada, la ratio la impulsa la propia luminancia del primer plano, y la luminancia cae de forma abrupta a través del centro del rango de luminosidad. Un tono medio simplemente no emite lo suficiente para separarse.

La aritmética de los grises neutros hace concreta esta compresión. En una página blanca, un gris pasa como texto de cuerpo con cualquier luminosidad hasta L ≈0,57 en OKLCH — todo, desde el negro hasta el gris medio, funciona. En una página casi negra a L ≈0,22, un gris necesita L ≈0,61 o más para alcanzar 4,5:1, y el extremo cómodo se detiene en torno a L ≈0,9–0,95, donde toma el mando el deslumbramiento. La banda que pasa se reduce a la mitad aproximadamente y se traslada por completo al extremo claro — y las dos bandas no se solapan: contra estos dos fondos, ningún neutro único puede sostener el texto de cuerpo en ambos temas.

¿Dónde pasan y fallan los mismos colores?

Cinco primeros planos, dos fondos. La página clara es blanca; la página oscura es oklch(0.22 0.015 262.9) ≈ #171B22, un casi negro de clase neutral-900.

La fila del azul es la que sorprende a los equipos. #2563eb es oklch(0.546 0.215 262.9): vivo, saturado — y de luminosidad media. La saturación no añade luminancia, así que un color puede ser tan intenso como permita la gama y aun así situarse en el centro de la escala, que es exactamente donde los fondos oscuros son implacables. El azul que anclaba los botones y pasaba como texto sobre blanco llega al casi negro como un valor que no puede sostener legalmente el texto de cuerpo. Eso no es un defecto del color; es la geografía desplazándose bajo él.

Abre estos emparejamientos en Scale Composer — los mismos cinco primeros planos comprobados contra la página oscura, cada uno con su ratio WCAG y su puntuación APCA lado a lado, con las filas que fallan marcadas contra sus mínimos.

¿Es el claro-sobre-oscuro el mismo contraste que el oscuro-sobre-claro?

No para el ojo. La ratio WCAG es ciega a la polaridad por construcción — intercambia texto y fondo y el número es idéntico — pero la percepción no es simétrica. Con la misma ratio medida, el texto claro sobre un fondo oscuro suele leerse más fuerte: los trazos brillantes irradian hacia el campo oscuro en lugar de quedar contenidos por él. Ese mismo efecto castiga la tipografía fina — el resplandor se come los trazos capilares — y por eso los temas oscuros a menudo quieren un peso de texto algo más robusto de lo que sugieren sus ratios medidas.

APCA, el modelo de contraste emergente, puntúa la polaridad de forma explícita: usa curvas distintas para cada dirección y da signo negativo a los resultados de claro-sobre-oscuro. Los dos modelos pueden discrepar en el orden, no solo en la magnitud. El texto secundario del tema claro de arriba — el gris L ≈0,47 sobre blanco — mide ≈6,8:1 y puntúa ≈Lc 84 en APCA. El texto secundario del tema oscuro — el gris L ≈0,78 sobre casi negro — mide ≈8,6:1, una ratio mayor, y sin embargo puntúa ≈Lc 62, notablemente más baja. La ratio clasifica el emparejamiento oscuro como más fuerte; APCA lo clasifica como más débil. Ninguno de los dos números es un error — modelan cosas distintas — y APCA es hoy un instrumento de grado investigativo más que un requisito de conformidad. Ese es el argumento para leer ambos, y es por lo que Scale Composer informa de APCA junto a cada ratio WCAG que comprueba.

¿Puede un tema oscuro tener demasiado contraste?

Pasado cierto punto, sí — el modo oscuro es donde “más contraste es mejor” deja de ser cierto de forma llamativa. El blanco puro sobre casi negro supera todos los mínimos con ≈17:1, y ese excedente es el problema: los trazos de alta luminancia sobre un campo oscuro tienden a florecer y formar halos, un efecto que suele reportarse como peor de noche y para lectores con astigmatismo. Un blanco roto en torno a L ≈0,9 todavía mide ≈13:1 — casi el triple del mínimo de texto de cuerpo — y se lee más tranquilo. Los mínimos son mínimos, no objetivos; nada en el estándar premia los últimos cuatro puntos de ratio, y el ojo los cobra.

¿Sigue aplicándose la exención para el texto deshabilitado?

Sí — los controles deshabilitados y los elementos inactivos no tienen requisito de contraste en ninguno de los dos temas. Lo que cambia es con qué rapidez lo “atenuado” deriva hacia lo “ausente”. Cerca de una página oscura los denominadores son diminutos, de modo que pequeños movimientos de luminosidad mueven la ratio con fuerza: un gris deshabilitado a L ≈0,45 se sitúa en ≈2,3:1 — tenue pero localizable — mientras que bajarlo a L ≈0,38 deja ≈1,7:1, que la mayoría de los ojos simplemente no verá en una pantalla poco iluminada. Sobre blanco, esa misma deriva de 0,07 de L apenas se nota. Los valores deshabilitados y de marcador de posición sobre oscuro merecen elegirse deliberadamente en lugar de heredarse, haya exención o no.

Vuelve a comprobar la geografía, no la costumbre

Los hábitos que hacían pasar una paleta clara son los que fallan aquí, y por eso la comprobación tiene que ejecutarse sobre los propios valores oscuros. Compara WCAG y APCA en una paleta oscura — cada emparejamiento de texto y de UI vuelto a medir sobre el fondo oscuro, ambos números lado a lado, para que los emparejamientos que intercambiaron sus lugares en la tabla de arriba sean visibles en tus propios colores antes de que salgan a producción.