{"id":"l-a11y-4-1","courseId":"web-accessibility","lang":"ar","kind":"lesson","summary":"قِس تباين النصوص وعناصر الواجهة وأصلحه وفق نسب WCAG 2.2، وتوقّف عن الاعتماد على اللون وحده، وافهم لماذا لم يصبح APCA جزءًا من المعيار بعد.","html":"

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

\n

نسبة التباين

\n

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

\n
JavaScript
function luminance(hex) {\n  const [r, g, b] = [1, 3, 5].map((i) => {\n    const c = parseInt(hex.slice(i, i + 2), 16) / 255;\n    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n}\n\nfunction contrast(a, b) {\n  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);\n  return ((hi + 0.05) / (lo + 0.05)).toFixed(2);\n}\n\nconsole.log('price #9a9a9a on white:', contrast('#9a9a9a', '#ffffff'));\nconsole.log('price #767676 on white:', contrast('#767676', '#ffffff'));\nconsole.log('white on orange button:', contrast('#ffffff', '#f4a261'));\nconsole.log('ink on orange button:  ', contrast('#1b1830', '#f4a261'));
\n

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

\n

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

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

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

\n

إصلاحات Ticketly:

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

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

\n\n

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

\n

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

\n

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

\n\n
\n إلى اليسار: نقاط المقاعد التي لا تختلف إلا باللون تبدو متطابقة بالتدرّج الرمادي. إلى اليمين: المقاعد المتاحة دوائر مفرّغة والمقاعد المحجوزة دوائر ممتلئة عليها علامة ×، فتبقى مميّزة دون لون، مع مفتاح بالكلمات.\n اللون فقط\n \n \n \n \n أيّ المقاعد متاح؟\n \n الشكل + التسمية\n \n \n \n \n \n \n \n متاح\n \n محجوز\n
المعلومات نفسها، مع اللون ومن دونه
\n

وماذا عن APCA؟

\n

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

\n

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

\n\n

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

\n","toc":[{"id":"sec-1","text":"نسبة التباين","level":2},{"id":"sec-2","text":"العتبات التي تحتاجها","level":2},{"id":"sec-3","text":"لا تعتمد على اللون وحده","level":2},{"id":"sec-4","text":"وماذا عن APCA؟","level":2}],"takeaways":["النص العادي يحتاج إلى نسبة تباين لا تقلّ عن 4.5:1 مع خلفيته؛ والنص الكبير (24px، أو 18.66px بخط عريض) يحتاج إلى 3:1.","إطارات حقول الإدخال ومؤشّرات التركيز والأيقونات وخطوط الرسوم البيانية التي يحتاج الناس إلى رؤيتها تتطلّب 3:1 مع ما يحيط بها (1.4.11 Non-text Contrast).","لا يجوز أن يكون اللون الطريقة الوحيدة لعرض المعلومات؛ أرفقه بنص أو أيقونة أو خط سفلي أو نقش.","APCA نموذج واعد لقياس التباين الإدراكي يُدرَس لـ WCAG 3، لكن WCAG 2.2 والقوانين التي تستند إليها تستخدم نسبتي 4.5:1 و3:1."],"further":[{"title":"W3C: Understanding 1.4.3 Contrast (Minimum)","url":"https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html"},{"title":"W3C: Understanding 1.4.11 Non-text Contrast","url":"https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html"},{"title":"W3C: Understanding 1.4.1 Use of Color","url":"https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html"},{"title":"WebAIM Contrast Checker","url":"https://webaim.org/resources/contrastchecker/"}],"quiz":[{"q":"

أسعار Ticketly بلون #767676 على خلفية بيضاء، بنسبة 4.54:1، وبحجم 16px وخط عادي. هل يحقّق ذلك معيار 1.4.3 Contrast (Minimum)؟

","options":[{"text":"نعم، لأن 4.54 لا تقلّ عن 4.5","why":"صحيح. العتبة حدّ أدنى لا هدف مقرَّب، فنسبة 4.54:1 تنجح للنص بالحجم العادي. وهو أفتح رمادي ينجح على الأبيض."},{"text":"لا، لأن النص بحجم 16px يحتاج إلى 7:1","why":"نسبة 7:1 هي المستوى AAA ‏(1.4.6 Contrast Enhanced). أما المستوى AA فيشترط 4.5:1 للنص العادي."},{"text":"لا، لأن النص الرمادي لا ينجح أبدًا","why":"التباين يعتمد على نسبة الإضاءة، لا على درجة اللون أو تشبّعه. والرماديات الداكنة بما يكفي تنجح بسهولة."},{"text":"فقط إن كان النص عريضًا","why":"الخط العريض لا يخفّض الاشتراط إلى 3:1 إلا حين لا يقلّ حجمه عن 18.66px ‏(14pt). عند 16px، عريضًا كان أم لا، العتبة 4.5:1."}],"answer":0},{"q":"

إطار حقل في نموذج بلون #dddddd على صفحة بيضاء (1.36:1). نص الـ label تباينه ممتاز. ما الذي يفشل؟

","options":[{"text":"لا شيء، لأن الإطارات زخرفية","why":"الإطار هو الشيء الوحيد الذي يُظهر مكان الحقل. والمعلومات البصرية اللازمة لتمييز عنصر ما يجب أن تحقّق 3:1."},{"text":"1.4.3 Contrast (Minimum)، لأن كل الألوان في الصفحة يجب أن تصل إلى 4.5:1","why":"معيار 1.4.3 ينطبق على النص. أما العناصر غير النصية مثل الإطارات فيغطّيها 1.4.11 بنسبة 3:1."},{"text":"1.4.11 Non-text Contrast، لأن الإطار الذي يميّز حقل الإدخال يحتاج إلى 3:1 على الأقل","why":"صحيح. إطار مثل #77708f ‏(4.67:1) يجعل حدود الحقل مرئية لضعاف البصر."}],"answer":2},{"q":"

تعلِّم صفحة الدفع في Ticketly الحقول غير الصالحة بإطار أحمر ولا شيء غيره. من يخذله هذا التصميم بأوضح صورة؟

","options":[{"text":"لا أحد، إن كان للأحمر تباين 3:1 مع الخلفية","why":"التباين يساعد الناس على رؤية الإطار، لا على تمييز الأحمر من لون الإطار العادي. ويبقى اللون وحده هو حامل المعنى."},{"text":"المستخدمون المصابون بعمى الألوان الأحمر والأخضر، ومستخدمو قارئ الشاشة الذين لا يحصلون على أي نص","why":"صحيح. نحو رجل من كل 12 لديه شكل من أشكال قصور رؤية الألوان. أضِف رسالة خطأ وأيقونة وaria-invalid، كما في درس النماذج."},{"text":"مستخدمو لوحة المفاتيح فقط، لأنهم لا يرون الإطار أثناء الكتابة","why":"مستخدمو لوحة المفاتيح يرون الإطار جيدًا. العائق هو أن اللون الإشارة الوحيدة."}],"answer":1},{"q":"

تقترح مصمّمة فحص كل زوج ألوان بـ APCA بدلًا من نسبة التباين في WCAG 2. ماذا تقول لها؟

","options":[{"text":"لا بأس؛ فقد حلّ APCA محلّ نسبة التباين في WCAG 2.2","why":"ما زالت WCAG 2.2 تستخدم نسبتي 4.5:1 و3:1. وAPCA ليس جزءًا من أي إصدار منشور من WCAG."},{"text":"APCA محظور من W3C، فلا يجوز استخدامه","why":"لا شيء يحظره. إنه نموذج بحثي يمكنك استخدامه كأداة تصميم إضافية."},{"text":"APCA لا يعمل إلا في الوضع الداكن، فاستخدميه هناك","why":"يعمل APCA مع أي قطبية؛ وهذه إحدى نقاط قوّته. المشكلة أن التوافق ما زال يُقاس بنسبة WCAG 2."},{"text":"استخدمي APCA كأداة مساعدة إضافية إن شئتِ، لكن الألوان يجب أن تظلّ تحقّق نسب WCAG 2، لأنها ما تستخدمه WCAG 2.2 والقانون","why":"صحيح. دُرس APCA من أجل WCAG 3، التي ما زالت مسودة. وتدقيقات اليوم تختبر نسبة التباين في WCAG 2."}],"answer":3}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"
\n

Weekend pass

\n

SAR 320 for both nights

\n

Includes entry to the harbour lounge and a free drink token.

\n \n \n \n
","css":"body { background: #ffffff; }\n.pass { display: grid; gap: 8px; justify-items: start; max-width: 340px; }\n.pass h2 { margin: 0; }\n.pass p { margin: 0; }\n.price { color: #9a9a9a; }\n.note a { color: #1b1830; text-decoration: none; font-weight: 600; }\ninput { font: inherit; padding: 6px 8px; border: 1px solid #dddddd; border-radius: 6px; background: #ffffff; }\n.btn { font: inherit; padding: 8px 16px; border: 0; border-radius: 8px; background: #f4a261; color: #ffffff; }\n","js":""},"solution":{"html":"
\n

Weekend pass

\n

SAR 320 for both nights

\n

Includes entry to the harbour lounge and a free drink token.

\n \n \n \n
","css":"body { background: #ffffff; }\n.pass { display: grid; gap: 8px; justify-items: start; max-width: 340px; }\n.pass h2 { margin: 0; }\n.pass p { margin: 0; }\n.price { color: #595959; }\n.note a { color: #1b1830; text-decoration: underline; font-weight: 600; }\ninput { font: inherit; padding: 6px 8px; border: 1px solid #77708f; border-radius: 6px; background: #ffffff; }\n.btn { font: inherit; padding: 8px 16px; border: 0; border-radius: 8px; background: #f4a261; color: #1b1830; }\n","js":""},"checks":[{"id":"price","test":"const rgb = (c) => { const cv = document.createElement('canvas'); cv.width = cv.height = 1; const x = cv.getContext('2d'); x.fillStyle = '#fff'; x.fillRect(0, 0, 1, 1); x.fillStyle = c; x.fillRect(0, 0, 1, 1); return [...x.getImageData(0, 0, 1, 1).data].slice(0, 3); }; const lum = (c) => { const [r, g, b] = rgb(c).map((v) => { v /= 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; }); return 0.2126 * r + 0.7152 * g + 0.0722 * b; }; const ratio = (a, b) => { const [hi, lo] = [lum(a), lum(b)].sort((m, n) => n - m); return (hi + 0.05) / (lo + 0.05); }; const bg = (el) => { while (el) { const c = getComputedStyle(el).backgroundColor; if (c && c !== 'transparent' && !/rgba\\(.*,\\s*0\\)$/.test(c)) return c; el = el.parentElement; } return '#ffffff'; }; const el = $('.price'); return ratio(getComputedStyle(el).color, bg(el)) >= 4.5;"},{"id":"button","test":"const rgb = (c) => { const cv = document.createElement('canvas'); cv.width = cv.height = 1; const x = cv.getContext('2d'); x.fillStyle = '#fff'; x.fillRect(0, 0, 1, 1); x.fillStyle = c; x.fillRect(0, 0, 1, 1); return [...x.getImageData(0, 0, 1, 1).data].slice(0, 3); }; const lum = (c) => { const [r, g, b] = rgb(c).map((v) => { v /= 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; }); return 0.2126 * r + 0.7152 * g + 0.0722 * b; }; const ratio = (a, b) => { const [hi, lo] = [lum(a), lum(b)].sort((m, n) => n - m); return (hi + 0.05) / (lo + 0.05); }; const bg = (el) => { while (el) { const c = getComputedStyle(el).backgroundColor; if (c && c !== 'transparent' && !/rgba\\(.*,\\s*0\\)$/.test(c)) return c; el = el.parentElement; } return '#ffffff'; }; const el = $('.btn'); return ratio(getComputedStyle(el).color, bg(el)) >= 4.5;"},{"id":"input-border","test":"const rgb = (c) => { const cv = document.createElement('canvas'); cv.width = cv.height = 1; const x = cv.getContext('2d'); x.fillStyle = '#fff'; x.fillRect(0, 0, 1, 1); x.fillStyle = c; x.fillRect(0, 0, 1, 1); return [...x.getImageData(0, 0, 1, 1).data].slice(0, 3); }; const lum = (c) => { const [r, g, b] = rgb(c).map((v) => { v /= 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; }); return 0.2126 * r + 0.7152 * g + 0.0722 * b; }; const ratio = (a, b) => { const [hi, lo] = [lum(a), lum(b)].sort((m, n) => n - m); return (hi + 0.05) / (lo + 0.05); }; const bg = (el) => { while (el) { const c = getComputedStyle(el).backgroundColor; if (c && c !== 'transparent' && !/rgba\\(.*,\\s*0\\)$/.test(c)) return c; el = el.parentElement; } return '#ffffff'; }; const el = $('input'); const cs = getComputedStyle(el); return parseFloat(cs.borderTopWidth) > 0 && cs.borderTopStyle !== 'none' && ratio(cs.borderTopColor, bg(el.parentElement)) >= 3;"},{"id":"link-cue","test":"const rgb = (c) => { const cv = document.createElement('canvas'); cv.width = cv.height = 1; const x = cv.getContext('2d'); x.fillStyle = '#fff'; x.fillRect(0, 0, 1, 1); x.fillStyle = c; x.fillRect(0, 0, 1, 1); return [...x.getImageData(0, 0, 1, 1).data].slice(0, 3); }; const lum = (c) => { const [r, g, b] = rgb(c).map((v) => { v /= 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; }); return 0.2126 * r + 0.7152 * g + 0.0722 * b; }; const ratio = (a, b) => { const [hi, lo] = [lum(a), lum(b)].sort((m, n) => n - m); return (hi + 0.05) / (lo + 0.05); }; const bg = (el) => { while (el) { const c = getComputedStyle(el).backgroundColor; if (c && c !== 'transparent' && !/rgba\\(.*,\\s*0\\)$/.test(c)) return c; el = el.parentElement; } return '#ffffff'; }; const a = $('.note a'); const cs = getComputedStyle(a); const p = getComputedStyle(a.parentElement); const underlined = cs.textDecorationLine.includes('underline') || (parseFloat(cs.borderBottomWidth) > 0 && cs.borderBottomStyle !== 'none'); return underlined && ratio(cs.color, bg(a)) >= 4.5;"}],"title":"أصلح ألوان تذكرة عطلة نهاية الأسبوع","prompt":"

عدّل الـ CSS فقط لتحقّق بطاقة Weekend pass معيار WCAG 2.2 بالمستوى AA:

\n\n

تحسب الفحوص نسب تباين حقيقية من الأنماط المحسوبة، فتُقبل أي ألوان تنجح.

\n","hints":["على الأبيض، أي رمادي بلون #767676 أو أغمق ينجح في 4.5:1.","الأبيض على #f4a261 لا يتجاوز 2.06:1. أما النص الداكن على البرتقالي نفسه فيتجاوز 8:1 بفارق كبير.","إطار بلون #77708f يعطي نحو 4.7:1 على الأبيض. وللرابط، text-decoration: underline أبسط إشارة."],"explanation":"

تغميق السعر إلى #595959 يرفعه من 2.81:1 إلى 7:1. ويحتفظ الزر ببرتقالي العلامة التجارية وينتقل إلى نص داكن (8.35:1)، وهذا عادةً أرخص من تغيير لون العلامة التجارية. وينتقل إطار الحقل من 1.36:1 إلى 4.67:1، فيستطيع ضعاف البصر العثور على الحقل (1.4.11). ويستعيد الرابط خطه السفلي، فيمكن تمييزه دون الاعتماد على اختلاف اللون أو السماكة (1.4.1). ويمكنك لصق أي من هذه الأزواج في دالة التباين من الدرس لترى الأرقام.

\n","checkLabels":{"price":"نص السعر يصل إلى 4.5:1 مقابل خلفيته","button":"نص الزر يصل إلى 4.5:1 مقابل لون الزر","input-border":"إطار الحقل يصل إلى 3:1 مقابل خلفية البطاقة","link-cue":"للرابط خط سفلي (أو إطار سفلي) وتباين نصي 4.5:1"}},"words":567,"readMinutes":3}