High Contrast trong Ứng dụng Di động — Khái niệm, Khả năng Tiếp cận và Cài đặt Tương phản

High Contrast trong khả năng tiếp cận là gì?

High Contrast là chế độ hiển thị trong đó hệ điều hành hoặc ứng dụng tăng sự khác biệt giữa màu tiền cảnh (văn bản, biểu tượng) và nền. Tỷ lệ tương phản tối thiểu cho văn bản thường theo tiêu chuẩn WCAG AA là 4.5:1 và cho văn bản lớn (từ 18pt hoặc 14pt đậm) — 3:1. Chế độ High Contrast có thể tăng tỷ lệ lên 7:1 và cao hơn, đảm bảo khả năng đọc tối đa.

Không giống như chỉ đơn giản làm tối nền hoặc làm sáng văn bản, High Contrast hoạt động toàn diện: nó thay thế bảng màu giao diện bằng một bộ màu tương phản cao hạn chế, thêm đường viền xung quanh các phần tử và loại bỏ độ trong suốt. Chế độ này được thiết kế cho những người có thị lực kém, chứng sợ ánh sáng và một số dạng mù màu.

Có ba loại High Contrast: cấp hệ thống (được bật trong hệ điều hành và ảnh hưởng đến tất cả ứng dụng), trong ứng dụng (chế độ tích hợp bên trong một ứng dụng cụ thể) và chế độ web (chức năng phương tiện CSS prefers-contrast). High Contrast cấp hệ thống mạnh nhất vì nó ghi đè màu sắc ngay cả trong các ứng dụng không có hỗ trợ trợ năng riêng.

Ai cần High Contrast?

Người dùng chính của High Contrast là những người bị đục thủy tinh thể (mờ thấu kính làm giảm độ nhạy tương phản), thoái hóa điểm vàng (mất thị lực trung tâm), tăng nhãn áp và bệnh võng mạc tiểu đường. Chế độ này cũng cần thiết khi làm việc dưới ánh nắng mặt trời gay gắt — độ tương phản cao bù đắp cho chói màn hình. Theo WebAIM (2025), 86% trang web có văn bản với độ tương phản dưới WCAG AA — High Contrast phía người dùng sửa một phần khiếm khuyết này.

Increase Contrast trên iOS: Cài đặt và Loại tương phản

Trên iOS, tính năng Increase Contrast nằm trong Settings > Accessibility > Display & Text Size và bao gồm ba công tắc độc lập: Increase Contrast (tăng cường chung), Darken Colors (làm tối màu sáng) và Reduce Transparency (giảm độ trong suốt). Increase Contrast là công tắc chính, ảnh hưởng đến văn bản, nút bấm và đường viền của các phần tử hệ thống.

Về mặt kỹ thuật, iOS triển khai Increase Contrast thông qua tintColor và lớp UIVisualEffectView. Khi được kích hoạt, hệ thống tăng giá trị alpha cho tông màu tối và giảm cho tông màu sáng, nâng tỷ lệ tương phản của tất cả phần tử UI lên 2–3 điểm. Reduce Transparency thay thế nền bán trong suốt (hiệu ứng kính mờ) bằng nền đục, giúp cải thiện khả năng đọc văn bản trên nền mờ.

Kiểm tra Increase Contrast trong ứng dụng iOS

Nhà phát triển có thể kiểm tra trạng thái của Increase Contrast thông qua UIAccessibility và điều chỉnh màu sắc cho phù hợp. Ví dụ: nếu độ tương phản được tăng lên, có thể sử dụng màu nhấn bão hòa hơn; nếu không, tỷ lệ tương phản cơ bản 4.5:1 phải được đảm bảo thông qua bảng màu mặc định. UIAccessibility.isReduceTransparencyEnabled cũng hữu ích để tắt hiệu ứng làm mờ khi chế độ đang hoạt động.

import UIKit

class ContrastManager {

    // Kiểm tra trạng thái Increase Contrast
    static var isIncreaseContrastEnabled: Bool {
        return UIAccessibility.isDarkerSystemColorsEnabled
    }

    // Kiểm tra Reduce Transparency
    static var isReduceTransparencyEnabled: Bool {
        return UIAccessibility.isReduceTransparencyEnabled
    }

    // Điều chỉnh màu cho chế độ tương phản
    static func adjustedAccentColor() -> UIColor {
        guard isIncreaseContrastEnabled else {
            return .systemBlue
        }
        // Xanh lam bão hòa hơn khi High Contrast hoạt động
        return UIColor(red: 0.0, green: 0.35, blue: 0.9, alpha: 1.0)
    }

    // Màu nền có tính đến Reduce Transparency
    static func backgroundColor() -> UIColor {
        if isReduceTransparencyEnabled {
            return .systemBackground // Nền đục
        }
        return UIColor.systemBackground.withAlphaComponent(0.85)
    }

