মোবাইল অ্যাপে High Contrast — এটি কী, অ্যাক্সেসিবিলিটি এবং কনট্রাস্ট সেটিংস

অ্যাক্সেসিবিলিটিতে High Contrast কী?

High Contrast একটি ডিসপ্লে মোড যেখানে অপারেটিং সিস্টেম বা অ্যাপ্লিকেশন অগ্রভাগের রঙ (টেক্সট, আইকন) এবং ব্যাকগ্রাউন্ডের মধ্যে পার্থক্য বাড়ায়। WCAG AA মান অনুযায়ী সাধারণ টেক্সটের জন্য ন্যূনতম কনট্রাস্ট অনুপাত 4.5:1, এবং বড় টেক্সটের (18pt বা 14pt বোল্ড থেকে) জন্য — 3:1। হাই কনট্রাস্ট মোড অনুপাত 7:1 এবং তারও বেশি বাড়াতে পারে, যা সর্বোচ্চ পঠনযোগ্যতা নিশ্চিত করে।

শুধু ব্যাকগ্রাউন্ড গাঢ় করা বা টেক্সট হালকা করার বিপরীতে, High Contrast ব্যাপকভাবে কাজ করে: এটি ইন্টারফেসের রঙের প্যালেটকে উচ্চ কনট্রাস্ট রঙের একটি সীমিত সেট দিয়ে প্রতিস্থাপন করে, উপাদানের চারপাশে আউটলাইন যোগ করে এবং স্বচ্ছতা সরিয়ে দেয়। এই মোডটি কম দৃষ্টি তীক্ষ্ণতা, ফটোফোবিয়া এবং রঙ অন্ধত্বের নির্দিষ্ট কিছু ফর্মের লোকদের জন্য ডিজাইন করা হয়েছে।

তিন ধরনের হাই কনট্রাস্ট রয়েছে: সিস্টেম-স্তর (OS-এ সক্রিয় এবং সমস্ত অ্যাপ্লিকেশনকে প্রভাবিত করে), ইন-অ্যাপ (একটি নির্দিষ্ট অ্যাপ্লিকেশনের মধ্যে অন্তর্নির্মিত মোড) এবং ওয়েব মোড (CSS মিডিয়া ফিচার prefers-contrast)। সিস্টেম-স্তরের হাই কনট্রাস্ট সবচেয়ে শক্তিশালী, কারণ এটি সেই অ্যাপ্লিকেশনগুলিতেও রঙ ওভাররাইড করে যাদের নিজস্ব অ্যাক্সেসিবিলিটি সমর্থন নেই।

কার হাই কনট্রাস্ট প্রয়োজন

হাই কনট্রাস্ট-এর প্রধান ব্যবহারকারীরা হলেন ছানি (লেন্সের অস্বচ্ছতা যা কনট্রাস্ট সংবেদনশীলতা হ্রাস করে), ম্যাকুলার ডিজেনারেশন (কেন্দ্রীয় দৃষ্টি হারানো), গ্লুকোমা এবং ডায়াবেটিক রেটিনোপ্যাথিতে আক্রান্ত ব্যক্তিরা। উজ্জ্বল সূর্যালোকে কাজ করার সময়ও এই মোড প্রয়োজনীয় — উচ্চ কনট্রাস্ট স্ক্রিনের ঝলকানি পূরণ করে। WebAIM (2025) অনুসারে, 86% ওয়েব পেজে WCAG AA-এর নিচে কনট্রাস্টযুক্ত টেক্সট রয়েছে — ব্যবহারকারীর পক্ষ থেকে হাই কনট্রাস্ট আংশিকভাবে এই ত্রুটি সংশোধন করে।

iOS-এ Increase Contrast: সেটিংস এবং কনট্রাস্টের ধরন

iOS-এ, Increase Contrast ফিচারটি Settings > Accessibility > Display & Text Size-এ অবস্থিত এবং এতে তিনটি স্বাধীন সুইচ রয়েছে: Increase Contrast (সাধারণ বৃদ্ধি), Darken Colors (উজ্জ্বল রঙ গাঢ় করা) এবং Reduce Transparency (স্বচ্ছতা কমানো)। Increase Contrast প্রধান সুইচ, যা সিস্টেম উপাদানের টেক্সট, বাটন এবং বর্ডারকে প্রভাবিত করে।

