اللون والتباين

النص منخفض التباين هو أكثر إخفاقات إمكانية الوصول شيوعًا على الويب: وجدته WebAIM في 83.9% من أشهر مليون صفحة رئيسية عام 2026. وهو أيضًا الأسهل قياسًا، لأن التباين رقم. يحبّ مصمّمو Ticketly الرمادي الباهت على الأبيض، والأبيض على البرتقالي الفاتح. ومها، بتكبير 400% وضعف في البصر، لا تقرأ هذا ولا ذاك، ولا يقرؤهما أي شخص يتحقّق من تذكرته على هاتفه تحت الشمس.

نسبة التباين

تقارن WCAG الإضاءة النسبية (relative luminance) للونين، وهي مقياس للسطوع المُدرَك من 0 (الأسود) إلى 1 (الأبيض). تتراوح النسبة من 1:1 (لونان متطابقان) إلى 21:1 (أسود على أبيض). هذه هي طريقة الحساب، وهي نفسها التي تشغّلها كل أدوات فحص التباين:

JavaScript

function luminance(hex) {
  const [r, g, b] = [1, 3, 5].map((i) => {
    const c = parseInt(hex.slice(i, i + 2), 16) / 255;
    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
  });
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function contrast(a, b) {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
  return ((hi + 0.05) / (lo + 0.05)).toFixed(2);
}

console.log('price #9a9a9a on white:', contrast('#9a9a9a', '#ffffff'));
console.log('price #767676 on white:', contrast('#767676', '#ffffff'));
console.log('white on orange button:', contrast('#ffffff', '#f4a261'));
console.log('ink on orange button:  ', contrast('#1b1830', '#f4a261'));

القناة الخضراء هي الغالبة في الإضاءة، ولهذا يفشل النص الأبيض على البرتقالي أو الأصفر فشلًا ذريعًا حتى حين يبدو ساطعًا.

العتبات التي تحتاجها

ماذا	المستوى AA	المعيار
النص العادي	4.5:1	1.4.3 Contrast (Minimum)
النص الكبير: 24px على الأقل، أو 18.66px بخط عريض	3:1	1.4.3
إطارات الحقول، ومؤشّرات التركيز، والأيقونات، وخطوط الرسوم البيانية اللازمة لفهم المحتوى	3:1	1.4.11 Non-text Contrast
النص، المستوى المعزَّز	7:1	1.4.6 ‏(AAA)

الاستثناءات ضيّقة: الشعارات، والعناصر الزخرفية البحتة، وعناصر التحكّم المعطّلة. أما نص التلميح داخل الحقول، والتعليقات الرمادية «الثانوية»، وروابط التذييل، والنص فوق الصور، فكلها تُحتسب. وللنص فوق صورة، أضِف طبقة مصمتة أو شبه شفافة خلف النص، وقِس التباين مقابل أفتح جزء من الصورة يمكن أن يقع عليه النص.

إصلاحات Ticketly:

ticketly/styles.css

.price { color: #595959; }                 /* was #9a9a9a: 2.81:1 → 7.00:1 */
.btn { background: #f4a261; color: #1b1830; } /* was white text: 2.06:1 → 8.35:1 */
input { border: 1px solid #77708f; }        /* was #ddd: 1.36:1 → 4.67:1 */

يحتفظ الزر البرتقالي بلون العلامة التجارية؛ ولم يتغيّر إلا لون النص. وهذا عادةً أرخص إصلاح.

لا تعتمد على اللون وحده

يطلب معيار WCAG ‏1.4.1 Use of Color ‏(A) ألا يكون اللون أبدًا الطريقة الوحيدة لنقل المعلومات. نحو رجل من كل 12 وامرأة من كل 200 لديهم شكل من أشكال قصور رؤية الألوان، وأكثرها شيوعًا عمى الأحمر والأخضر.

في Ticketly يستبعد هذا:

الروابط داخل النص التي لا تختلف عن النص المحيط إلا باللون. أبقِ الخط السفلي (أو اضمن تباين 3:1 مع النص المحيط إضافةً إلى إشارة أخرى عند التمرير والتركيز؛ والخط السفلي أبسط بكثير).
الأخطاء التي تظهر كإطار أحمر فقط. أضِف رسالة نصية وأيقونة، مربوطتين كما فعلت في درس نماذج سهلة الوصول.
إتاحة المقاعد كنقاط خضراء وحمراء. أضِف نقشًا أو تسمية: “available”، “taken”.

المعلومات نفسها، مع اللون ومن دونه

وماذا عن APCA؟

ستصادف خوارزمية التباين الإدراكي سهلة الوصول (APCA) في أدوات التصميم. إنها تحاكي الإدراك أفضل من نسبة WCAG 2: تأخذ في الحسبان حجم الخط وسماكته، وتعامل النص الفاتح على الداكن معاملة مختلفة عن الداكن على الفاتح، وهذا مهم للوضع الداكن. وقد دُرست من أجل WCAG 3، التي ما زالت مسودة عمل في W3C.

APCA ليست جزءًا من WCAG 2.2، ولا يستند إليها أي قانون. سيختبر المدقّق صفحاتك بنسبتي 4.5:1 و3:1. استخدم APCA كأداة مساعدة إضافية إن أعجبت فريقك، وخاصةً للخطوط الرفيعة والسمات الداكنة، لكن كل زوج ألوان يجب أن يظلّ ينجح وفق نسبة WCAG 2.

التباين القوي يساعد الناس على رؤية Ticketly بحجمه الافتراضي. ويسأل الدرس التالي ماذا يحدث حين يغيّرون ذلك الحجم، وماذا يحدث حين تتحرّك الصفحة.

الدرس في لمحة

نسبة التباين

العتبات التي تحتاجها

لا تعتمد على اللون وحده

وماذا عن APCA؟

أهم النقاط

قراءات إضافية

تحقّق من فهمك

تدريب

أصلح ألوان تذكرة عطلة نهاية الأسبوع