High Contrast در برنامه‌های موبایل — چیست، accessibility و تنظیمات کنتراست

High Contrast در accessibility چیست؟

High Contrast حالتی از نمایش است که در آن سیستم‌عامل یا برنامه تفاوت بین رنگ پیش‌زمینه (متن، آیکون‌ها) و پس‌زمینه را افزایش می‌دهد. حداقل نسبت کنتراست برای متن معمولی طبق استاندارد WCAG AA ۴٫۵:۱ و برای متن بزرگ (از 18pt یا 14pt bold) ۳:۱ است. حالت High Contrast می‌تواند نسبت را به ۷:۱ و بالاتر افزایش دهد و حداکثر تشخیص‌پذیری را فراهم کند.

برخلاف تیره‌کردن ساده پس‌زمینه یا روشن‌کردن متن، High Contrast به صورت جامع عمل می‌کند: پالت رنگی رابط کاربری را با مجموعه محدودی از رنگ‌های با کنتراست بالا جایگزین می‌کند، حاشیه‌هایی در اطراف عناصر اضافه می‌کند و نیمه‌شفافیت را حذف می‌کند. این حالت برای افراد با کاهش وضوح بینایی، نورگریزی و برخی اشکال کوررنگی طراحی شده است.

سه نوع High Contrast وجود دارد: سیستمی (فعال در OS و تأثیرگذار بر همه برنامه‌ها)، برنامه (حالت داخلی در یک برنامه خاص) و وب (تابع رسانه‌ای CSS prefers-contrast). High Contrast سیستمی قدرتمندترین است، زیرا رنگ‌ها را حتی در برنامه‌هایی که پشتیبانی دسترس‌پذیری خاص خود را ندارند، بازنویسی می‌کند.

چه کسانی به High Contrast نیاز دارند

کاربران اصلی High Contrast — افراد مبتلا به آب مروارید (کدرشدن عدسی که حساسیت کنتراست را کاهش می‌دهد)، دژنراسیون ماکولا (از دست دادن بینایی مرکزی)، گلوکوم و رتینوپاتی دیابتی هستند. همچنین این حالت هنگام کار در آفتاب روشن ضروری است — کنتراست بالا تابش‌خور را روی صفحه جبران می‌کند. طبق داده‌های WebAIM (2025)، ۸۶٪ صفحات وب دارای متن با کنتراست کمتر از 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 را ۲–۳ نمره بالا می‌برد. Reduce Transparency پس‌زمینه‌های نیمه‌شفاف (اثر شیشه مات) را با پس‌زمینه‌های مات جایگزین می‌کند که خوانایی متن روی پس‌زمینه‌های تار را افزایش می‌دهد.

بررسی Increase Contrast در برنامه iOS

توسعه‌دهنده می‌تواند وضعیت Increase Contrast را از طریق UIAccessibility بررسی و رنگ‌ها را تطبیق دهد. به عنوان مثال، اگر کنتراست افزایش یافته باشد، می‌توان از رنگ‌های accent اشباع‌تر استفاده کرد، و اگر نه — نسبت کنتراست پایه ۴٫۵:۱ را از طریق پالت پیش‌فرض تضمین کرد. UIAccessibility.isReduceTransparencyEnabled همچنین برای غیرفعال‌کردن افکت‌های blur در حالت فعال مفید است.

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 فراهم می‌کند، رنگ accent را در حالت فعال تطبیق می‌دهد، نیمه‌شفافیت navigationBar را غیرفعال می‌کند و در اعلان‌های سیستم درباره تغییر کنتراست مشترک می‌شود. UIKit هنگام تغییر وضعیت UIAccessibility به طور خودکار عناصر را دوباره ترسیم می‌کند.

رنگ‌های پویای iOS (UIColor Well) و کنتراست

iOS رنگ‌های پویای UIColor (systemBackground, label, secondaryLabel) را ارائه می‌دهد که به طور خودکار با حالت Increase Contrast تطبیق می‌یابند. هنگام فعال‌سازی Increase Contrast، رنگ‌های سیستمی مقادیر خود را تغییر می‌دهند: label تیره‌تر (یا در تم تیره روشن‌تر) می‌شود، background نیمه‌شفافیت خود را از دست می‌دهد. به توسعه‌دهنده توصیه می‌شود برای همه عناصر UI از رنگ‌های پویا استفاده کند تا با کنتراست سیستم تضاد ایجاد نشود.

High Contrast Text در Android: تم تیره و کنتراست

در Android عملکرد High Contrast Text (متن با کنتراست بالا) متفاوت از iOS کار می‌کند. به جای افزایش تدریجی نسبت کنتراست، Android از طرح رنگ معکوس استفاده می‌کند: پس‌زمینه تیره و متن سفید با ضخامت افزایش‌یافته. این حالت به ویژه در صفحه‌نمایش‌های AMOLED مؤثر است، جایی که رنگ سیاه حداکثر کنتراست را می‌دهد. تنظیمات در تنظیمات > دسترس‌پذیری > بهبودهای دید قرار دارد.