প্রযুক্তিগতভাবে, iOS tintColor এবং UIVisualEffectView স্তরের মাধ্যমে Increase Contrast বাস্তবায়ন করে। সক্রিয় হলে, সিস্টেম গাঢ় টোনের জন্য আলফা মান বাড়ায় এবং হালকা টোনের জন্য কমায়, সমস্ত UI উপাদানের কনট্রাস্ট অনুপাত 2–3 পয়েন্ট বাড়ায়। Reduce Transparency আধা-স্বচ্ছ ব্যাকগ্রাউন্ড (ফ্রস্টেড গ্লাস ইফেক্ট) অপারদর্শী দিয়ে প্রতিস্থাপন করে, যা অস্পষ্ট ব্যাকগ্রাউন্ডে টেক্সট পঠনযোগ্যতা আরও উন্নত করে।

iOS অ্যাপে Increase Contrast পরীক্ষা করা

একজন ডেভেলপার UIAccessibility-এর মাধ্যমে Increase Contrast-এর অবস্থা পরীক্ষা করতে পারেন এবং সেই অনুযায়ী রঙ মানিয়ে নিতে পারেন। উদাহরণস্বরূপ, যদি কনট্রাস্ট বাড়ানো হয়, তাহলে আরও স্যাচুরেটেড অ্যাকসেন্ট রঙ ব্যবহার করা যেতে পারে, এবং যদি না হয়, তাহলে ডিফল্ট প্যালেটের মাধ্যমে 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
        }
        // হাই কনট্রাস্ট সক্রিয় থাকলে আরও স্যাচুরেটেড নীল
        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 ক্লাস isDarkerSystemColorsEnabled-এর মাধ্যমে Increase Contrast অবস্থায় অ্যাক্সেস প্রদান করে, মোড সক্রিয় থাকলে অ্যাকসেন্ট রঙ মানিয়ে নেয়, navigationBar স্বচ্ছতা নিষ্ক্রিয় করে এবং কনট্রাস্ট পরিবর্তন সম্পর্কে সিস্টেম বিজ্ঞপ্তিতে সাবস্ক্রাইব করে। UIKit UIAccessibility অবস্থা পরিবর্তন হলে স্বয়ংক্রিয়ভাবে উপাদান পুনরায় রেন্ডার করে।

ডায়নামিক iOS রঙ (UIColor Well) এবং কনট্রাস্ট

iOS ডায়নামিক UIColor রঙ (systemBackground, label, secondaryLabel) প্রদান করে যা স্বয়ংক্রিয়ভাবে Increase Contrast মোডের সাথে খাপ খায়। Increase Contrast সক্রিয় হলে, সিস্টেম রঙ তাদের মান পরিবর্তন করে: label গাঢ় হয় (বা ডার্ক মোডে হালকা), ব্যাকগ্রাউন্ড স্বচ্ছতা হারায়। ডেভেলপারদের সিস্টেম কনট্রাস্টের সাথে দ্বন্দ্ব এড়াতে সমস্ত UI উপাদানের জন্য ডায়নামিক রঙ ব্যবহার করতে উৎসাহিত করা হয়।

Android-এ High Contrast Text: ডার্ক থিম এবং কনট্রাস্ট

Android-এ, High Contrast Text ফিচার iOS-এর থেকে ভিন্নভাবে কাজ করে। কনট্রাস্ট অনুপাত মসৃণভাবে বাড়ানোর পরিবর্তে, Android একটি উল্টো রঙের স্কিম প্রয়োগ করে: গাঢ় ব্যাকগ্রাউন্ড এবং বর্ধিত বোল্ডনেস সহ সাদা টেক্সট। এই মোডটি AMOLED ডিসপ্লেতে বিশেষভাবে কার্যকর, যেখানে কালো সর্বোচ্চ কনট্রাস্ট প্রদান করে। সেটিংস সেটিংস > অ্যাক্সেসিবিলিটি > দৃশ্যমানতা উন্নয়নে অবস্থিত।

