High Contrast ในแอปพลิเคชันมือถือ — คืออะไร การเข้าถึง และการตั้งค่าคอนทราสต์

High Contrast ในการเข้าถึงคืออะไร?

High Contrast คือโหมดการแสดงผลที่ระบบปฏิบัติการหรือแอปพลิเคชันเพิ่มความแตกต่างระหว่างสีพื้นหน้า (ข้อความ ไอคอน) และพื้นหลัง อัตราส่วนคอนทราสต์ขั้นต่ำสำหรับข้อความปกติตามมาตรฐาน WCAG AA คือ 4.5:1 และสำหรับข้อความขนาดใหญ่ (จาก 18pt หรือ 14pt ตัวหนา) — 3:1 โหมด High Contrast สามารถเพิ่มอัตราส่วนเป็น 7:1 ขึ้นไป ทำให้มั่นใจได้ถึงความสามารถในการอ่านสูงสุด

แตกต่างจากการทำให้พื้นหลังมืดลงหรือทำให้ข้อความสว่างขึ้น High Contrast ทำงานอย่างครอบคลุม: มันแทนที่จานสีอินเทอร์เฟซด้วยชุดสีคอนทราสต์สูงที่จำกัด เพิ่มเส้นขอบรอบองค์ประกอบ และลบความโปร่งใส โหมดนี้ออกแบบมาสำหรับผู้ที่มีความคมชัดในการมองเห็นลดลง กลัวแสง และตาบอดสีบางรูปแบบ

มี สามประเภท ของ High Contrast: ระดับระบบ (เปิดใช้งานใน OS และส่งผลต่อแอปพลิเคชันทั้งหมด) ภายในแอป (โหมดในตัวภายในแอปพลิเคชันเฉพาะ) และโหมดเว็บ (ฟีเจอร์สื่อ CSS prefers-contrast) High Contrast ระดับระบบมีประสิทธิภาพมากที่สุด เนื่องจากมันแทนที่สีแม้ในแอปพลิเคชันที่ไม่มีการสนับสนุนการเข้าถึงของตัวเอง

ใครต้องการ High Contrast

ผู้ใช้หลักของ High Contrast คือผู้ที่มีต้อกระจก (ความขุ่นของเลนส์ที่ลดความไวต่อคอนทราสต์) จอประสาทตาเสื่อม (สูญเสียการมองเห็นส่วนกลาง) ต้อหิน และจอประสาทตาเสื่อมจากเบาหวาน โหมดนี้ยังจำเป็นเมื่อทำงานในแสงแดดจ้า — คอนทราสต์สูงชดเชยแสงสะท้อนบนหน้าจอ ตามข้อมูลของ WebAIM (2025) 86% ของหน้าเว็บมีข้อความที่มีคอนทราสต์ต่ำกว่า WCAG AA — High Contrast ฝั่งผู้ใช้แก้ไขข้อบกพร่องนี้บางส่วน

Increase Contrast ใน iOS: การตั้งค่าและประเภทคอนทราสต์

ใน iOS ฟีเจอร์ Increase Contrast อยู่ใน Settings > Accessibility > Display & Text Size และรวมสวิตช์อิสระสามตัว: Increase Contrast (การเพิ่มทั่วไป), Darken Colors (ทำให้สีสว่างมืดลง) และ Reduce Transparency (ลดความโปร่งใส) Increase Contrast คือสวิตช์หลักที่ส่งผลต่อข้อความ ปุ่ม และขอบขององค์ประกอบระบบ

ในทางเทคนิค iOS ใช้ Increase Contrast ผ่าน tintColor และเลเยอร์ UIVisualEffectView เมื่อเปิดใช้งาน ระบบจะเพิ่มค่า alpha สำหรับโทนสีเข้มและลดสำหรับโทนสีสว่าง เพิ่มอัตราส่วนคอนทราสต์ขององค์ประกอบ UI ทั้งหมดขึ้น 2–3 จุด Reduce Transparency แทนที่พื้นหลังโปร่งแสง (เอฟเฟกต์กระจกฝ้า) ด้วยพื้นหลังทึบแสง ซึ่งช่วยเพิ่มความสามารถในการอ่านข้อความบนพื้นหลังที่เบลอ

การตรวจสอบ Increase Contrast ในแอป iOS

นักพัฒนาสามารถตรวจสอบสถานะของ Increase Contrast ผ่าน UIAccessibility และปรับสีตามนั้น ตัวอย่างเช่น หากคอนทราสต์เพิ่มขึ้น สามารถใช้สีเน้นที่อิ่มตัวมากขึ้นได้ หากไม่ ควรตรวจสอบอัตราส่วนคอนทราสต์พื้นฐาน 4.5:1 ผ่านจานสีเริ่มต้น UIAccessibility.isReduceTransparencyEnabled ยังมีประโยชน์สำหรับการปิดเอฟเฟกต์เบลอเมื่อโหมดทำงานอยู่

