نسبة تباين الألوان وفق WCAG: مستويات AA وAAA وخوارزمية APCA — الدليل الشامل لعام 2026

أنت تُصدر زرًّا. برتقالي العلامة التجارية مع نص أبيض، يبدو حادًّا ومتقنًا على شاشتك بدقة 4K. ثم يعود تقرير تدقيق إمكانية الوصول مضيئًا بالأحمر: نسبة تباين WCAG تساوي 1.97:1، أقل بكثير من عتبة AA البالغة 4.5:1 للنص العادي. الزر الذي بدا لك مقبولًا أصبح غير مقروء لنحو 220 مليون شخص يعانون من ضعف البصر. يغطّي هذا الدليل كل رقم تحتاجه لإصلاحه: نسب WCAG 2، مستوى AAA، خوارزمية APCA Lc، الفئات الثماني لاختلال رؤية الألوان، وتطبيق عملي بلغة JavaScript يمكنك إدراجه في عملية البناء لديك.

مرجع سريع: عتبات WCAG وAPCA في لمحة واحدة

المعيار	نص عادي	نص كبير	واجهة / أيقونات	ملاحظات
WCAG AA	≥ 4.5:1	≥ 3:1	≥ 3:1	الحد القانوني
WCAG AAA	≥ 7:1	≥ 4.5:1	≥ 3:1	الهدف المعزَّز
APCA للنص	Lc 75+	Lc 60+	Lc 45+ (أيقونات)	مسودة، إدراكية

«النص الكبير» يعني ≥ 18pt عادي أو ≥ 14pt غامق (ما يقارب 24px و18.66px في CSS). و«الواجهة» تشمل حدود الحقول، حلقات التركيز، وأي عنصر رسومي يجب على المستخدم إدراكه ليتمكن من استخدام الصفحة. أما الشعارات والرسوم الزخرفية البحتة فمعفاة من متطلبات التباين.

ما هو تباين الألوان وفق WCAG؟

نسبة تباين WCAG هي مقياس عددي يمتد من 1:1 (لا تباين) إلى 21:1 (الحد الأقصى) يقارن السطوع النسبي للنص مقابل خلفيته. تشترط إرشادات إمكانية الوصول إلى محتوى الويب نسبة ≥ 4.5:1 (AA) للنص العادي، أو ≥ 7:1 (AAA) للالتزام المعزَّز.

هذه النسبة هي محور معظم عمليات تدقيق إمكانية الوصول. نشرها كونسورتيوم W3C في WCAG 2.0 عام 2008، ثم نقّحها في 2.1 (2018) و2.2 (2023)، وتشير إليها الجهات التنظيمية الكبرى. قانون ADA في الولايات المتحدة، قانون إمكانية الوصول الأوروبي EAA (نافذ منذ يونيو 2025)، البند Section 508 للوكالات الفيدرالية الأمريكية، وقانون AODA في كندا، جميعها تعتمد WCAG 2.x AA حدًّا أدنى فعليًّا.

بعيدًا عن الزاوية القانونية، يهمّ هذا لأسباب ملموسة. نحو 220 مليون شخص يعانون من ضعف البصر دون أن يكونوا مكفوفين، يقرؤون الشاشات حين يكون التباين بين النص والخلفية مرتفعًا بما يكفي. وقرابة 8% من الرجال و0.5% من النساء لديهم اختلال في رؤية الألوان. ويعاني القرّاء الأكبر سنًّا من اصفرار العدسة وضيق فتحة الحدقة، مما يخفض التباين المُدرَك عمليًّا بنسبة 20-30% بعد سن الستين. واستخدام الهاتف في الخارج يُفقد 20-40% إضافية بسبب الوهج. الصفحة التي تسجّل 4.5:1 على مكتبك هي الأرضية التي يستطيع عندها هؤلاء المستخدمون قراءتها.

الأكثر تأثرًا بهذا: مهندسو الواجهة الأمامية الذين ينشرون واجهات إنتاجية، المصممون الذين يختارون لوحات ألوان العلامة التجارية، أخصائيو إمكانية الوصول الذين يجرون عمليات التدقيق، وفِرق الامتثال المسؤولة عن التعرض القانوني. الرياضيات قصيرة، لكن القرارات التي تفرضها ليست كذلك.

نسبة تباين WCAG 2.x: الرياضيات والعتبات

يحدّد W3C التباين في ثلاث خطوات قصيرة. لحساب نسبة تباين WCAG: (1) حوّل كل لون من sRGB المُرمَّز بمنحنى جاما إلى قيم ضوء خطّية، (2) احسب السطوع النسبي باستخدام معاملات ثابتة لحساسية العين البشرية للأحمر والأخضر والأزرق، ثم (3) اقسم السطوعَين مع إزاحة ثابتة صغيرة للتعامل مع القيم القريبة من الأسود.

صيغة السطوع النسبي من WCAG 2.1 §1.4.3 هي:

L = 0.2126 × R_lin + 0.7152 × G_lin + 0.0722 × B_lin

