High Contrast en Aplicaciones Móviles — Qué Es, Accesibilidad y Configuración de Contraste

¿Qué es High Contrast en Accesibilidad?

High Contrast es un modo de visualización en el que el sistema operativo o la aplicación aumenta la diferencia entre el color del primer plano (texto, iconos) y el fondo. La relación de contraste mínima para texto normal según el estándar WCAG AA es 4.5:1, y para texto grande (desde 18pt o 14pt negrita) — 3:1. El modo High Contrast puede aumentar la proporción hasta 7:1 o más, garantizando la máxima legibilidad.

A diferencia de simplemente oscurecer el fondo o aclarar el texto, High Contrast funciona de manera integral: reemplaza la paleta de colores de la interfaz con un conjunto limitado de colores de alto contraste, agrega contornos alrededor de los elementos y elimina la transparencia. El modo está diseñado para personas con agudeza visual reducida, fotofobia y ciertas formas de daltonismo.

Hay tres tipos de High Contrast: a nivel de sistema (activado en el SO y afecta a todas las aplicaciones), dentro de la aplicación (modo integrado dentro de una aplicación específica) y modo web (función multimedia CSS prefers-contrast). El High Contrast a nivel de sistema es el más potente, ya que anula los colores incluso en aplicaciones que no tienen su propio soporte de accesibilidad.

¿Quién necesita High Contrast?

Los principales usuarios de High Contrast son personas con cataratas (opacidad del cristalino que reduce la sensibilidad al contraste), degeneración macular (pérdida de la visión central), glaucoma y retinopatía diabética. Este modo también es necesario cuando se trabaja bajo luz solar intensa: el alto contraste compensa los reflejos de la pantalla. Según WebAIM (2025), el 86% de las páginas web tienen texto con un contraste inferior a WCAG AA — High Contrast por parte del usuario corrige parcialmente este defecto.

Increase Contrast en iOS: Configuración y Tipos de Contraste

En iOS, la función Increase Contrast se encuentra en Settings > Accessibility > Display & Text Size e incluye tres interruptores independientes: Increase Contrast (mejora general), Darken Colors (oscurecer colores brillantes) y Reduce Transparency (reducir transparencia). Increase Contrast es el interruptor principal, que afecta al texto, botones y bordes de los elementos del sistema.

Técnicamente, iOS implementa Increase Contrast a través de tintColor y la capa UIVisualEffectView. Cuando se activa, el sistema aumenta el valor alfa para los tonos oscuros y lo disminuye para los claros, elevando la relación de contraste de todos los elementos de la interfaz en 2–3 puntos. Reduce Transparency reemplaza los fondos semitransparentes (efecto de vidrio esmerilado) por opacos, lo que mejora aún más la legibilidad del texto sobre fondos borrosos.

Verificar Increase Contrast en una app de iOS

Un desarrollador puede verificar el estado de Increase Contrast a través de UIAccessibility y adaptar los colores en consecuencia. Por ejemplo, si el contraste está aumentado, se pueden usar colores de acento más saturados; si no, se debe garantizar una relación de contraste base de 4.5:1 mediante la paleta predeterminada. UIAccessibility.isReduceTransparencyEnabled también es útil para desactivar los efectos de desenfoque cuando el modo está activo.

import UIKit

class ContrastManager {

    // Verificar el estado de Increase Contrast
    static var isIncreaseContrastEnabled: Bool {
        return UIAccessibility.isDarkerSystemColorsEnabled
    }

    // Verificar Reduce Transparency
    static var isReduceTransparencyEnabled: Bool {
        return UIAccessibility.isReduceTransparencyEnabled
    }

    // Adaptar el color al modo de contraste
    static func adjustedAccentColor() -> UIColor {
        guard isIncreaseContrastEnabled else {
            return .systemBlue
        }
        // Azul más saturado cuando High Contrast está activo
        return UIColor(red: 0.0, green: 0.35, blue: 0.9, alpha: 1.0)
    }