    // Đăng ký thay đổi
    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
        )
    }
}

// Ví dụ sử dụng: 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)
        ]
    }
}

Lớp ContrastManager cung cấp quyền truy cập vào trạng thái Increase Contrast thông qua isDarkerSystemColorsEnabled, điều chỉnh màu nhấn khi chế độ hoạt động, tắt độ trong suốt của thanh điều hướng và đăng ký nhận thông báo hệ thống về thay đổi tương phản. UIKit tự động vẽ lại các phần tử khi trạng thái UIAccessibility thay đổi.

Màu động iOS (UIColor Well) và Tương phản

iOS cung cấp màu UIColor động (systemBackground, label, secondaryLabel) tự động thích ứng với chế độ Increase Contrast. Khi Increase Contrast được kích hoạt, màu hệ thống thay đổi giá trị: label tối hơn (hoặc sáng hơn trong chế độ tối), nền mất độ trong suốt. Các nhà phát triển nên sử dụng màu động cho tất cả phần tử UI để tránh xung đột với tương phản hệ thống.

High Contrast Text trên Android: Chủ đề tối và Tương phản

Trên Android, tính năng High Contrast Text hoạt động khác với iOS. Thay vì tăng dần tỷ lệ tương phản, Android áp dụng sơ đồ màu đảo ngược: nền tối và chữ trắng với độ đậm tăng lên. Chế độ này đặc biệt hiệu quả trên màn hình AMOLED, nơi màu đen mang lại độ tương phản tối đa. Cài đặt nằm trong Cài đặt > Trợ năng > Cải thiện khả năng hiển thị.

Android High Contrast Text sử dụng hai cơ chế: ghi đè bảng màu thông qua lớp phủ chủ đề và áp dụng ColorMatrix để tăng độ tương phản của hình ảnh bitmap. Hệ thống phân tích chủ đề ứng dụng hiện tại (Sáng/Tối) và áp dụng lớp phủ với độ tương phản tối đa: tiền cảnh trắng (#FFFFFF) trên nền đen (#000000). Các phần tử bán trong suốt nhận được nền đục.

Kiểm tra High Contrast Text qua Android API

Để kiểm tra trạng thái của High Contrast Text trên Android, hãy sử dụng AccessibilityManager và ContentResolver. API cho phép xác định chế độ có hoạt động hay không và điều chỉnh giao diện người dùng. Jetpack Compose hỗ trợ thích ứng thông qua CompositionLocalProvider và 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 {

    // Kiểm tra qua 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" }
    }

    // Kiểm tra qua cài đặt toàn cục
    fun isHighContrastFromSettings(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "high_text_contrast_enabled"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — màu sắc có tính đến tương phản
    @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
        }
    }
}

// Hệ thống View: bộ chọn màu động
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)
        }
    }
}

Lớp HighContrastHelper kiểm tra xem High Contrast có hoạt động không thông qua AccessibilityManager và cài đặt hệ thống, điều chỉnh màu sắc trong Jetpack Compose và cung cấp ContrastTextView tùy chỉnh cho hệ thống View. Trên Android, không giống như iOS, không có thông báo trực tiếp cho các thay đổi High Contrast — ContentObserver trên Settings.System là bắt buộc để cập nhật động.

Material Design 3 và High Contrast

Material Design 3 (Material You) bao gồm hỗ trợ High Contrast tích hợp thông qua Dynamic Color. Khi chế độ hệ thống hoạt động, Material 3 tự động chọn bảng màu tông tối đa: background = Neutral0, onBackground = Neutral100, primary = Primary100. Nhà phát triển chỉ cần sử dụng các thành phần MD3 — hệ thống sẽ tự động xử lý việc thích ứng tương phản.

Tỷ lệ tương phản WCAG: Tiêu chuẩn 4.5:1 và 3:1

Tỷ lệ tương phản WCAG là tỷ lệ toán học của độ chói giữa hai màu, được sử dụng để đánh giá khả năng tiếp cận văn bản. Tiêu chuẩn xác định hai ngưỡng: 4.5:1 cho văn bản thường (cấp AA) và 3:1 cho văn bản lớn (từ 18px/14px đậm). Đối với cấp AAA, yêu cầu 7:1 cho văn bản thường và 4.5:1 cho văn bản lớn. Chế độ High Contrast lý tưởng nên cung cấp 7:1 và cao hơn.

Việc tính toán tỷ lệ tương phản được thực hiện bằng công thức: (L1 + 0.05) / (L2 + 0.05), trong đó L1 là độ chói tương đối của màu sáng hơn và L2 là độ chói tương đối của màu tối hơn. Độ chói tương đối được tính từ các kênh sRGB với trọng số: 0.2126R + 0.7152G + 0.0722B. Đối với nhà phát triển trợ năng, chỉ cần sử dụng các công cụ như WebAIM Contrast Checker, Color Contrast Analyser hoặc Accessibility Inspector trong Xcode.