R_lin وG_lin وB_lin هي قيم القنوات بالضوء الخطّي بعد عكس منحنى جاما لـ sRGB. ترجيح 0.7152 على الأخضر يعكس الحساسية القوية للعين البشرية للأخضر، فالأخضر يكاد يكون أعلى صخبًا بصريًّا بسبعة أضعاف من الأزرق لكل وحدة طاقة ضوئية.

أما صيغة النسبة فهي:

ratio = (L_lighter + 0.05) / (L_darker + 0.05)

الإضافة +0.05 تمنع القسمة على صفر للأسود الخالص (L = 0) وتعطي حدًّا أقصى يساوي (1 + 0.05) / (0 + 0.05) = 21:1 للأبيض الخالص على الأسود الخالص. والحد الأدنى هو 1:1: لونان متطابقان.

في ما يلي التطبيق الكامل في حوالي ثلاثين سطرًا من JavaScript النقي. بلا تبعيات، ويعمل في أي بيئة:

// sRGB hex → قناة ضوء خطّية
function srgbToLinear(channel8bit) {
  const v = channel8bit / 255;
  return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
}

// "#RRGGBB" → السطوع النسبي [0, 1]
function relativeLuminance(hex) {
  const h = hex.replace("#", "");
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  return (
    0.2126 * srgbToLinear(r) +
    0.7152 * srgbToLinear(g) +
    0.0722 * srgbToLinear(b)
  );
}

// نسبة تباين WCAG 2.x بين لونين سداسيين
function contrastRatio(hexA, hexB) {
  const lA = relativeLuminance(hexA);
  const lB = relativeLuminance(hexB);
  const [lighter, darker] = lA > lB ? [lA, lB] : [lB, lA];
  return (lighter + 0.05) / (darker + 0.05);
}

// عيّنة: نص رمادي داكن على خلفية بيضاء
console.log(contrastRatio("#475569", "#ffffff").toFixed(2));
// → "7.58" أعلى براحة من AA 4.5:1 ويتجاوز AAA 7:1 بقليل

ضع رمزَين سداسيَّين في محوّل الألوان فتعود الأرقام ذاتها، معروضةً إلى جانب قيمة APCA Lc، تصنيف نطاق الألوان (gamut)، ومعاينة لثماني قنوات من CVD. أما العتبات نفسها فملموسة:

العنصر	الحد الأدنى لـ AA	الحد الأدنى لـ AAA	ملاحظات
نص المتن العادي	4.5:1	7:1	أقل من 18pt عادي / أقل من 14pt غامق
نص كبير	3:1	4.5:1	≥ 18pt عادي أو ≥ 14pt غامق
مكونات واجهة / أيقونات	3:1	—	WCAG 2.1 §1.4.11 أضيف في 2018
شعارات وزخارف	معفاة	معفاة	لا متطلبات تباين

تحويلات وحدات CSS تُربك الفرق عادةً. 18pt تساوي 24px عند الإعداد الافتراضي للمتصفح، و14pt تساوي 18.66px. خط متن 16px (الإعداد الافتراضي الحديث) يقع تحت عتبة «النص الكبير»، فيخضع للقاعدة الأكثر صرامة 4.5:1 AA. أما عنوان 20px بوزن font-weight: 700 فيُعدّ كبيرًا ويأخذ الحد الأكثر تساهلًا 3:1.

ثمة دقة تربك الفِرق دائمًا: استثناء «النص الكبير» في WCAG يتعلق بقابلية القراءة للمستخدم عند الحجم، لا بدلالات العناوين. عنصر <h2> بحجم 14px ليس نصًّا كبيرًا، ويحتاج رغم ذلك إلى 4.5:1. وفقرة تسويقية بحجم 24px تُعدّ نصًّا كبيرًا وتأخذ أرضية 3:1. القاعدة تستند إلى الحجم المعروض بالبكسل والوزن، لا إلى اسم الوسم. والمدققون سيرصدون عدم التطابق؛ مصدر الحقيقة هو ملف CSS لديك، لا دلالات HTML.

ثابت +0.05 في صيغة النسبة له أصل محدد: يمثّل حدّ «الوهج» (flare)، أي الضوء المحيط الذي ينعكس عن سطح الشاشة فيرفع السطوع الظاهر للأسود الخالص إلى حد أدنى. بدونه، سيؤدي بكسل OLED يعرض أسودًا حقيقيًّا مقابل أبيض خالص إلى قسمة على صفر. ومعه يصبح أقصى نسبة قابلة للتحقيق 21:1، وهو رقم ستراه مذكورًا في كل أدوات إمكانية الوصول. لا توجد شاشة فيزيائية قادرة على تقديم أكثر من 21:1 بعد أخذ الوهج في الحسبان، ولهذا يتوقف مقياس WCAG عند تلك القمة.

AA مقابل AAA: أيّهما تستهدف؟

AA هو الأرضية القانونية، وAAA هو الطبقة الطموحة. معظم المواقع التجارية تستهدف AA لأن AAA يدفع ألوان العلامة التجارية نحو التدرج الرمادي للنجاح، وهو ما ترفضه معظم فِرق التسويق. القرار ليس «الأكثر أفضل»، بل مفاضلة بين سعة الوصول إلى المستخدمين وحرية التعبير عن العلامة التجارية.