import UIKit

class ContrastManager {

    // ตรวจสอบสถานะ Increase Contrast
    static var isIncreaseContrastEnabled: Bool {
        return UIAccessibility.isDarkerSystemColorsEnabled
    }

    // ตรวจสอบ Reduce Transparency
    static var isReduceTransparencyEnabled: Bool {
        return UIAccessibility.isReduceTransparencyEnabled
    }

    // ปรับสีให้เข้ากับโหมดคอนทราสต์
    static func adjustedAccentColor() -> UIColor {
        guard isIncreaseContrastEnabled else {
            return .systemBlue
        }
        // สีน้ำเงินอิ่มตัวมากขึ้นเมื่อเปิดใช้งาน High Contrast
        return UIColor(red: 0.0, green: 0.35, blue: 0.9, alpha: 1.0)
    }

    // สีพื้นหลังโดยคำนึงถึง Reduce Transparency
    static func backgroundColor() -> UIColor {
        if isReduceTransparencyEnabled {
            return .systemBackground // พื้นหลังทึบแสง
        }
        return UIColor.systemBackground.withAlphaComponent(0.85)
    }

    // สมัครรับการเปลี่ยนแปลง
    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
        )
    }
}

// ตัวอย่างการใช้งาน: 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)
        ]
    }
}

คลาส ContrastManager ให้การเข้าถึงสถานะ Increase Contrast ผ่าน isDarkerSystemColorsEnabled ปรับสีเน้นเมื่อโหมดทำงาน ปิดความโปร่งใสของแถบนำทาง และสมัครรับการแจ้งเตือนระบบเกี่ยวกับการเปลี่ยนแปลงคอนทราสต์ UIKit จะวาดองค์ประกอบใหม่โดยอัตโนมัติเมื่อสถานะ UIAccessibility เปลี่ยนแปลง

สีไดนามิกของ iOS (UIColor Well) และคอนทราสต์

iOS มีสี UIColor แบบไดนามิก (systemBackground, label, secondaryLabel) ที่ปรับให้เข้ากับโหมด Increase Contrast โดยอัตโนมัติ เมื่อเปิดใช้งาน Increase Contrast สีระบบจะเปลี่ยนค่า: label จะเข้มขึ้น (หรือสว่างขึ้นในโหมดมืด) พื้นหลังสูญเสียความโปร่งใส นักพัฒนาควรใช้สีไดนามิกสำหรับองค์ประกอบ UI ทั้งหมดเพื่อหลีกเลี่ยงความขัดแย้งกับคอนทราสต์ของระบบ

High Contrast Text ใน Android: ธีมมืดและคอนทราสต์

ใน Android ฟีเจอร์ High Contrast Text ทำงานแตกต่างจาก iOS แทนที่จะเพิ่มอัตราส่วนคอนทราสต์อย่างนุ่มนวล Android ใช้โครงร่างสีแบบกลับด้าน: พื้นหลังสีเข้มและข้อความสีขาวพร้อมความหนาที่เพิ่มขึ้น โหมดนี้มีประสิทธิภาพโดยเฉพาะบนจอแสดงผล AMOLED ซึ่งสีดำให้คอนทราสต์สูงสุด การตั้งค่าอยู่ใน การตั้งค่า > การเข้าถึง > การปรับปรุงการมองเห็น

Android High Contrast Text ใช้สองกลไก: การแทนที่จานสีผ่านการซ้อนทับธีมและการใช้ ColorMatrix เพื่อเพิ่มคอนทราสต์ของภาพบิตแมป ระบบวิเคราะห์ธีมแอปพลิเคชันปัจจุบัน (สว่าง/มืด) และใช้การซ้อนทับด้วยคอนทราสต์สูงสุด: พื้นหน้าสีขาว (#FFFFFF) บนพื้นหลังสีดำ (#000000) องค์ประกอบโปร่งแสงได้รับพื้นหลังทึบแสง

การตรวจสอบ High Contrast Text ผ่าน Android API

ในการตรวจสอบสถานะของ High Contrast Text ใน Android ให้ใช้ AccessibilityManager และ ContentResolver API ช่วยให้ระบุได้ว่าโหมดทำงานอยู่หรือไม่และปรับอินเทอร์เฟซผู้ใช้ Jetpack Compose รองรับการปรับผ่าน CompositionLocalProvider และ 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 {

    // ตรวจสอบผ่าน 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" }
    }

    // ตรวจสอบผ่านการตั้งค่าทั่วโลก
    fun isHighContrastFromSettings(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "high_text_contrast_enabled"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — สีโดยคำนึงถึงคอนทราสต์
    @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: ตัวเลือกสีแบบไดนามิก
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)
        }
    }
}