    // Color de fondo teniendo en cuenta Reduce Transparency
    static func backgroundColor() -> UIColor {
        if isReduceTransparencyEnabled {
            return .systemBackground // Fondo opaco
        }
        return UIColor.systemBackground.withAlphaComponent(0.85)
    }

    // Suscribirse a los cambios
    static func observeChanges(observer: Any, selector: Selector) {
        NotificationCenter.default.addObserver(
            observer,
            selector: selector,
            name: UIAccessibility.darkerSystemColorsStatusDidChangeNotification,
            object: nil
        )
        NotificationCenter.default.addObserver(
            observer,
            selector: selector,
            name: UIAccessibility.reduceTransparencyStatusDidChangeNotification,
            object: nil
        )
    }
}

// Ejemplo de uso: UINavigationBar
func applyContrastToNavigationBar(_ navBar: UINavigationBar) {
    if ContrastManager.isIncreaseContrastEnabled {
        navBar.isTranslucent = false
        navBar.barTintColor = ContrastManager.backgroundColor()
        navBar.titleTextAttributes = [
            .foregroundColor: UIColor.label,
            .font: UIFont.boldSystemFont(ofSize: 18)
        ]
    }
}

La clase ContrastManager proporciona acceso al estado de Increase Contrast a través de isDarkerSystemColorsEnabled, adapta el color de acento cuando el modo está activo, desactiva la transparencia de la barra de navegación y se suscribe a las notificaciones del sistema sobre cambios de contraste. UIKit redibuja automáticamente los elementos cuando cambia el estado de UIAccessibility.

Colores dinámicos de iOS (UIColor Well) y Contraste

iOS proporciona colores UIColor dinámicos (systemBackground, label, secondaryLabel) que se adaptan automáticamente al modo Increase Contrast. Cuando Increase Contrast se activa, los colores del sistema cambian sus valores: label se vuelve más oscuro (o más claro en modo oscuro), el fondo pierde transparencia. Se recomienda a los desarrolladores usar colores dinámicos para todos los elementos de la interfaz para evitar conflictos con el contraste del sistema.

High Contrast Text en Android: Tema Oscuro y Contraste

En Android, la función High Contrast Text funciona de manera diferente que en iOS. En lugar de aumentar suavemente la relación de contraste, Android aplica un esquema de colores invertido: fondo oscuro y texto blanco con mayor negrita. Este modo es especialmente efectivo en pantallas AMOLED, donde el negro proporciona el máximo contraste. La configuración se encuentra en Ajustes > Accesibilidad > Mejoras de visibilidad.

