التباين العالي في التطبيقات المحمولة — ما هو، إمكانية الوصول وإعدادات التباين

ما هو التباين العالي في إمكانية الوصول؟

High Contrast هو وضع عرض يزيد فيه نظام التشغيل أو التطبيق من الفرق بين لون المقدمة (نص، أيقونات) والخلفية. الحد الأدنى لنسبة التباين للنص العادي وفقًا لمعيار WCAG AA هو 4.5:1، وللنص الكبير (من 18pt أو 14pt عريض) — 3:1. يمكن لوضع التباين العالي زيادة النسبة إلى 7:1 وما فوق، مما يضمن أقصى وضوح.

على عكس تعتيم الخلفية أو تفتيح النص ببساطة، يعمل التباين العالي بشكل شامل: يستبدل لوحة ألوان الواجهة بمجموعة محدودة من الألوان عالية التباين، ويضيف حدودًا حول العناصر ويزيل الشفافية. تم تصميم هذا الوضع للأشخاص ذوي حدة البصر المنخفضة، رهاب الضوء وبعض أشكال عمى الألوان.

هناك ثلاثة أنواع من التباين العالي: على مستوى النظام (مفعل في نظام التشغيل ويؤثر على جميع التطبيقات)، داخل التطبيق (وضع مدمج داخل تطبيق معين) ووضع الويب (وظيفة CSS الإعلامية prefers-contrast). التباين العالي على مستوى النظام هو الأقوى، لأنه يتجاوز الألوان حتى في التطبيقات التي لا تحتوي على دعم إمكانية الوصول الخاص بها.

من يحتاج التباين العالي

المستخدمون الرئيسيون لـ التباين العالي هم الأشخاص المصابون بإعتام عدسة العين (عتامة العدسة التي تقلل حساسية التباين)، الضمور البقعي (فقدان الرؤية المركزية)، الجلوكوما واعتلال الشبكية السكري. هذا الوضع ضروري أيضًا عند العمل تحت أشعة الشمس الساطعة — التباين العالي يعوض وهج الشاشة. وفقًا لـ WebAIM (2025)، 86% من صفحات الويب تحتوي على نص بتباين أقل من WCAG AA — التباين العالي من جانب المستخدم يصحح هذا العيب جزئيًا.

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 للألوان الداكنة ويقللها للألوان الفاتحة، رافعًا نسبة التباين لجميع عناصر الواجهة بمقدار 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
        }
        // أزرق أكثر تشبعًا عند تنشيط التباين العالي
        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 أغمق (أو أفتح في الوضع الداكن)، تفقد الخلفية شفافيتها. يُنصح المطورون باستخدام الألوان الديناميكية لجميع عناصر الواجهة لتجنب التعارض مع تباين النظام.

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. تسمح واجهة برمجة التطبيقات بتحديد ما إذا كان الوضع نشطًا وتكييف واجهة المستخدم. 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 والتباين العالي

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) و3:1 للنص الكبير (من 18px/14px عريض). لمستوى 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 أو Accessibility Inspector في Xcode.

جدول حدود التباين 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)

فئة ContrastChecker في JavaScript تنفذ حسابًا كاملاً لنسبة التباين وفقًا لـ WCAG 2.2: تحويل sRGB إلى الفضاء الخطي، حساب الإنارة النسبية بأوزان Rec.709 والمقارنة مع حدود AA/AAA. هذه الأداة مفيدة لتدقيق لوحة الألوان الآلي عند تطوير تطبيقات الويب مع دعم التباين العالي.

أدوات تدقيق التباين

للتحقق من نسبة التباين في تطبيق مكتمل، استخدم Accessibility Scanner (Android)، Xcode Accessibility Inspector (iOS) أو axe DevTools (web). تجد هذه الأدوات تلقائيًا العناصر ذات التباين الأقل من WCAG AA وتسلط الضوء عليها. يجب تمكين وضع التباين العالي أثناء التدقيق — سيظهر هذا ما إذا كان تعزيز تباين النظام كافيًا لتحقيق 7:1.

CSS prefers-contrast: تكييف صفحات الويب مع تباين النظام

وظيفة CSS الإعلامية prefers-contrast تسمح لصفحات الويب بتكييف الأنماط وفقًا لإعداد تباين النظام للمستخدم. تقبل الوظيفة القيم: no-preference (افتراضي)، more (قام المستخدم بتشغيل التباين العالي)، less (يفضل المستخدم تباينًا منخفضًا) وcustom (ضبط دقيق). مدعومة من جميع المتصفحات الحديثة منذ 2022.

prefers-contrast: more — إشارة لمطور الويب: زيادة نسبة تباين النص، استبدال الخلفيات شبه الشفافة بخلفيات معتمة، تعزيز حدود العناصر التفاعلية وإزالة صور الخلفية منخفضة التباين. Safari iOS و Chrome Android ينقلان القيمة more عند تشغيل وضع التباين العالي للنظام (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 مجموعات يجب اختبارها لتغطية كاملة لإمكانية الوصول.