คลาส HighContrastHelper ตรวจสอบว่า High Contrast ทำงานอยู่หรือไม่ผ่าน AccessibilityManager และการตั้งค่าระบบ ปรับสีใน Jetpack Compose และให้ ContrastTextView แบบกำหนดเองสำหรับระบบ View ใน Android แตกต่างจาก iOS ไม่มีการแจ้งเตือนโดยตรงสำหรับการเปลี่ยนแปลง High Contrast — จำเป็นต้องใช้ ContentObserver บน Settings.System สำหรับการอัปเดตแบบไดนามิก

Material Design 3 และ High Contrast

Material Design 3 (Material You) รวมการสนับสนุน High Contrast ในตัวผ่าน Dynamic Color เมื่อโหมดระบบทำงาน Material 3 จะเลือกจานสีโทนสูงสุดโดยอัตโนมัติ: background = Neutral0, onBackground = Neutral100, primary = Primary100 นักพัฒนาเพียงแค่ใช้ส่วนประกอบ MD3 — ระบบจะจัดการการปรับคอนทราสต์โดยอัตโนมัติ

อัตราส่วนคอนทราสต์ WCAG: มาตรฐาน 4.5:1 และ 3:1

อัตราส่วนคอนทราสต์ WCAG คืออัตราส่วนทางคณิตศาสตร์ของความสว่างระหว่างสองสี ใช้เพื่อประเมินการเข้าถึงข้อความ มาตรฐานกำหนดเกณฑ์สองระดับ: 4.5:1 สำหรับข้อความปกติ (ระดับ AA) และ 3:1 สำหรับข้อความขนาดใหญ่ (จาก 18px/14px ตัวหนา) สำหรับระดับ AAA ต้องการ 7:1 สำหรับข้อความปกติและ 4.5:1 สำหรับข้อความขนาดใหญ่ โหมด High Contrast ควรให้ 7:1 ขึ้นไปอย่างเหมาะสม

การคำนวณ อัตราส่วนคอนทราสต์ ดำเนินการโดยใช้สูตร: (L1 + 0.05) / (L2 + 0.05) โดยที่ L1 คือความสว่างสัมพัทธ์ของสีที่สว่างกว่า และ L2 คือความสว่างสัมพัทธ์ของสีที่เข้มกว่า ความสว่างสัมพัทธ์คำนวณจากช่องสัญญาณ sRGB ด้วยน้ำหนัก: 0.2126R + 0.7152G + 0.0722B สำหรับนักพัฒนาการเข้าถึง การใช้เครื่องมือเช่น WebAIM Contrast Checker, Color Contrast Analyser หรือ Accessibility Inspector ใน Xcode ก็เพียงพอแล้ว

ตารางเกณฑ์คอนทราสต์ WCAG 2.2

การตรวจสอบคอนทราสต์ในโค้ด

สำหรับการตรวจสอบ อัตราส่วนคอนทราสต์ อัตโนมัติในแอปพลิเคชันเว็บ สามารถใช้ JavaScript ได้ เมื่อโหมด High Contrast ทำงาน ควรเน้นองค์ประกอบที่ไม่เป็นไปตามมาตรฐาน AA ด้านล่างนี้คือตัวอย่างการคำนวณความสว่างสัมพัทธ์และอัตราส่วนคอนทราสต์ใน JavaScript

// การคำนวณอัตราส่วนคอนทราสต์ตาม WCAG 2.2
class ContrastChecker {

    // การแปลง sRGB เป็นพื้นที่เชิงเส้น
    linearize(channel) {
        const s = channel / 255
        return s <= 0.04045
            ? s / 12.92
            : Math.pow((s + 0.055) / 1.055, 2.4)
    }

    // ความสว่างสัมพัทธ์
    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
    }

    // อัตราส่วนคอนทราสต์ระหว่างสองสี
    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
    }

    // ตรวจสอบระดับ AA (4.5:1)
    passesAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 4.5
    }

    // ตรวจสอบระดับ AAA (7:1)
    passesAAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 7.0
    }
}

// การใช้งาน
const checker = new ContrastChecker()
console.log(checker.getContrastRatio("#333333", "#FFFFFF"))
// → 13.2:1 (AAA)
console.log(checker.passesAA("#999999", "#FFFFFF"))
// → false (2.8:1)