Android High Contrast Text দুটি প্রক্রিয়া ব্যবহার করে: থিম ওভারলেয়ের মাধ্যমে রঙের প্যালেট ওভাররাইড করা এবং বিটম্যাপ চিত্রের কনট্রাস্ট বাড়ানোর জন্য ColorMatrix প্রয়োগ করা। সিস্টেম বর্তমান অ্যাপ্লিকেশন থিম (লাইট/ডার্ক) বিশ্লেষণ করে এবং সর্বোচ্চ কনট্রাস্ট সহ ওভারলে প্রয়োগ করে: কালো ব্যাকগ্রাউন্ডে (#000000) সাদা অগ্রভাগ (#FFFFFF)। আধা-স্বচ্ছ উপাদান একটি অপারদর্শী ব্যাকগ্রাউন্ড পায়।

Android API-এর মাধ্যমে High Contrast Text পরীক্ষা করা

Android-এ High Contrast Text-এর অবস্থা পরীক্ষা করতে, AccessibilityManager এবং ContentResolver ব্যবহার করা হয়। API মোড সক্রিয় কিনা তা নির্ধারণ করতে এবং UI মানিয়ে নিতে দেয়। 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 ক্লাস AccessibilityManager এবং সিস্টেম সেটিংসের মাধ্যমে High Contrast সক্রিয় কিনা তা পরীক্ষা করে, Jetpack Compose-এ রঙ মানিয়ে নেয় এবং View সিস্টেমের জন্য একটি কাস্টম ContrastTextView প্রদান করে। Android-এ, iOS-এর বিপরীতে, High Contrast পরিবর্তনের জন্য সরাসরি কোনো বিজ্ঞপ্তি নেই — গতিশীল আপডেটের জন্য Settings.System-এ ContentObserver প্রয়োজন।

Material Design 3 এবং হাই কনট্রাস্ট

Material Design 3 (Material You)-এ Dynamic Color-এর মাধ্যমে অন্তর্নির্মিত হাই কনট্রাস্ট সমর্থন অন্তর্ভুক্ত রয়েছে। সিস্টেম মোড সক্রিয় হলে, Material 3 স্বয়ংক্রিয়ভাবে সর্বোচ্চ টোনাল প্যালেট নির্বাচন করে: background = Neutral0, onBackground = Neutral100, primary = Primary100। ডেভেলপারদের শুধু MD3 উপাদান ব্যবহার করতে হবে — সিস্টেম স্বয়ংক্রিয়ভাবে কনট্রাস্ট অভিযোজন পরিচালনা করে।

WCAG কনট্রাস্ট অনুপাত: 4.5:1 এবং 3:1 মান

WCAG কনট্রাস্ট অনুপাত দুটি রঙের মধ্যে লুমিন্যান্সের একটি গাণিতিক অনুপাত, যা টেক্সট অ্যাক্সেসিবিলিটি মূল্যায়নের জন্য ব্যবহৃত হয়। মান দুটি থ্রেশহোল্ড নির্ধারণ করে: সাধারণ টেক্সটের জন্য 4.5:1 (AA স্তর) এবং বড় টেক্সটের (18px/14px বোল্ড থেকে) জন্য 3:1। AAA স্তরের জন্য, সাধারণ টেক্সটের জন্য 7:1 এবং বড় টেক্সটের জন্য 4.5:1 প্রয়োজন। হাই কনট্রাস্ট মোড আদর্শভাবে 7:1 এবং তার বেশি প্রদান করা উচিত।

কনট্রাস্ট অনুপাত গণনা সূত্র ব্যবহার করে করা হয়: (L1 + 0.05) / (L2 + 0.05), যেখানে L1 হালকা রঙের আপেক্ষিক লুমিন্যান্স এবং L2 গাঢ় রঙের আপেক্ষিক লুমিন্যান্স। আপেক্ষিক লুমিন্যান্স sRGB চ্যানেল থেকে ওজন সহ গণনা করা হয়: 0.2126R + 0.7152G + 0.0722B। অ্যাক্সেসিবিলিটি ডেভেলপারদের জন্য, WebAIM Contrast Checker, Color Contrast Analyser বা Xcode-এ Accessibility Inspector-এর মতো টুল ব্যবহার করা যথেষ্ট।

WCAG 2.2 কনট্রাস্ট থ্রেশহোল্ড টেবিল

কোডে কনট্রাস্ট পরীক্ষা করা

ওয়েব অ্যাপ্লিকেশনে স্বয়ংক্রিয় কনট্রাস্ট অনুপাত পরীক্ষার জন্য, JavaScript ব্যবহার করা যেতে পারে। যখন হাই কনট্রাস্ট মোড সক্রিয় থাকে, তখন 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)

