High Contrast di aplikasi seluler — apa itu, aksesibilitas, dan pengaturan kontras

Apa itu High Contrast dalam aksesibilitas?

High Contrast adalah mode tampilan di mana sistem operasi atau aplikasi meningkatkan perbedaan antara warna latar depan (teks, ikon) dan latar belakang. Rasio kontras minimum untuk teks biasa menurut standar WCAG AA adalah 4,5:1, untuk teks besar (dari 18pt atau 14pt bold) — 3:1. Mode High Contrast dapat meningkatkan rasio hingga 7:1 dan lebih, memberikan keterbacaan maksimal.

Tidak seperti penggelapan latar sederhana atau pencerahan teks, High Contrast bekerja secara komprehensif: mengganti palet warna antarmuka dengan serangkaian warna kontras tinggi terbatas, menambahkan garis tepi di sekitar elemen, dan menghilangkan tembus pandang. Mode ini ditujukan untuk orang dengan ketajaman penglihatan berkurang, fotofobia, dan beberapa bentuk buta warna.

Ada tiga jenis High Contrast: sistem (diaktifkan di OS dan memengaruhi semua aplikasi), aplikasi (mode bawaan dalam aplikasi tertentu), dan web (fungsi media CSS prefers-contrast). High Contrast sistem adalah yang terkuat karena menimpa warna bahkan di aplikasi yang tidak memiliki dukungan aksesibilitas sendiri.

Siapa yang membutuhkan High Contrast

Pengguna utama High Contrast — orang dengan katarak (kekeruhan lensa yang mengurangi sensitivitas kontras), degenerasi makula (kehilangan penglihatan sentral), glaukoma, dan retinopati diabetik. Mode ini juga diperlukan saat bekerja di bawah sinar matahari terang — kontras tinggi mengkompensasi silau di layar. Menurut WebAIM (2025), 86% halaman web memiliki teks dengan kontras di bawah WCAG AA — High Contrast di sisi pengguna sebagian memperbaiki cacat ini.

Increase Contrast di iOS: pengaturan dan jenis kontras

Di iOS, fungsi Increase Contrast terdapat di Settings > Accessibility > Display & Text Size dan mencakup tiga sakelar independen: Increase Contrast (peningkatan umum), Darken Colors (penggelapan warna cerah), dan Reduce Transparency (pengurangan transparansi). Increase Contrast adalah sakelar utama yang memengaruhi teks, tombol, dan batas elemen sistem.

Secara teknis, iOS mengimplementasikan Increase Contrast melalui tintColor dan lapisan UIVisualEffectView. Saat diaktifkan, sistem meningkatkan nilai alpha untuk nada gelap dan menguranginya untuk nada terang, menaikkan rasio kontras semua elemen UI sebesar 2–3 poin. Reduce Transparency mengganti latar tembus pandang (efek kaca buram) dengan latar tidak tembus pandang, yang selanjutnya meningkatkan keterbacaan teks pada latar buram.

Memeriksa Increase Contrast di aplikasi iOS

Pengembang dapat memeriksa status Increase Contrast melalui UIAccessibility dan menyesuaikan warna. Misalnya, jika kontras ditingkatkan, dapat menggunakan warna aksen yang lebih jenuh, dan jika tidak — memastikan rasio kontras dasar 4,5:1 melalui palet default. UIAccessibility.isReduceTransparencyEnabled juga berguna untuk menonaktifkan efek blur saat mode aktif.

import UIKit

class ContrastManager {

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

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

    // Menyesuaikan warna dengan mode kontras
    static func adjustedAccentColor() -> UIColor {
        guard isIncreaseContrastEnabled else {
            return .systemBlue
        }
        // Biru lebih jenuh saat High Contrast aktif
        return UIColor(red: 0.0, green: 0.35, blue: 0.9, alpha: 1.0)
    }

    // Warna latar dengan mempertimbangkan Reduce Transparency
    static func backgroundColor() -> UIColor {
        if isReduceTransparencyEnabled {
            return .systemBackground // Latar tidak tembus pandang
        }
        return UIColor.systemBackground.withAlphaComponent(0.85)
    }

    // Berlangganan perubahan
    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
        )
    }
}

// Contoh penggunaan: 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)
        ]
    }
}