คลาส ContrastChecker ใน JavaScript ใช้การคำนวณอัตราส่วนคอนทราสต์ที่สมบูรณ์ตาม WCAG 2.2: การแปลง sRGB เป็นพื้นที่เชิงเส้น การคำนวณความสว่างสัมพัทธ์ด้วยน้ำหนัก Rec.709 และการเปรียบเทียบกับเกณฑ์ AA/AAA เครื่องมือนี้มีประโยชน์สำหรับการตรวจสอบจานสีอัตโนมัติเมื่อพัฒนาแอปพลิเคชันเว็บที่รองรับ High Contrast

เครื่องมือตรวจสอบคอนทราสต์

ในการตรวจสอบ อัตราส่วนคอนทราสต์ ในแอปพลิเคชันที่เสร็จสมบูรณ์ ให้ใช้ Accessibility Scanner (Android), Xcode Accessibility Inspector (iOS) หรือ axe DevTools (เว็บ) เครื่องมือเหล่านี้ค้นหาองค์ประกอบที่มีคอนทราสต์ต่ำกว่า WCAG AA โดยอัตโนมัติและเน้นให้เห็น ควรเปิดโหมด High Contrast ระหว่างการตรวจสอบ — ซึ่งจะแสดงว่าการเพิ่มคอนทราสต์ของระบบเพียงพอที่จะถึง 7:1 หรือไม่

CSS prefers-contrast: การปรับหน้าเว็บให้เข้ากับคอนทราสต์ของระบบ

ฟีเจอร์สื่อ CSS prefers-contrast ช่วยให้หน้าเว็บปรับสไตล์ตามการตั้งค่าคอนทราสต์ของระบบผู้ใช้ ฟีเจอร์รับค่า: no-preference (ค่าเริ่มต้น), more (ผู้ใช้เปิดใช้งาน High Contrast), less (ผู้ใช้ต้องการคอนทราสต์ต่ำ) และ custom (การปรับแต่งละเอียด) รองรับโดยเบราว์เซอร์สมัยใหม่ทั้งหมดตั้งแต่ปี 2022

prefers-contrast: more — สัญญาณสำหรับนักพัฒนาเว็บ: เพิ่มอัตราส่วนคอนทราสต์ข้อความ แทนที่พื้นหลังโปร่งแสงด้วยทึบแสง เสริมขอบองค์ประกอบแบบโต้ตอบ และลบภาพพื้นหลังที่มีคอนทราสต์ต่ำ iOS Safari และ Android Chrome ส่งค่า more เมื่อเปิดใช้งานโหมด High Contrast ของระบบ (Increase Contrast / High Contrast Text)

ตัวอย่างการปรับด้วย prefers-contrast

เมื่อ prefers-contrast: more ทำงาน หน้าเว็บควรลดจำนวนสีและเลือกใช้จานสีขาวดำกับสีเน้นสำหรับการเน้น ด้านล่างนี้คือตัวอย่างการปรับ CSS ด้วยการแทนที่สี การลบความโปร่งใส และการเสริมขอบ

/* สไตล์พื้นฐาน (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;
}

/* คอนทราสต์สูง: 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; // เคยเป็น #666 — ตอนนี้ดำ
    }

    .overlay {
        background: rgba(0, 0, 0, 0.8); // เคยเป็น 0.4 — เพิ่มแล้ว
    }
}

/* คอนทราสต์ต่ำ: 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);
    }
}

ในตัวอย่าง CSS ภายใต้ prefers-contrast: more การ์ดจะได้รับพื้นหลังสีขาวทึบ ขอบดำ 2px ข้อความกลายเป็นสีดำ (#000 แทน #333) และปุ่มกลายเป็นสีน้ำเงินเข้มพร้อมเส้นขอบดำเพื่อการมองเห็น ภายใต้ prefers-contrast: less (กรณีที่หายาก — ผู้ใช้ต้องการสีอ่อน) คอนทราสต์จะลดลงแทน

การรวมกับ prefers-color-scheme

สำหรับการปรับการเข้าถึงอย่างสมบูรณ์ prefers-contrast จะรวมกับ prefers-color-scheme (ธีมสว่าง/มืด) เมื่อ prefers-color-scheme: dark และ prefers-contrast: more ทำงานทั้งคู่ สีควรเป็นสีขาวบนดำด้วยสีเน้นสดใส ในโหมดสว่าง — ดำบนขาว การรวมกันของฟีเจอร์สื่อเหล่านี้ให้ 4 ชุดที่ต้องทดสอบสำหรับความครอบคลุมการเข้าถึงอย่างสมบูรณ์