JavaScript-এ ContrastChecker ক্লাস WCAG 2.2 অনুযায়ী সম্পূর্ণ কনট্রাস্ট অনুপাত গণনা বাস্তবায়ন করে: sRGB-কে রৈখিক স্পেসে রূপান্তর, Rec.709 ওজন সহ আপেক্ষিক লুমিন্যান্স গণনা এবং AA/AAA থ্রেশহোল্ডের সাথে তুলনা। এই টুলটি হাই কনট্রাস্ট সমর্থন সহ ওয়েব অ্যাপ্লিকেশন বিকাশের সময় স্বয়ংক্রিয় রঙ প্যালেট অডিটের জন্য কার্যকর।

কনট্রাস্ট অডিটিং টুল

সমাপ্ত অ্যাপ্লিকেশনে কনট্রাস্ট অনুপাত পরীক্ষা করতে, Accessibility Scanner (Android), Xcode Accessibility Inspector (iOS) বা axe DevTools (ওয়েব) ব্যবহার করুন। এই টুলগুলি স্বয়ংক্রিয়ভাবে WCAG AA-এর নিচে কনট্রাস্টযুক্ত উপাদান খুঁজে পায় এবং সেগুলি হাইলাইট করে। অডিটের সময় হাই কনট্রাস্ট মোড সক্ষম থাকা উচিত — এটি দেখাবে যে 7:1 অর্জনের জন্য সিস্টেমের কনট্রাস্ট বর্ধন যথেষ্ট কিনা।

CSS prefers-contrast: সিস্টেম কনট্রাস্ট অনুযায়ী ওয়েব পেজ মানিয়ে নেওয়া

CSS মিডিয়া ফিচার prefers-contrast ওয়েব পেজগুলিকে ব্যবহারকারীর সিস্টেম কনট্রাস্ট সেটিং অনুযায়ী স্টাইল মানিয়ে নেওয়ার অনুমতি দেয়। ফিচারটি মান গ্রহণ করে: no-preference (ডিফল্ট), more (ব্যবহারকারী হাই কনট্রাস্ট সক্ষম করেছেন), less (ব্যবহারকারী কম কনট্রাস্ট পছন্দ করেন) এবং custom (সূক্ষ্ম-টিউনিং)। এটি 2022 সাল থেকে সমস্ত আধুনিক ব্রাউজার দ্বারা সমর্থিত।

prefers-contrast: more — ওয়েব ডেভেলপারের জন্য একটি সংকেত: টেক্সট কনট্রাস্ট অনুপাত বাড়ান, আধা-স্বচ্ছ ব্যাকগ্রাউন্ড অপারদর্শী দিয়ে প্রতিস্থাপন করুন, ইন্টারঅ্যাকটিভ উপাদানের সীমানা বাড়ান এবং কম কনট্রাস্ট ব্যাকগ্রাউন্ড ইমেজ সরান। iOS Safari এবং Android Chrome সিস্টেম হাই কনট্রাস্ট মোড (Increase Contrast / High Contrast Text) চালু হলে more মান পাঠায়।

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টি কম্বিনেশন দেয় যা সম্পূর্ণ অ্যাক্সেসিবিলিটি কভারেজের জন্য পরীক্ষা করা দরকার।