Android High Contrast Text از دو مکانیزم استفاده می‌کند: بازنویسی پالت رنگی از طریق theme overlay و اعمال ColorMatrix برای افزایش کنتراست تصاویر bitmap. سیستم تم فعلی برنامه (Light/Dark) را تحلیل می‌کند و overlay با حداکثر کنتراست اعمال می‌کند: پیش‌زمینه سفید (#FFFFFF) روی پس‌زمینه سیاه (#000000). عناصر نیمه‌شفاف زیرلایه مات دریافت می‌کنند.

بررسی High Contrast Text از طریق Android API

برای بررسی وضعیت High Contrast Text در Android از 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 فعالیت 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 contrast ratio: استانداردهای ۴٫۵:۱ و ۳:۱

WCAG contrast ratio — نسبت ریاضی روشنایی بین دو رنگ است که برای ارزیابی دسترس‌پذیری متن استفاده می‌شود. استاندارد دو آستانه تعریف می‌کند: ۴٫۵:۱ برای متن معمولی (سطح AA) و ۳:۱ برای متن بزرگ (از 18px/14px bold). برای سطح AAA ۷:۱ برای متن معمولی و ۴٫۵:۱ برای متن بزرگ لازم است. حالت High Contrast در حالت ایده‌آل باید ۷:۱ و بالاتر را تضمین کند.

محاسبه contrast ratio با فرمول انجام می‌شود: (L1 + ۰٫۰۵) / (L2 + ۰٫۰۵)، که در آن L1 — روشنایی نسبی رنگ روشن‌تر، L2 — رنگ تیره‌تر. روشنایی نسبی از کانال‌های sRGB با وزن‌ها محاسبه می‌شود: ۰٫۲۱۲۶R + ۰٫۷۱۵۲G + ۰٫۰۷۲۲B. برای توسعه‌دهنده دسترس‌پذیری استفاده از ابزارها کافی است: WebAIM Contrast Checker, Color Contrast Analyser یا Accessibility Inspector در Xcode.

جدول آستانه‌های کنتراست WCAG 2.2

بررسی کنتراست در کد

برای بررسی خودکار contrast ratio در برنامه وب می‌توان از JavaScript استفاده کرد. در حالت فعال High Contrast توصیه می‌شود عناصری که با استاندارد AA مطابقت ندارند برجسته شوند. در زیر مثال محاسبه روشنایی نسبی و contrast ratio در JavaScript آورده شده است.

// محاسبه contrast ratio طبق 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)
    }

    // روشنایی نسبی (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 بین دو رنگ
    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 (۴٫۵:۱)
    passesAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 4.5
    }

    // بررسی سطح AAA (۷:۱)
    passesAAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 7.0
    }
}

// استفاده
const checker = new ContrastChecker()
console.log(checker.getContrastRatio("#333333", "#FFFFFF"))
// → ۱۳٫۲:۱ (AAA)
console.log(checker.passesAA("#999999", "#FFFFFF"))
// → false (۲٫۸:۱)

کلاس ContrastChecker در JavaScript محاسبه کامل contrast ratio را طبق WCAG 2.2 پیاده‌سازی می‌کند: تبدیل sRGB به فضای خطی، محاسبه روشنایی نسبی با وزن‌های Rec.709 و مقایسه با آستانه‌های AA/AAA. این ابزار برای حسابرسی خودکار پالت رنگی هنگام توسعه برنامه‌های وب با پشتیبانی High Contrast مفید است.

حسابرسی کنتراست با ابزارها

برای بررسی contrast ratio در برنامه آماده از Accessibility Scanner (Android)، Xcode Accessibility Inspector (iOS) یا axe DevTools (وب) استفاده کنید. این ابزارها به طور خودکار عناصر با کنتراست کمتر از WCAG AA را پیدا کرده و برجسته می‌کنند. حالت High Contrast باید در طول حسابرسی فعال باشد — این نشان می‌دهد آیا افزایش کنتراست سیستم برای رسیدن به ۷:۱ کافی است یا خیر.

CSS prefers-contrast: تطبیق صفحات وب با کنتراست سیستم

تابع رسانه‌ای CSS prefers-contrast به صفحات وب اجازه می‌دهد استایل‌ها را با توجه به تنظیم کنتراست سیستم کاربر تطبیق دهند. این تابع مقادیر زیر را می‌پذیرد: no-preference (پیش‌فرض)، more (کاربر High Contrast را فعال کرده)، less (کاربر کنتراست کاهش‌یافته را ترجیح می‌دهد) و custom (تنظیم دقیق). از سال ۲۰۲۲ توسط همه مرورگرهای مدرن پشتیبانی می‌شود.

prefers-contrast: more — سیگنالی برای توسعه‌دهنده وب: افزایش نسبت کنتراست متن، جایگزینی پس‌زمینه‌های نیمه‌شفاف با مات، تقویت حاشیه عناصر تعاملی و حذف تصاویر پس‌زمینه با کنتراست پایین. iOS Safari و Android Chrome مقدار more را هنگام فعال‌سازی حالت High Contrast سیستم (Increase Contrast / High Contrast Text) ارسال می‌کنند.

مثال تطبیق از طریق prefers-contrast

در prefers-contrast: more صفحه وب باید تعداد رنگ‌ها را به حداقل برساند و به پالت سیاه و سفید با رنگ‌های accent برای تأکید اولویت دهد. در زیر مثال تطبیق 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); // ۰٫۴ بود — تقویت کردیم
    }
}

/* کنتراست کاهش‌یافته: 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 رنگ‌ها باید سفید روی سیاه با تأکیدهای روشن باشند. در تم روشن — سیاه روی سفید. ترکیب این تابع‌های رسانه‌ای ۴ ترکیب می‌دهد که برای پوشش کامل دسترس‌پذیری باید آزمایش شوند.