High Contrast sa mga mobile app — ano ito, accessibility at mga setting ng contrast

Ano ang High Contrast sa accessibility?

High Contrast ay isang display mode kung saan ang operating system o application ay nagpapataas ng pagkakaiba sa pagitan ng kulay ng foreground (text, icon) at background. Ang minimum na contrast ratio para sa ordinaryong text ayon sa WCAG AA standard ay 4.5:1, para sa malaking text (mula 18pt o 14pt bold) — 3:1. Ang High Contrast mode ay maaaring magpataas ng ratio sa 7:1 at mas mataas, na nagbibigay ng maximum na pagkakakilanlan.

Hindi tulad ng simpleng pagdidilim ng background o pagpapaliwanag ng text, ang High Contrast ay gumagana nang komprehensibo: pinapalitan ang color palette ng interface ng limitadong set ng mga kulay na may mataas na contrast, nagdaragdag ng mga outline sa paligid ng mga elemento, at nag-aalis ng translucency. Ang mode ay dinisenyo para sa mga taong may nabawasang visual acuity, photophobia, at ilang anyo ng color blindness.

Mayroong tatlong uri ng High Contrast: system (naka-activate sa OS at nakakaapekto sa lahat ng application), application (built-in mode sa loob ng isang indibidwal na application), at web (CSS media function na prefers-contrast). Ang System High Contrast ay pinakamakapangyarihan dahil nire-override nito ang mga kulay kahit sa mga application na walang sariling accessibility support.

Sino ang nangangailangan ng High Contrast

Ang mga pangunahing gumagamit ng High Contrast — mga taong may katarata (pag-ulap ng lens na nagpapababa ng contrast sensitivity), macular degeneration (pagkawala ng central vision), glaucoma, at diabetic retinopathy. Ang mode ay kailangan din kapag nagtatrabaho sa maliwanag na araw — ang mataas na contrast ay nagko-compensate ng glare sa screen. Ayon sa WebAIM (2025), 86% ng mga web page ay may text na may contrast na mas mababa sa WCAG AA — ang High Contrast sa panig ng gumagamit ay bahagyang nagwawasto sa depektong ito.

Increase Contrast sa iOS: mga setting at uri ng contrast

Sa iOS, ang function na Increase Contrast ay matatagpuan sa Settings > Accessibility > Display & Text Size at may kasamang tatlong independiyenteng switch: Increase Contrast (pangkalahatang pagpapataas), Darken Colors (pagdidilim ng maliliwanag na kulay), at Reduce Transparency (pagbawas ng transparency). Ang Increase Contrast ay ang pangunahing switch na nakakaapekto sa text, mga button, at mga hangganan ng mga system element.

Sa teknikal na paraan, ang iOS ay nagpapatupad ng Increase Contrast sa pamamagitan ng tintColor at layer na UIVisualEffectView. Kapag na-activate, pinapataas ng system ang alpha value para sa maitim na tono at binabawasan para sa maliwanag na tono, na nagtataas ng contrast ratio ng lahat ng UI element ng 2–3 puntos. Pinapalitan ng Reduce Transparency ang translucent na background (epekto ng frosted glass) ng opaque na background, na dagdag na nagpapabuti sa pagiging nababasa ng text sa malabong background.

Pagsusuri ng Increase Contrast sa iOS application

Maaaring suriin ng developer ang status ng Increase Contrast sa pamamagitan ng UIAccessibility at i-angkop ang mga kulay. Halimbawa, kung ang contrast ay nakataas, maaaring gumamit ng mas saturated na accent na kulay, at kung hindi — tiyakin ang base contrast ratio na 4.5:1 sa pamamagitan ng default na palette. Ang UIAccessibility.isReduceTransparencyEnabled ay kapaki-pakinabang din para sa pag-disable ng blur effect kapag aktibo ang mode.

import UIKit

class ContrastManager {

    // Pagsusuri ng status ng Increase Contrast
    static var isIncreaseContrastEnabled: Bool {
        return UIAccessibility.isDarkerSystemColorsEnabled
    }

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

    // Pag-angkop ng kulay sa contrast mode
    static func adjustedAccentColor() -> UIColor {
        guard isIncreaseContrastEnabled else {
            return .systemBlue
        }
        // Mas saturated na asul kapag aktibo ang High Contrast
        return UIColor(red: 0.0, green: 0.35, blue: 0.9, alpha: 1.0)
    }

    // Kulay ng background na isinasaalang-alang ang Reduce Transparency
    static func backgroundColor() -> UIColor {
        if isReduceTransparencyEnabled {
            return .systemBackground // Opaque na background
        }
        return UIColor.systemBackground.withAlphaComponent(0.85)
    }

    // Pag-subscribe sa mga pagbabago
    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
        )
    }
}

// Halimbawa ng paggamit: 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)
        ]
    }
}