Bảng ngưỡng tương phản WCAG 2.2

Kiểm tra tương phản trong mã

Để tự động kiểm tra tỷ lệ tương phản trong ứng dụng web, có thể sử dụng JavaScript. Khi chế độ High Contrast hoạt động, nên làm nổi bật các phần tử không đáp ứng tiêu chuẩn AA. Dưới đây là ví dụ về tính toán độ chói tương đối và tỷ lệ tương phản trong JavaScript.

// Tính tỷ lệ tương phản theo WCAG 2.2
class ContrastChecker {

    // Chuyển đổi sRGB sang không gian tuyến tính
    linearize(channel) {
        const s = channel / 255
        return s <= 0.04045
            ? s / 12.92
            : Math.pow((s + 0.055) / 1.055, 2.4)
    }

    // Độ chói tương đối
    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
    }

    // Tỷ lệ tương phản giữa hai màu
    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
    }

    // Kiểm tra cấp AA (4.5:1)
    passesAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 4.5
    }

    // Kiểm tra cấp AAA (7:1)
    passesAAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 7.0
    }
}

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

Lớp ContrastChecker trong JavaScript triển khai tính toán tỷ lệ tương phản đầy đủ theo WCAG 2.2: chuyển đổi sRGB sang không gian tuyến tính, tính độ chói tương đối với trọng số Rec.709 và so sánh với ngưỡng AA/AAA. Công cụ này hữu ích cho việc kiểm tra bảng màu tự động khi phát triển ứng dụng web hỗ trợ High Contrast.

Công cụ kiểm tra tương phản

Để kiểm tra tỷ lệ tương phản trong ứng dụng hoàn chỉnh, hãy sử dụng Accessibility Scanner (Android), Xcode Accessibility Inspector (iOS) hoặc axe DevTools (web). Các công cụ này tự động tìm các phần tử có độ tương phản dưới WCAG AA và làm nổi bật chúng. Chế độ High Contrast nên được bật trong quá trình kiểm tra — điều này sẽ cho thấy liệu tăng cường tương phản hệ thống có đủ để đạt 7:1 hay không.

CSS prefers-contrast: Điều chỉnh trang web theo tương phản hệ thống

Chức năng phương tiện CSS prefers-contrast cho phép các trang web điều chỉnh kiểu dựa trên cài đặt tương phản hệ thống của người dùng. Chức năng chấp nhận các giá trị: no-preference (mặc định), more (người dùng đã bật High Contrast), less (người dùng thích tương phản thấp) và custom (tinh chỉnh). Được hỗ trợ bởi tất cả trình duyệt hiện đại từ năm 2022.

prefers-contrast: more — tín hiệu cho nhà phát triển web: tăng tỷ lệ tương phản văn bản, thay thế nền bán trong suốt bằng nền đục, tăng cường đường viền phần tử tương tác và loại bỏ hình nền có độ tương phản thấp. iOS Safari và Android Chrome truyền giá trị more khi chế độ High Contrast hệ thống (Increase Contrast / High Contrast Text) được bật.

Ví dụ thích ứng với prefers-contrast

Khi prefers-contrast: more hoạt động, trang web nên giảm thiểu số lượng màu sắc và ưu tiên bảng màu đen trắng với các màu nhấn để làm nổi bật. Dưới đây là ví dụ về thích ứng CSS với thay thế màu sắc, loại bỏ độ trong suốt và tăng cường đường viền.

/* Kiểu cơ bản (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;
}

/* Tương phản cao: 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; // Trước #666 — giờ đen
    }

    .overlay {
        background: rgba(0, 0, 0, 0.8); // Trước 0.4 — đã tăng
    }
}

/* Tương phản thấp: 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);
    }
}

Trong ví dụ CSS với prefers-contrast: more, thẻ có nền trắng đục, đường viền đen 2px, văn bản trở thành màu đen (#000 thay vì #333) và nút trở thành màu xanh đậm với đường viền đen để dễ nhìn. Với prefers-contrast: less (trường hợp hiếm — người dùng thích màu sắc nhẹ nhàng), tương phản được giảm thay vào đó.

Kết hợp với prefers-color-scheme

Để thích ứng trợ năng đầy đủ, prefers-contrast được kết hợp với prefers-color-scheme (chủ đề sáng/tối). Khi prefers-color-scheme: dark và prefers-contrast: more đều hoạt động, màu sắc nên là trắng trên đen với các điểm nhấn sáng. Trong chế độ sáng — đen trên trắng. Sự kết hợp của các chức năng phương tiện này tạo ra 4 tổ hợp cần được kiểm tra để có vùng phủ trợ năng đầy đủ.