السياق	المستوى الموصى به	لماذا
موقع تجاري عام	AA	خط أساس امتثال ADA / EAA؛ المحاكم تستشهد بـ WCAG 2 AA
خدمات حكومية / عامة	AAA	Section 508 والتشريعات الأوروبية المماثلة توصي بـ AAA
الرعاية الصحية / التعليم	AAA	قاعدة المستخدمين تميل إلى احتياجات إمكانية وصول أعلى
لوحة تحكم داخلية	AA	جمهور معروف، مفاضلة العائد على الاستثمار مقبولة
صفحة هبوط تسويقية	AA + استثناء للعلامة التجارية	ألوان العلامة مسموحة في الأبطال وCTAs، والمتن يبقى AA

التكلفة الخفية لـ AAA تظهر أول مرة تحاول فيها جعل البرتقالي المشبع للعلامة يجتاز 7:1 مقابل الأبيض. لا يستطيع. إما أن تُغمّق البرتقال حتى يتوقف عن كونه علامتك، أو تقبل بـ AA وتستخدم البرتقالي على خلفيات داكنة حيث يستطيع تحقيق AAA بسهولة. كثير من الشركات (بما فيها بعض الأكثر وعيًا بإمكانية الوصول) تستهدف صراحةً AA لمحتوى المتن وتدفع نحو AAA فقط للنصوص الحرجة كرسائل الخطأ أو الإفصاحات القانونية.

ولم تنتظر الجهات التنظيمية انتشار AAA. تنظيم ADA لإمكانية الوصول على الويب لعام 2024 يستشهد بـ WCAG 2.1 AA. وقانون إمكانية الوصول الأوروبي EAA، النافذ منذ يونيو 2025، يفرض WCAG 2.1 AA عبر الخدمات الرقمية المشمولة. ويستخدم Section 508 في الحكومة الفيدرالية الأمريكية WCAG 2.0 AA خط أساس له (مع توصية بـ AAA حيث أمكن). وقانون AODA في كندا، تشريع إمكانية الوصول في أونتاريو، يشير إلى WCAG 2.0 AA. النمط متسق: AA هو الشريط، وAAA هو الهدف الطموح.

APCA: الخوارزمية الإدراكية الجديدة

APCA، أي خوارزمية التباين الإدراكي المتقدم (Advanced Perceptual Contrast Algorithm) التي صمّمها Andrew Somers تحت راية Myndex، هي خوارزمية مرشّحة لـ WCAG 3. تستبدل نسبة WCAG 2 المتماثلة بدرجة Lc ذات قطبية تتراوح من -108 إلى +108، حيث تخبرك الإشارة باتجاه التباين (نص داكن على فاتح مقابل نص فاتح على داكن)، ويعكس المقدار التباين المُدرَك على شاشة باعثة فعلية.

تكتسب APCA أهميتها لأن صيغة WCAG 2 المتماثلة تفوّت تأثيرَين واقعيَّين:

• عدم تناظر القطبية. نص فاتح على خلفية داكنة يُقرأ بشكل مختلف عن نص داكن على خلفية فاتحة، حتى عند نسبة WCAG نفسها. WCAG 2 يعيد الرقم نفسه للاتجاهَين؛ أما APCA فلا.
• نمذجة الشاشة. صيغة WCAG 2 اشتُقّت من نماذج سطوع الورق المطبوع. أما APCA فضُبطت مقابل شاشات sRGB في إضاءة مكتبية نموذجية، وهو أقرب إلى ما يراه مستخدموك فعلًا.

المقايضة: APCA أكثر تعقيدًا (تتضمن أُسسًا حسّاسة للقطبية وتعديلات لوزن الخط)، وليست بعدُ معيارًا تنظيميًّا. ولا يزال تحليل Adrian Roselli الصادر في أبريل 2026 أوضح ملخص لموقع APCA؛ فهي واعدة تقنيًّا، لكن WCAG 3 نفسه لا يزال في مرحلة مسوّدة مبكرة ضمن مسار Silver، ولم تُصادَق APCA رسميًّا بوصفها الخوارزمية الرسمية بعد.

عتبات APCA على مستوى البرونزي (Bronze)، أي الأرضية العملية التي تستهدفها معظم الفِرق، تبدو هكذا:

حالة الاستخدام	Lc الموصى به	Lc الأدنى
نص متن (16px، وزن 400)	90+	75
نص كبير (24px، وزن 400)	75+	60
عناصر واجهة وأيقونات غير نصية	60+	45
نص توضيحي / حقول بديلة	30+	30

السبب في أهمية APCA، والسبب في أن محوّل الألوان يُظهر المقياسَين جنبًا إلى جنب، هو الحالات التي تختلف فيها مع WCAG 2:

• #FFA500 (برتقالي) على #FFFFFF: WCAG 2 يُعيد 1.97:1، رسوب واضح في AA. وتتفق APCA، إذ تسجّل قرابة Lc 38، رسوب أيضًا. حتى الآن، الخوارزميتان تقولان «لا»، ومع ذلك يظل معظم المصممين الذين رأيتهم يُرسلون هذا التركيب لأنه «يبدو جيدًا».
• #767676 (رمادي متوسط) على #FFFFFF: WCAG 2 يُعيد 4.54:1، أعلى بقليل من AA 4.5:1، نجاح تقني. APCA تسجّل هذا الزوج عند نحو Lc 60، وهو دون عتبة APCA البرونزية البالغة 75 لنص المتن. WCAG ينجح؛ APCA ترسب. وتجربة المستخدم المعيشة أقرب إلى حُكم APCA: هذا الرمادي على الأبيض أصعب قراءةً في أحجام المتن مما توحي به النسبة.
• #3b82f6 (أزرق Tailwind blue-500) على #000000: WCAG 2 يُعيد 5.71:1، نجاح مريح في AA. APCA تسجّل هذا قرابة Lc 65، أقل من الحد الأدنى Lc 75 لنص المتن. النص الأزرق الفاتح على خلفية داكنة، نمط محبوب في الوضع الداكن، هو الحالة النموذجية لـ «WCAG ينجح، APCA ترفع راية».

لست مضطرًّا إلى اختيار جانب. الموقف العملي الذي استقرّت عليه معظم فِرق الإنتاج: احتفظ بـ WCAG 2 AA خط الأساس التنظيمي لأنه ما تتحقق منه عمليات تدقيق الامتثال، وشغّل APCA بالتوازي بوصفها فحصًا حدسيًّا لسؤال «هل هذا قابل للقراءة فعلًا؟»، خاصة في تصميمات الوضع الداكن وألوان العلامة المشبعة. يعرض محوّل الألوان كلا الرقمَين في صف واحد كي لا تضطر إلى التنقل بين أدوات متعددة.

عمى الألوان وما يتجاوز التباين

نسب التباين ليست سوى نصف إمكانية الوصول اللوني. نحو 8% من الرجال و0.5% من النساء يرون الألوان بشكل مختلف عن صاحب الرؤية ثلاثية الألوان النموذجية في الكتب، وأكثر الأنواع شيوعًا، deuteranomaly، يقع في منتصف الزوج الأحمر/الأخضر الذي نستخدمه في كل مكان لحالات النجاح والخطأ. يحظر WCAG 1.4.1 («استخدام اللون») صراحةً اعتماد اللون باعتباره الناقل الوحيد للمعلومة، وهذه القاعدة موجودة لفرض ذلك.

تنقسم التصنيفات الكاملة لاختلافات رؤية الألوان إلى ثلاث مجموعات: ثنائية اللون (dichromacy، نقص مخروط واحد)، وثلاثية الألوان الشاذة (anomalous trichromacy، انزياح مخروط واحد)، وحالات أحادية اللون النادرة (monochromacy).

النوع	الاسم الشائع	القناة المتأثرة	الانتشار (ذكور / إناث)
Protanopia	عمى الأحمر	غياب مخروط L	1.0% / 0.01%
Deuteranopia	عمى الأخضر	غياب مخروط M	1.1% / 0.01%
Tritanopia	عمى الأزرق	غياب مخروط S	0.003% / 0.003%
Protanomaly	ضعف الأحمر	انزياح مخروط L	1.3% / 0.02%
Deuteranomaly	ضعف الأخضر	انزياح مخروط M	5.0% / 0.4%
Tritanomaly	ضعف الأزرق	انزياح مخروط S	0.01% / 0.01%
Achromatopsia	انعدام الألوان	غياب كل المخاريط	0.003% (نادر جدًّا)
Cone monochromacy	رمادي جزئي	مخروط واحد فقط	0.001%

Deuteranomaly وحده يمثّل 5% من الرجال، أي واحدًا من كل عشرين. هذه هي الفئة التي ترى مؤشر خطأ أحمر ومؤشر نجاح أخضر بوصفهما لونًا زيتونيًّا-بنّيًّا متشابهًا تقريبًا. الحل ليس إعادة تصميم نظام الألوان لديك، بل إضافة قناة ثانية. أيقونة خطأ حمراء مقرونة بشكل «×» وكلمة «خطأ» تنجو من كل نوع في الجدول. أما نقطة حمراء عارية فلا تنجو.

تستخدم محاكاة CVD برمجيًّا مجموعتَي مصفوفات قياسيتين: Brettel–Viénot–Mollon (1997) لحالات ثنائية اللون، وMachado–Oliveira–Fernandes (2009) لحالات ثلاثية الألوان الشاذة. تُسقط مقاربة Brettel لون إدخال المستخدم على مستوى يمتد بين استجابتَي المخروطَين المتبقيتين، أما Machado فيُعلّم انزياح المخروط بدرجة الشدة. كلاهما قابل للتطبيق بوصفه مرشحات SVG أو مصفوفات CSS. يُصدر محوّل الألوان كل الأنواع الثمانية بوصفها معاينات بنقرة واحدة، فتفحص لون علامة تجارية عبر الطيف بأكمله دون مغادرة الصفحة.