Ang klase na ContrastManager ay nagbibigay ng access sa status ng Increase Contrast sa pamamagitan ng isDarkerSystemColorsEnabled, inaangkop ang accent na kulay kapag aktibo ang mode, dinidiskonekta ang translucency ng navigationBar, at nag-subscribe sa mga system notification tungkol sa pagbabago ng contrast. Awtomatikong iginuguhit muli ng UIKit ang mga elemento kapag nagbago ang UIAccessibility status.

Mga dynamic na kulay ng iOS (UIColor Well) at contrast

Ang iOS ay nagbibigay ng mga dynamic na kulay ng UIColor (systemBackground, label, secondaryLabel) na awtomatikong umaangkop sa Increase Contrast mode. Kapag na-activate ang Increase Contrast, binabago ng mga system color ang kanilang mga value: ang label ay nagiging mas maitim (o mas maliwanag sa madilim na tema), ang background ay nawawalan ng translucency. Inirerekomenda sa developer na gumamit ng mga dynamic na kulay para sa lahat ng UI element upang hindi lumikha ng conflict sa system contrast.

High Contrast Text sa Android: madilim na tema at contrast

Sa Android, ang function na High Contrast Text (Text na may mataas na contrast) ay gumagana nang iba kaysa sa iOS. Sa halip na unti-unting pagtaas ng contrast ratio, ang Android ay naglalapat ng baligtad na scheme ng kulay: madilim na background at puting text na may mas mataas na kapal. Ang mode ay lalong epektibo sa mga AMOLED display, kung saan ang itim na kulay ay nagbibigay ng maximum na contrast. Ang setting ay matatagpuan sa Settings > Accessibility > Mga pagpapabuti ng visibility.

Android High Contrast Text ay gumagamit ng dalawang mekanismo: pag-override ng color palette sa pamamagitan ng theme overlay at paglalapat ng ColorMatrix para sa pagtaas ng contrast ng bitmap na imahe. Sinusuri ng system ang kasalukuyang tema ng application (Light/Dark) at naglalapat ng overlay na may maximum na contrast: puting foreground (#FFFFFF) sa itim na background (#000000). Ang mga translucent na elemento ay nakakakuha ng opaque na underlay.

Pagsusuri ng High Contrast Text sa pamamagitan ng Android API

Para sa pagsusuri ng status ng High Contrast Text sa Android, ginagamit ang AccessibilityManager at ContentResolver. Pinapayagan ng API na matukoy kung ang mode ay aktibo at i-angkop ang UI. Ang Jetpack Compose ay sumusuporta sa pag-angkop sa pamamagitan ng CompositionLocalProvider at 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 {

    // Pagsusuri sa pamamagitan ng 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" }
    }

    // Pagsusuri sa pamamagitan ng global settings
    fun isHighContrastFromSettings(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "high_text_contrast_enabled"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — mga kulay na isinasaalang-alang ang contrast
    @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
        }
    }
}

// View system: dynamic na color selector
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)
        }
    }
}

Ang klase na HighContrastHelper ay sumusuri sa aktibidad ng High Contrast sa pamamagitan ng AccessibilityManager at mga system setting, inaangkop ang mga kulay sa Jetpack Compose, at nagbibigay ng custom na ContrastTextView para sa View system. Sa Android, hindi tulad ng iOS, walang direktang notification para sa pagbabago ng High Contrast — ang ContentObserver sa Settings.System ay obligado para sa dynamic na pag-update.

Material Design 3 at High Contrast

Ang Material Design 3 (Material You) ay may kasamang built-in na suporta para sa High Contrast sa pamamagitan ng Dynamic Color. Kapag aktibo ang system mode, awtomatikong pinipili ng Material 3 ang maximum na tonal palette: background = Neutral0, onBackground = Neutral100, primary = Primary100. Kailangan lang ng developer na gumamit ng mga MD3 component — ang system ang bahala sa pag-angkop ng contrast.

WCAG contrast ratio: mga pamantayang 4.5:1 at 3:1

WCAG contrast ratio — mathematical ratio ng liwanag sa pagitan ng dalawang kulay na ginagamit upang suriin ang accessibility ng text. Ang standard ay nagtatakda ng dalawang threshold: 4.5:1 para sa ordinaryong text (AA level) at 3:1 para sa malaking text (mula 18px/14px bold). Para sa AAA level, kinakailangan ang 7:1 para sa ordinaryong at 4.5:1 para sa malaking text. Ang High Contrast mode sa ideal ay dapat magbigay ng 7:1 at mas mataas.

Ang pagkalkula ng contrast ratio ay isinasagawa gamit ang formula: (L1 + 0.05) / (L2 + 0.05), kung saan ang L1 — relative luminance ng mas maliwanag na kulay, L2 — ng mas maitim na kulay. Ang relative luminance ay kinakalkula mula sa sRGB channels na may weights: 0.2126R + 0.7152G + 0.0722B. Para sa accessibility developer, sapat na ang paggamit ng mga tool: WebAIM Contrast Checker, Color Contrast Analyser, o Accessibility Inspector sa Xcode.