Kelas ContrastManager menyediakan akses ke status Increase Contrast melalui isDarkerSystemColorsEnabled, menyesuaikan warna aksen saat mode aktif, menonaktifkan tembus pandang navigationBar, dan berlangganan pemberitahuan sistem tentang perubahan kontras. UIKit secara otomatis menggambar ulang elemen saat status UIAccessibility berubah.

Warna dinamis iOS (UIColor Well) dan kontras

iOS menyediakan warna dinamis UIColor (systemBackground, label, secondaryLabel) yang secara otomatis menyesuaikan dengan mode Increase Contrast. Saat Increase Contrast diaktifkan, warna sistem mengubah nilainya: label menjadi lebih gelap (atau lebih terang dalam tema gelap), background kehilangan tembus pandangnya. Pengembang disarankan menggunakan warna dinamis untuk semua elemen UI untuk menghindari konflik dengan kontras sistem.

High Contrast Text di Android: tema gelap dan kontras

Di Android, fungsi High Contrast Text (Teks kontras tinggi) bekerja berbeda dari iOS. Alih-alih peningkatan bertahap rasio kontras, Android menerapkan skema warna terbalik: latar gelap dan teks putih dengan ketebalan yang ditingkatkan. Mode ini sangat efektif pada layar AMOLED, di mana warna hitam memberikan kontras maksimal. Pengaturan terdapat di Pengaturan > Aksesibilitas > Peningkatan visibilitas.

Android High Contrast Text menggunakan dua mekanisme: penimpaan palet warna melalui theme overlay dan penerapan ColorMatrix untuk meningkatkan kontras gambar bitmap. Sistem menganalisis tema aplikasi saat ini (Light/Dark) dan menerapkan overlay dengan kontras maksimal: latar depan putih (#FFFFFF) pada latar belakang hitam (#000000). Elemen tembus pandang mendapatkan latar tidak tembus pandang.

Memeriksa High Contrast Text melalui Android API

Untuk memeriksa status High Contrast Text di Android, digunakan AccessibilityManager dan ContentResolver. API memungkinkan menentukan apakah mode aktif dan menyesuaikan UI. Jetpack Compose mendukung penyesuaian melalui CompositionLocalProvider dan 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 {

    // Memeriksa melalui 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" }
    }

    // Memeriksa melalui pengaturan 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 — warna dengan mempertimbangkan kontras
    @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
        }
    }
}

// Sistem View: pemilih warna dinamis
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)
        }
    }
}

Kelas HighContrastHelper memeriksa aktivitas High Contrast melalui AccessibilityManager dan pengaturan sistem, menyesuaikan warna di Jetpack Compose, dan menyediakan ContrastTextView kustom untuk sistem View. Di Android, tidak seperti iOS, tidak ada pemberitahuan langsung untuk perubahan High Contrast — ContentObserver pada Settings.System wajib untuk pembaruan dinamis.

Material Design 3 dan High Contrast

Material Design 3 (Material You) menyertakan dukungan bawaan untuk High Contrast melalui Dynamic Color. Saat mode sistem aktif, Material 3 secara otomatis memilih palet tonal maksimal: background = Neutral0, onBackground = Neutral100, primary = Primary100. Pengembang cukup menggunakan komponen MD3 — sistem akan menangani penyesuaian kontras.

WCAG contrast ratio: standar 4,5:1 dan 3:1

WCAG contrast ratio — rasio matematis kecerahan antara dua warna yang digunakan untuk menilai aksesibilitas teks. Standar menentukan dua ambang batas: 4,5:1 untuk teks biasa (tingkat AA) dan 3:1 untuk teks besar (dari 18px/14px bold). Untuk tingkat AAA, diperlukan 7:1 untuk teks biasa dan 4,5:1 untuk teks besar. Mode High Contrast idealnya harus menyediakan 7:1 dan lebih.

Perhitungan contrast ratio dilakukan dengan rumus: (L1 + 0,05) / (L2 + 0,05), di mana L1 — kecerahan relatif warna lebih terang, L2 — lebih gelap. Kecerahan relatif dihitung dari saluran sRGB dengan bobot: 0,2126R + 0,7152G + 0,0722B. Untuk pengembang aksesibilitas, cukup menggunakan alat: WebAIM Contrast Checker, Color Contrast Analyser, atau Accessibility Inspector di Xcode.

Tabel ambang kontras WCAG 2.2

Memeriksa kontras dalam kode