Android High Contrast Text utiliza dos mecanismos: anular la paleta de colores mediante una superposición de tema y aplicar una ColorMatrix para aumentar el contraste de las imágenes de mapa de bits. El sistema analiza el tema actual de la aplicación (Claro/Oscuro) y aplica una superposición con el máximo contraste: primer plano blanco (#FFFFFF) sobre fondo negro (#000000). Los elementos semitransparentes reciben un fondo opaco.

Verificar High Contrast Text mediante la API de Android

Para verificar el estado de High Contrast Text en Android, se utiliza AccessibilityManager y ContentResolver. La API permite determinar si el modo está activo y adaptar la interfaz de usuario. Jetpack Compose admite la adaptación a través de CompositionLocalProvider y LocalContrast.

import android.accessibilityservice.AccessibilityService
import android.content.Context
import android.provider.Settings
import android.view.accessibility.AccessibilityManager
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color

class HighContrastHelper {

    // Verificar mediante AccessibilityManager
    fun isHighContrastTextEnabled(context: Context): Boolean {
        val am = context.getSystemService(
            Context.ACCESSIBILITY_SERVICE
        ) as AccessibilityManager
        return am.isEnabled && am.getEnabledAccessibilityServiceList(
            AccessibilityService.FEEDBACK_ALL_MASK
        ).any { it.resolveInfo.serviceInfo.packageName ==
            "com.android.server.accessibility" }
    }

    // Verificar mediante configuración global
    fun isHighContrastFromSettings(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "high_text_contrast_enabled"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — colores teniendo en cuenta el contraste
    @Composable
    fun contrastAwareColors(): Pair<Color, Color> {
        val context = androidx.compose.ui.platform.LocalContext.current
        return if (isHighContrastTextEnabled(context)) {
            Color.White to Color.Black
        } else {
            Color.Black to Color.White
        }
    }
}

// Sistema View: selector de color dinámico
class ContrastTextView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
) : AppCompatTextView(context, attrs) {

    private val helper = HighContrastHelper()

    override fun onAttachedToWindow() {
        super.onAttachedToWindow()
        if (helper.isHighContrastTextEnabled(context)) {
            setTextColor(Color.WHITE)
            setBackgroundColor(Color.BLACK)
            setTypeface(getTypeface(), Typeface.BOLD)
        }
    }
}

La clase HighContrastHelper verifica si High Contrast está activo a través de AccessibilityManager y la configuración del sistema, adapta los colores en Jetpack Compose y proporciona un ContrastTextView personalizado para el sistema View. En Android, a diferencia de iOS, no hay una Notificación directa para cambios de High Contrast — ContentObserver en Settings.System es obligatorio para actualizaciones dinámicas.

Material Design 3 y High Contrast

Material Design 3 (Material You) incluye soporte integrado de High Contrast a través de Dynamic Color. Cuando el modo del sistema está activo, Material 3 selecciona automáticamente la paleta tonal máxima: background = Neutral0, onBackground = Neutral100, primary = Primary100. Los desarrolladores solo necesitan usar componentes MD3 — el sistema maneja la adaptación del contraste automáticamente.

WCAG Contrast Ratio: Estándares 4.5:1 y 3:1

WCAG contrast ratio es una relación matemática de luminancia entre dos colores, utilizada para evaluar la accesibilidad del texto. El estándar define dos umbrales: 4.5:1 para texto normal (nivel AA) y 3:1 para texto grande (desde 18px/14px negrita). Para el nivel AAA, se requiere 7:1 para texto normal y 4.5:1 para texto grande. El modo High Contrast idealmente debería proporcionar 7:1 o más.

El cálculo de la relación de contraste se realiza mediante la fórmula: (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia relativa del color más claro y L2 es la luminancia relativa del color más oscuro. La luminancia relativa se calcula a partir de los canales sRGB con pesos: 0.2126R + 0.7152G + 0.0722B. Para los desarrolladores de accesibilidad, es suficiente usar herramientas como WebAIM Contrast Checker, Color Contrast Analyser o Accessibility Inspector en Xcode.

Tabla de Umbrales de Contraste WCAG 2.2

Verificación de Contraste en Código

Para la verificación automática de la relación de contraste en una aplicación web, se puede usar JavaScript. Cuando el modo High Contrast está activo, es recomendable resaltar los elementos que no cumplen con el estándar AA. A continuación se muestra un ejemplo de cálculo de luminancia relativa y relación de contraste en JavaScript.

// Cálculo de la relación de contraste según WCAG 2.2
class ContrastChecker {

    // Conversión de sRGB a espacio lineal
    linearize(channel) {
        const s = channel / 255
        return s <= 0.04045
            ? s / 12.92
            : Math.pow((s + 0.055) / 1.055, 2.4)
    }

    // Luminancia relativa
    relativeLuminance(r, g, b) {
        const R = this.linearize(r)
        const G = this.linearize(g)
        const B = this.linearize(b)
        return 0.2126 * R + 0.7152 * G + 0.0722 * B
    }

    // Relación de contraste entre dos colores
    getContrastRatio(hex1, hex2) {
        const rgb1 = this.hexToRgb(hex1)
        const rgb2 = this.hexToRgb(hex2)
        const L1 = this.relativeLuminance(rgb1.r, rgb1.g, rgb1.b)
        const L2 = this.relativeLuminance(rgb2.r, rgb2.g, rgb2.b)
        const lighter = Math.max(L1, L2)
        const darker = Math.min(L1, L2)
        return (lighter + 0.05) / (darker + 0.05)
    }

    hexToRgb(hex) {
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16),
        } : null
    }

    // Verificación de nivel AA (4.5:1)
    passesAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 4.5
    }

    // Verificación de nivel AAA (7:1)
    passesAAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 7.0
    }
}