Talaan ng mga threshold ng contrast WCAG 2.2

Pagsusuri ng contrast sa code

Para sa awtomatikong pagsusuri ng contrast ratio sa web application, maaaring gumamit ng JavaScript. Kapag aktibo ang High Contrast mode, mainam na i-highlight ang mga elementong hindi tumutugon sa AA standard. Sa ibaba ay ibinigay ang halimbawa ng pagkalkula ng relative luminance at contrast ratio sa JavaScript.

// Pagkalkula ng contrast ratio ayon sa WCAG 2.2
class ContrastChecker {

    // Conversion ng sRGB sa linear space
    linearize(channel) {
        const s = channel / 255
        return s <= 0.04045
            ? s / 12.92
            : Math.pow((s + 0.055) / 1.055, 2.4)
    }

    // Relative luminance
    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
    }

    // Contrast ratio sa pagitan ng dalawang kulay
    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
    }

    // Pagsusuri ng AA level (4.5:1)
    passesAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 4.5
    }

    // Pagsusuri ng AAA level (7:1)
    passesAAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 7.0
    }
}

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

Ang klase na ContrastChecker sa JavaScript ay nagpapatupad ng kumpletong pagkalkula ng contrast ratio ayon sa WCAG 2.2: conversion ng sRGB sa linear space, pagkalkula ng relative luminance na may Rec.709 weights, at paghahambing sa AA/AAA thresholds. Ang tool ay kapaki-pakinabang para sa awtomatikong audit ng color palette kapag bumubuo ng mga web application na may suporta sa High Contrast.

Audit ng contrast gamit ang mga tool

Para sa pagsusuri ng contrast ratio sa tapos na application, gamitin ang Accessibility Scanner (Android), Xcode Accessibility Inspector (iOS), o axe DevTools (web). Awtomatikong hinahanap ng mga tool na ito ang mga elementong may contrast na mas mababa sa WCAG AA at ini-highlight ang mga ito. Ang High Contrast mode ay dapat na naka-activate sa panahon ng audit — ipapakita nito kung ang system contrast increase ay sapat upang maabot ang 7:1.

CSS prefers-contrast: pag-angkop ng mga web page sa system contrast

Ang CSS media function na prefers-contrast ay nagbibigay-daan sa mga web page na i-angkop ang mga estilo depende sa system contrast setting ng user. Ang function ay tumatanggap ng mga value: no-preference (default), more (naka-activate ng user ang High Contrast), less (mas gusto ng user ang mababang contrast), at custom (eksaktong setting). Suportado ng lahat ng modernong browser mula 2022.

prefers-contrast: more — signal para sa web developer: taasan ang contrast ratio ng text, palitan ang translucent na background ng opaque, palakasin ang mga hangganan ng interactive na elemento, at alisin ang mga background na imahe na may mababang contrast. Ang iOS Safari at Android Chrome ay nagpapadala ng value na more kapag naka-activate ang system High Contrast mode (Increase Contrast / High Contrast Text).

Halimbawa ng pag-angkop sa pamamagitan ng prefers-contrast

Sa prefers-contrast: more, dapat bawasan ng web page ang bilang ng mga kulay at unahin ang black-and-white palette na may accent na kulay para sa mga diin. Sa ibaba ay ibinigay ang halimbawa ng CSS adaptation na may pagpapalit ng mga kulay, pag-disable ng translucency, at pagtaas ng mga hangganan.

/* Base styles (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;
}

/* Mataas na contrast: 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; // Dati #666 — ngayon itim
    }

    .overlay {
        background: rgba(0, 0, 0, 0.8); // Dati 0.4 — pinalakas namin
    }
}

/* Mababang contrast: 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);
    }
}

Sa halimbawa ng CSS sa prefers-contrast: more, ang card ay nakakakuha ng opaque na puting background, itim na hangganan na 2px, ang text ay nagiging itim (#000 sa halip na #333), ang button — dark blue na may itim na outline para sa visibility. Sa prefers-contrast: less (bihirang kaso — mas gusto ng user ang malambot na kulay), ang contrast ay baligtad na binabawasan.

Pagsasama sa prefers-color-scheme

Para sa kumpletong accessibility adaptation, ang prefers-contrast ay pinagsama sa prefers-color-scheme (light/dark theme). Sa prefers-color-scheme: dark at prefers-contrast: more, ang mga kulay ay dapat puti sa itim na may matingkad na accent. Sa light theme — itim sa puti. Ang kombinasyon ng mga media function na ito ay nagbibigay ng 4 na kombinasyon na kailangang subukan para sa kumpletong accessibility coverage.