Untuk pemeriksaan otomatis contrast ratio di aplikasi web, dapat menggunakan JavaScript. Saat mode High Contrast aktif, sebaiknya menyorot elemen yang tidak memenuhi standar AA. Di bawah ini diberikan contoh perhitungan kecerahan relatif dan contrast ratio dalam JavaScript.

// Perhitungan contrast ratio menurut WCAG 2.2
class ContrastChecker {

    // Konversi sRGB ke ruang linear
    linearize(channel) {
        const s = channel / 255
        return s <= 0.04045
            ? s / 12.92
            : Math.pow((s + 0.055) / 1.055, 2.4)
    }

    // Kecerahan relatif (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 antara dua warna
    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
    }

    // Memeriksa tingkat AA (4,5:1)
    passesAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 4.5
    }

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

// Penggunaan
const checker = new ContrastChecker()
console.log(checker.getContrastRatio("#333333", "#FFFFFF"))
// → 13,2:1 (AAA)
console.log(checker.passesAA("#999999", "#FFFFFF"))
// → false (2,8:1)

Kelas ContrastChecker dalam JavaScript mengimplementasikan perhitungan lengkap contrast ratio menurut WCAG 2.2: konversi sRGB ke ruang linear, perhitungan kecerahan relatif dengan bobot Rec.709, dan perbandingan dengan ambang AA/AAA. Alat ini berguna untuk audit otomatis palet warna saat mengembangkan aplikasi web dengan dukungan High Contrast.

Audit kontras dengan alat

Untuk memeriksa contrast ratio di aplikasi jadi, gunakan Accessibility Scanner (Android), Xcode Accessibility Inspector (iOS), atau axe DevTools (web). Alat-alat ini secara otomatis menemukan elemen dengan kontras di bawah WCAG AA dan menyorotnya. Mode High Contrast harus diaktifkan selama audit — ini akan menunjukkan apakah peningkatan kontras sistem cukup untuk mencapai 7:1.

CSS prefers-contrast: menyesuaikan halaman web dengan kontras sistem

Fungsi media CSS prefers-contrast memungkinkan halaman web menyesuaikan gaya tergantung pada pengaturan kontras sistem pengguna. Fungsi menerima nilai: no-preference (default), more (pengguna mengaktifkan High Contrast), less (pengguna lebih suka kontras rendah), dan custom (pengaturan tepat). Didukung oleh semua browser modern sejak 2022.

prefers-contrast: more — sinyal untuk pengembang web: tingkatkan rasio kontras teks, ganti latar tembus pandang dengan tidak tembus pandang, perkuat batas elemen interaktif, dan hapus gambar latar dengan kontras rendah. iOS Safari dan Android Chrome mengirimkan nilai more saat mode High Contrast sistem diaktifkan (Increase Contrast / High Contrast Text).

Contoh penyesuaian melalui prefers-contrast

Saat prefers-contrast: more, halaman web harus meminimalkan jumlah warna dan mengutamakan palet hitam-putih dengan warna aksen untuk penekanan. Di bawah ini diberikan contoh penyesuaian CSS dengan penggantian warna, penonaktifan tembus pandang, dan peningkatan batas.

/* Gaya dasar (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;
}

/* Kontras tinggi: 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; // Dulu #666 — sekarang hitam
    }

    .overlay {
        background: rgba(0, 0, 0, 0.8); // Dulu 0,4 — kami perkuat
    }
}

/* Kontras rendah: 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);
    }
}

Dalam contoh CSS saat prefers-contrast: more, kartu mendapatkan latar putih tidak tembus pandang, batas hitam 2px, teks menjadi hitam (#000 bukan #333), tombol — biru gelap dengan garis tepi hitam untuk visibilitas. Saat prefers-contrast: less (kasus jarang — pengguna lebih suka warna lembut), kontras sebaliknya dikurangi.

Menggabungkan dengan prefers-color-scheme

Untuk penyesuaian aksesibilitas penuh, prefers-contrast digabungkan dengan prefers-color-scheme (tema terang/gelap). Saat prefers-color-scheme: dark dan prefers-contrast: more, warna harus putih di atas hitam dengan aksen cerah. Saat tema terang — hitam di atas putih. Kombinasi fungsi media ini menghasilkan 4 kombinasi yang perlu diuji untuk cakupan aksesibilitas penuh.