// Uso
const checker = new ContrastChecker()
console.log(checker.getContrastRatio("#333333", "#FFFFFF"))
// → 13.2:1 (AAA)
console.log(checker.passesAA("#999999", "#FFFFFF"))
// → false (2.8:1)

La clase ContrastChecker en JavaScript implementa un cálculo completo de la relación de contraste según WCAG 2.2: conversión de sRGB a espacio lineal, cálculo de luminancia relativa con pesos Rec.709 y comparación con los umbrales AA/AAA. Esta herramienta es útil para la auditoría automatizada de la paleta de colores al desarrollar aplicaciones web con soporte de High Contrast.

Herramientas de Auditoría de Contraste

Para verificar la relación de contraste en una aplicación terminada, use Accessibility Scanner (Android), Xcode Accessibility Inspector (iOS) o axe DevTools (web). Estas herramientas encuentran automáticamente elementos con contraste inferior a WCAG AA y los resaltan. El modo High Contrast debe estar habilitado durante la auditoría — esto mostrará si la mejora de contraste del sistema es suficiente para alcanzar 7:1.

CSS prefers-contrast: Adaptación de Páginas Web al Contraste del Sistema

La función multimedia CSS prefers-contrast permite que las páginas web adapten los estilos según la configuración de contraste del sistema del usuario. La función acepta los valores: no-preference (predeterminado), more (el usuario ha activado High Contrast), less (el usuario prefiere contraste reducido) y custom (ajuste fino). Es compatible con todos los navegadores modernos desde 2022.

prefers-contrast: more — una señal para los desarrolladores web: aumentar la relación de contraste del texto, reemplazar fondos semitransparentes por opacos, mejorar los bordes de los elementos interactivos y eliminar imágenes de fondo de bajo contraste. iOS Safari y Android Chrome transmiten el valor more cuando el modo High Contrast del sistema (Increase Contrast / High Contrast Text) está activado.

Ejemplo de Adaptación con prefers-contrast

Cuando prefers-contrast: more está activo, la página web debe minimizar la cantidad de colores y preferir una paleta en blanco y negro con colores de acento para los destaques. A continuación se muestra un ejemplo de adaptación CSS con reemplazo de colores, eliminación de transparencia y mejora de bordes.

/* Estilos base (no-preference) */
.card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.button {
    background: #0066CC;
    color: #FFFFFF;
    border: none;
    padding: 12px 24px;
}

/* Alto contraste: more */
@media (prefers-contrast: more) {
    .card {
        background: #FFFFFF;
        border: 2px solid #000000;
        color: #000000;
        box-shadow: none;
    }

    .button {
        background: #004499;
        outline: 2px solid #000000;
        outline-offset: 2px;
    }

    .muted-text {
        color: #000000; // Era #666 — ahora negro
    }

    .overlay {
        background: rgba(0, 0, 0, 0.8); // Era 0.4 — aumentado
    }
}

/* Contraste reducido: less */
@media (prefers-contrast: less) {
    .card {
        border: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    }
}

En el ejemplo de CSS con prefers-contrast: more, la tarjeta obtiene un fondo blanco opaco, un borde negro de 2px, el texto se vuelve negro (#000 en lugar de #333), y el botón se vuelve azul oscuro con un contorno negro para visibilidad. Con prefers-contrast: less (un caso raro — el usuario prefiere colores suaves), el contraste se reduce en su lugar.

Combinación con prefers-color-scheme

Para una adaptación completa de accesibilidad, prefers-contrast se combina con prefers-color-scheme (tema claro/oscuro). Cuando prefers-color-scheme: dark y prefers-contrast: more están ambos activos, los colores deben ser blanco sobre negro con acentos brillantes. En modo claro — negro sobre blanco. La combinación de estas funciones multimedia produce 4 combinaciones que deben probarse para una cobertura completa de accesibilidad.