مرشح SVG قصير، أدرجه في صفحتك وأشِر إليه بالمعرّف، يمنحك محاكاة protanopia داخل المتصفح للاختبار الفوري:

<svg style="display: none">
  <filter id="protanopia">
    <feColorMatrix type="matrix" values="
      0.567 0.433 0.000 0 0
      0.558 0.442 0.000 0 0
      0.000 0.242 0.758 0 0
      0.000 0.000 0.000 1 0"/>
  </filter>
</svg>

<style>
  .preview-protanopia { filter: url(#protanopia); }
</style>

طبّق .preview-protanopia على غلاف الصفحة لترى ما يراه شخص مصاب بـ protanopia. كرّر العملية بمصفوفات deuteranopia وtritanopia (معاملاتها موثّقة في ورقة Brettel، ومضمّنة في معظم مكتبات محاكاة CVD). وتحتوي لوحة Rendering في Chrome DevTools على المحاكيات ذاتها مدمجة ضمن «Emulate vision deficiencies»، وهي مفيدة للفحوص السريعة، أقل فائدةً لالتقاط لقطات شاشة في CI.

القاعدة الأعمق التي تتجاوز المحاكاة: لا تدع اللون يكون الفارق الوحيد بين حالتَين. يجب أن تختلف الأيقونات في الشكل (× مقابل ✓)، والحالات في تسمية النص («خطأ» مقابل «نجاح»)، والتصنيفات في النمط (مصمت مقابل مشبَّك). اللون مضاعِف لتلك الإشارات الأخرى، وليس بديلًا عنها.

هناك صنف من الإخفاقات لا ترصدها فاحصات التباين لكن محاكيات CVD ترصدها. شرائح مخطط دائري تتمايز فقط بالتدرج اللوني، أسطورة خريطة تُلوّن البلدان بشيفرة لونية، أقراص حالة تعتمد على تدرج أخضر/أصفر/أحمر، كل تلك يمكن أن تجتاز تباين WCAG 2 مقابل الخلفية بينما تكون غير مقروءة لشخص مصاب بـ deuteranopia يقرأها بعضها مقابل بعض. القاعدة هي التحقق من قابلية القراءة بين الألوان المتجاورة في التصميم، لا فقط مقابل الخلفية المحيطة. شريحتان بلون slate-500 متلاصقتان عند سطوع متماثل لا يمكن تمييزهما بغض النظر عن دوران تدرج اللون. أضف فجوة سطوع بين المناطق المتجاورة، فينجو المخطط من كل أنواع CVD.

Achromatopsia وأحادية المخروط نادرة لكنها تستحق التصميم لها صراحةً لأنها تطمس كل تمييزات تدرج اللون. الشخص المصاب بـ achromatopsia يدرك السطوع فقط، فتبدو واجهتك المُرمَّزة بالألوان بالنسبة له صورةً بتدرج رمادي. إذا صمد تصميمك حين تُشغّل filter: grayscale(1) على الصفحة بأكملها (جرّبها في DevTools)، فأنت اجتزت أشد إصدار من قاعدة «اللون ليس الإشارة الوحيدة». إنه أرخص اختبار إمكانية وصول يمكنك إجراؤه، ويكشف عددًا مفاجئًا من الإخفاقات لحظة تفعيله.

تدقيق لوحات Tailwind وMaterial

يستخدم معظم العمل في الواجهة الأمامية لوحة ألوان جاهزة: Tailwind v4، Material 3، Radix، أو shadcn. ويصبح سؤال إمكانية الوصول هو «عند أيّ درجة من هذا التدرّج يصير النص مقروءًا؟»، والإجابة قاعدة تجريبية أكثر مما تعترف به الوثائق.

بالنسبة لتدرج slate في Tailwind v4 مقابل الأبيض الخالص، تقع أرقام WCAG وAPCA على النحو التالي:

فئة Tailwind	hex تقريبي	WCAG مقابل الأبيض	AA للمتن	AAA للمتن	APCA Lc (تقريبي)
slate-400	#94a3b8	2.56:1	✗	✗	~38 ✗
slate-500	#64748b	4.76:1	✓	✗	~60 ✗ متن
slate-600	#475569	7.58:1	✓	✓	~78 ✓ متن
slate-700	#334155	10.35:1	✓	✓	~90 ✓ متن

القواعد العملية التي تنبثق:

• يحتاج نص المتن إلى slate-600 أو أغمق. slate-500 ينجح في WCAG AA لكنه يرسب في عتبة APCA للمتن، فهو ممتثل لكنه غير مريح. slate-600 هو الأرضية الآمنة.
• يمكن لتسميات الواجهة والنصوص الثانوية استخدام slate-500. مكونات الواجهة لا تحتاج سوى 3:1، والنسبة 4.76:1 من slate-500 مريحة، والنص عادةً ما يحمل سياقًا بصريًّا مساندًا.
• يجب أن تستخدم النصوص البديلة (placeholders) slate-400 أو أفتح. نص الـ placeholder معفًى بموجب WCAG 1.4.3 بوصفه زخرفيًّا فقط إذا أبقيت تسمية مرئية فوق الحقل. أنماط تسمية-بديلة-كأنها-placeholder يجب أن تحقق عتبة نص المتن.
• أسود خالص على slate-100 / slate-200 حبر مهدور. أنت عند 17:1+، ففكّر في استخدام slate-700 أو slate-800 لونًا للنص لإحساس أكثر نعومةً دون خسارة قابلية القراءة.

يستخدم Material 3 بنية لوحة ألوان نغمية مماثلة. فـ surface-container-high يعيش حول النغمة 92 (فاتح جدًّا)، وon-surface يعيش حول النغمة 10 (قرب الأسود). تباين أيّ on-surface مع أيّ رمز surface-* في العائلة نفسها مضمون باجتياز AA بحسب مواصفة Material. لكن لا تُقرن on-surface-variant (النغمة 30) مع surface-container (النغمة 94) دون فحص؛ هذا إخفاق واقعي رأيته يَشحن.

إذا كانت لديك لوحة قائمة ترسب في التباين، فإن OKLCH يمنحك أنظف مسار للإصلاح. بدلًا من دفع رموز hex عشوائيًّا، حوّل لونك إلى OKLCH، ثبّت C (التشبع) وH (تدرج اللون)، وقلّل L (السطوع) حتى ينجح التباين. ولأن قناة L في OKLCH إدراكية بالفعل، يبقى تعرّف العلامة التجارية سليمًا بينما يضيق التباين. تُجري أداة HEX إلى OKLCH هذا التحويل في خطوة واحدة؛ ويتناول المقال الشقيق OKLCH مشروحًا الرياضيات بالعمق.

يستحق الوضع الداكن فقرة خاصة به. النسبة المتماثلة لـ WCAG 2 تجتاز التركيبات ذاتها في الوضعَين الفاتح والداكن بحكم تعريفها. أما APCA، الحسّاسة للقطبية، فترفع راية كثيرًا على نص المتن في الوضع الداكن بوصفه أصعب قراءةً من زوج hex نفسه في الوضع الفاتح. يفقد الفاتح على الداكن دائمًا بعض التباين المُدرَك مقارنةً بالداكن على الفاتح عند النسبة العددية نفسها، وهو أثر معروف لكيفية تكيّف العين. أعد تشغيل APCA على كل زوج وضع داكن قبل الشحن.

فاحصات التباين وسير عمل CI

لكل من المصممين والمهندسين فاحص مفضّل، والسؤال العملي هو أيّ توليفة من الأدوات تنسجها في سير عمل واقعي. هذا هو الميدان كما هو في 2026:

الأداة	WCAG 2	APCA	محاكاة CVD	تدقيق لوحة الألوان
WebAIM Contrast Checker	✓	✗	✗	✗
Adobe Color	✓	✗	✓	✓
Stark (إضافة Figma)	✓	✓	✓	✓
Polypane (متصفح)	✓	✓	✓	✓
منتقي ألوان Chrome DevTools	✓	✓ (تجريبي)	✗	✗
axe DevTools	✓	✗	✗	✓ (مستوى الصفحة)
Go Tools Color Converter	✓	✓	✓ (8 أنواع)	✓ (Tints/Shades)

سير عمل يصمد تحت ضغط المنتج الحقيقي يبدو هكذا:

1. في Figma، يشغّل المصممون Stark على كل إطار للكشف عن الأزواج الراسبة مبكرًا. يلتقط Stark المخالفات الواضحة قبل أن يصل أي رمز hex إلى قاعدة الشيفرة.
2. عند تسليم رموز hex، يلصق المهندسون القيمة في محوّل الألوان للحصول على نسبة WCAG + APCA Lc + تصنيف gamut + معاينة CVD في صف واحد. إذا كان الزوج للوضع الداكن أو علامة تجارية مشبعة، فإن المقياس المزدوج يلتقط حالات «WCAG ينجح، APCA يرسب» التي قد تُفلت من Stark.
3. عند طلب الدمج (PR)، يفحص axe-core/playwright الصفحات المبنية بحثًا عن أي خرق تباين على DOM المُصيَّر، بما في ذلك الحالات الديناميكية. هذا يلتقط حلقات التركيز، حالات التحويم، وقابليات التعطيل التي تفلت من ملفات التصميم الساكنة.
4. في QA، تحاكي علامة Rendering في Chrome DevTools أنواع protanopia / deuteranopia / tritanopia للفحوص الموضعية على التدفقات الحرجة. كما يُظهر منتقي الألوان في DevTools نسبة WCAG مدمجة حين تمرّر فوق أي عنصر.

تكشف أدوات Pa11y وLighthouse CI و@axe-core/playwright جميعها تأكيدات التباين ضمن عمليات تدقيق إمكانية الوصول الأوسع. لا يفحص أيّ منها APCA اليوم؛ كلها تفحص WCAG 2. التسوية الواقعية هي «افرض WCAG 2 AA في CI، وافحص APCA Lc يدويًّا لألوان العلامة والوضع الداكن».

يستحق نمط واحد التذكير من فِرق أنظمة التصميم: أدمج فحص التباين في خطوة التحقق من الرموز التصميمية (tokens)، لا في QA على مستوى الصفحة فقط. إذا كانت رموزك التصميمية تُجمَّع من ملف مصدر (JSON، YAML، أو وحدة TypeScript)، فأضف سكربتًا يُعدّد كل زوج --text-* × --surface-* يسمح به النظام ويؤكد حدًّا أدنى لنسبة WCAG. يعمل السكربت في أجزاء من الثانية، ويلتقط أي انحدار حين يعدّل أحدهم قيمة رمز تصميمي، ويُنتج مصفوفة تباين تعمل بوصفها وثيقة لفريق التصميم. الفحص مستقل عن أيّ صفحة مُصيَّرة، يعمل على الرموز التصميمية فقط، فيلتقط الفشل قبل شحن أيّ واجهة.

للتحويلات الفورية خلال هذا السير، أي التحويل بين hex وRGB وHSL وOKLCH أثناء التصحيح، تغطي أدوات HEX إلى RGB وHEX إلى HSL وHEX إلى OKLCH وRGB إلى HEX الذهاب والإياب إلى أي صيغة ألوان تتوقعها سلسلة أدواتك.

الأخطاء الشائعة وكيفية إصلاحها

بعد سنوات من تدقيقات إمكانية الوصول، تظل الإخفاقات الستة ذاتها تظهر. لكل منها إصلاح أنيق:

1. نص placeholder بلون رمادي فاتح. #999999 على الأبيض يساوي 2.85:1، رسوب في AA. إما عمّقه إلى #666666 (5.74:1، ينجح في AA)، أو الأفضل: استبدل أنماط الـ placeholder-كتسمية بتسمية مرئية ثابتة فوق الحقل. لا ينبغي لـ placeholders أن تحمل معلومات.

2. زر برتقالي للعلامة التجارية مع نص أبيض. #FFA500 على الأبيض يساوي 1.97:1، رسوب فادح في AA. الإصلاح الذي يحفظ العلامة هو عكس اتجاه التباين: نص داكن (مثل #451a03) على الخلفية البرتقالية، أو الإبقاء على النص الأبيض مع تغميق الزر إلى بنّي-برتقالي عميق مشبع. تحقّق في محوّل الألوان قبل الشحن.

3. رابط أزرق ساطع في الوضع الداكن. #3b82f6 على #000000 يساوي 5.71:1 (نجاح في WCAG AA)، لكن APCA Lc قرابة 65، دون عتبة Lc 75 للمتن. لجِّ إلى OKLCH وارفع L من نحو 0.63 إلى 0.75 مع تثبيت C وH، فستحطّ قرب #7aa5f8 مع APCA Lc 80+ مريح ونفس تدرج اللون.

4. نص معطّل بـ #CCCCCC. 1.61:1 مقابل الأبيض. يُعفي WCAG 1.4.3 النص الزخرفي البحت من قاعدة النسبة، لكن عناصر التحكم المعطّلة في الواجهة ليست زخرفية، فهي تنقل المعلومة «هذا غير متاح حاليًّا». اقرن اللون المخفوت بإشارة غير لونية (شطب، أيقونة قفل، تلميح «معطّل») لكي يفهم المستخدم المصاب بـ CVD أو ضعف البصر الحالة.

5. أيقونات حالة تختلف فقط بتدرج اللون. × أحمر و✓ أخضر مقبول لأن الشكل يميّزهما أصلًا. أما نقطة حمراء مقابل نقطة خضراء فلا. استخدم الشكل واللون معًا، فمعاينة CVD في محوّل الألوان تجعل حالة الفشل بديهية في ثانية.

6. نص فوق خلفية متدرجة. تدرّج يمتد من #3b82f6 إلى #a78bfa مقابل نص أبيض يجتاز التباين في المنتصف ويرسب قرب الطرف الخزامي. الإصلاح هو فرض التباين عند أسوأ نقطة في التدرج، أو إضافة طبقة معتمة جزئيًّا فوقه فيظل السطوع الفعلي للخلفية دائمًا أقل من عتبة معروفة.

كل إصلاح يستغرق دقائق. أما دورة التدقيق التي يجنّبها فتستغرق أسابيع.

الأسئلة الشائعة

ما هي نسبة تباين WCAG AA؟

يشترط WCAG AA ≥ 4.5:1 بين نص المتن وخلفيته، أو ≥ 3:1 للنص الكبير (≥ 18pt عادي أو ≥ 14pt غامق) ومكونات الواجهة كحدود الحقول. AA هو خط الأساس القانوني بموجب ADA وEAA وSection 508، ومعظم المواقع التجارية تستهدف AA لأنه يغطي الشريط التنظيمي دون دفع ألوان العلامة نحو التدرج الرمادي.

ما نسبة التباين التي أحتاجها لـ AAA؟

يشترط WCAG AAA ≥ 7:1 لنص المتن العادي و≥ 4.5:1 للنص الكبير. يُوصى بـ AAA للمواقع الطبية والتعليمية والحكومية حيث تميل قاعدة المستخدمين نحو احتياجات إمكانية وصول أعلى. غالبًا ما تحتاج ألوان العلامة إلى تسطيح نحو قيم مجاورة للتدرج الرمادي لكي تنجح في AAA، وهو ما يدفع كثيرًا من المنتجات التجارية إلى التوقف عند AA.

ما هي APCA، وهل هي WCAG 3.0؟

APCA (خوارزمية التباين الإدراكي المتقدم)، صمّمها Andrew Somers / Myndex، هي خوارزمية مرشّحة ضمن مشروع Silver الخاص بـ WCAG 3. تستخدم درجات Lc حساسة للقطبية تتراوح من -108 إلى +108 بدلًا من النسب المتماثلة. لا يزال WCAG 3 في مسوّدة مبكرة ولم تُصادَق APCA رسميًّا، فيبقى WCAG 2.1 / 2.2 AA هو المعيار التنظيمي الذي يجب تحقيقه اليوم.

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

أحيانًا، لكن ليس تلقائيًّا. تجتاز نسبة WCAG 2 المتماثلة التركيبات ذاتها في الوضعَين الفاتح والداكن، لكن APCA (الحسّاسة للقطبية) ترفع راية في الغالب على نص المتن في الوضع الداكن بوصفه أصعب قراءةً من زوج hex نفسه في الوضع الفاتح. اختبر دائمًا الوضع الداكن مقابل WCAG وAPCA معًا قبل الشحن؛ الفاتح على الداكن يفقد تباينًا مُدرَكًا بطرق لا تراها النسبة المتماثلة.

لماذا يرسب لون علامتي التجارية في WCAG AA؟

الألوان المشبعة ذات السطوع المتوسط (معظم البرتقاليات والصفراء والأخضر الليموني والزُّرق الفاتحة) لها قيم سطوع نسبي أقرب إلى الأبيض من أن تجتاز 4.5:1. الحل: احتفظ بتدرج العلامة للتأكيدات والعناوين الكبيرة، لكن اقرن نص المتن بنغمة أغمق من عائلة التدرج نفسه. استخدم OKLCH لخفض قناة L دون إزاحة تدرج اللون؛ يجد محوّل الألوان أقرب ظلٍّ ناجح في خطوة واحدة.

هل نسب WCAG 2 ودرجات APCA متوافقة؟

لا. يُعيد WCAG 2 نسبة متماثلة (1–21)؛ وتُعيد APCA درجة Lc ذات قطبية (-108 إلى +108). العلاقة بينهما غير خطية: زوج بنسبة 4.5:1 في WCAG قد يسجّل Lc 60 أو Lc 75 في APCA بحسب أيّ لون يكون فوق. عاملهما بوصفهما فحصَين مستقلَّين، لا ترجمة لأحدهما عن الآخر.

هل أستطيع استخدام تباين الألوان لأيقونات واجهة صغيرة؟

نعم، مع تحفظات. يشترط WCAG 2.1 §1.4.11 ≥ 3:1 لمكونات الواجهة والكائنات الرسومية. بالنسبة للأيقونات الزخرفية المقرونة بتسمية نصية مرئية، تتراخى متطلبات التباين لأن التسمية تحمل المعنى. أما الأيقونات المستقلة (مثل عدسة بحث بلا تسمية)، فافرض كامل 3:1 مقابل الخلفية المحيطة.

كيف أختبر عمى الألوان دون محاكاة؟

استخدم Chrome DevTools ← Rendering ← «Emulate vision deficiencies» لمحاكاة protanopia وdeuteranopia وtritanopia وachromatopsia. اجمع ذلك مع معاينة CVD ذات الأنواع الثمانية في محوّل الألوان لتغطية حالات الثلاثية الشاذة (deuteranomaly هي الأكثر شيوعًا بنسبة 5% من الرجال). ولأغراض تقارير التدقيق، التقط لقطات شاشة تحت كل محاكاة كي يرى المراجعون أنماط الفشل مدمجة.

الخلاصة

خمس خلاصات تحمل الدليل بأكمله:

• AA 4.5:1 هو الأرضية القانونية. حقّقها لكل نص متن، أو توقّع ضوضاء امتثال.
• AAA 7:1 للرعاية الصحية والتعليم والحكومة. معظم العلامات التجارية تتوقف عند AA عمدًا.
• APCA Lc هو فحص قابلية القراءة الحقيقي. شغّله بالتوازي مع WCAG 2، خاصة للوضع الداكن وألوان العلامة المشبعة.
• لا يكون اللون أبدًا الإشارة الوحيدة. اقرن كل إشارة لونية بشكل أو نص أو نمط؛ deuteranomaly وحدها 5% من المستخدمين الذكور.
• L في OKLCH هو المقبض الصحيح. حين يرسب لون في التباين، قلّل L (لا S ولا B) لإصلاحه دون انزلاق في تدرج اللون.

ضع أيّ زوج من رموز hex في محوّل الألوان لترى نسبة WCAG، وAPCA Lc، وتصنيف الـ gamut، ومعاينة CVD الثمانية جنبًا إلى جنب. تستبدل هذه النظرة الواحدة ستّ أدوات منفصلة، وهي أسرع طريقة لإغلاق التدقيقات التي يتحدث عنها هذا الدليل.