تباين الألوان لإمكانية الوصول، مع أداة الفحص

لماذا تحتاج هذا

قد يبدو سطر من النص الرمادي على صفحة بيضاء أنيقًا على شاشتك، ثم يتعذّر قراءته على هاتف تحت الشمس، أو لقارئ ضعيف البصر أو لديه قصور في رؤية الألوان. التباين هو الجزء القابل للقياس من هذه المشكلة. وتحوّله إرشادات إتاحة محتوى الويب (WCAG) إلى رقم هو نسبة التباين، مع حدود نجاح يمكنك فحصها قبل إطلاق التصميم.

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

الطريقة، مع الأداة

تضم أدوات الألوان ثلاثة تبويبات: لوحة الألوان والتدرج والتحويل والتباين. يقع فحص التباين في التبويب الثالث، ويعمل على جهازك.

1. افتح «التحويل والتباين». اختر التبويب تحت العنوان.
2. أدخل لونيك. حدّد لون النص ولون الخلفية. يمكنك الكتابة في حقول HEX أو RGB أو HSL فيتبعها الحقلان الآخران، فتصلح قيمة منسوخة من ملف تصميم بأي من الصيغ.
3. حدّد هل النص كبير. فعّل نص كبير (18pt فأكبر، أو 14pt عريض) إن انطبق ذلك.
4. اقرأ الأحكام. تعرض الأداة نسبة التباين وسطرين هما AA — الحد الأدنى للتباين وAAA — التباين المحسّن، يحمل كل منهما ناجح أو غير كافٍ.
5. عدّل وشارك. غيّر لونًا واحدًا وراقب تحدّث الحكم. ونسخ رابط هذه النتيجة يحفظ الإعدادات في رابط يمكنك إرساله إلى زميل.

وإن كنت ما زلت تختار الألوان، فابنِ لوحة أساسية في تبويب لوحة الألوان باستخدام تناغم مثل متكاملة أو متجاورة، ثم انقل الأزواج التي تنوي استخدامها إلى تبويب التباين. تناغمات الألوان تختار درجات تبدو متوازنة، لا أزواجًا مقروءة معًا، لذلك افحص أزواج النص دائمًا.

ما يجب الانتباه إليه

العتبات. للنص العادي، يشترط المستوى AA في WCAG نسبة 4.5:1 على الأقل. ويشترط المستوى AAA نسبة 7:1. ويُعدّ النص كبيرًا عند 18pt فأكثر، أو 14pt فأكثر إن كان عريضًا. والنص الكبير يحتاج 3:1 فقط للمستوى AA و4.5:1 للمستوى AAA. وتمتد النسبة من 1:1، أي لونان متطابقان، إلى 21:1، أسود على أبيض. وحد 3:1 نفسه هو ما تضعه WCAG لأجزاء الواجهة ذات المعنى، كحدود حقل الإدخال، علمًا أن الأداة لا تقارن إلا اللونين اللذين تكتبهما.

الفشل بفارق ضئيل يبقى فشلًا. النسبة 4.4 لا تبلغ حد 4.5. لا تقرّبها إلى الأعلى. إذا فشل لون العلامة التجارية بفارق ضئيل، فأغمق النص أو أفتح الخلفية قليلًا، ثم افحص من جديد.

كيف يُحسب الرقم. تقارن النسبة اللمعان النسبي للونين، وهو مقياس لمدى سطوع كل منهما، بعد تحويل كل لون من قيمته المخزّنة في sRGB إلى ضوء خطي. وفي هذا التحويل نقطة قطع صغيرة. تستخدم الأداة القيمة 0.03928، وهي المطبوعة في نص WCAG 2.x. أما معيار sRGB الأحدث فيعطي 0.04045. والفرق بينهما ضئيل لدرجة أن النسب لا تفترق إلا في الخانات العشرية البعيدة، لكن اعتماد قيمة WCAG يُبقي نتائج هذه الأداة متوافقة مع الأرقام المنشورة في WCAG.

التحويل بين الصيغ قد يغيّر قناة بمقدار واحد. تستخدم HEX وRGB وHSL قيمًا من 8 بت، لذلك قد تحرّك الرحلة ذهابًا وإيابًا قناة بمقدار 1. هذا تقريب لا عطل، ولن يغيّر الحكم إلا إذا كنت على الحد تمامًا.

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

الفحص يشمل اللونين اللذين تدخلهما فقط. فهو لا يعرف شيئًا عن صورة خلف النص أو طبقة فوقه أو بقية التصميم.

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

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

4.5:1 على الأقل لتحقيق المستوى AA، و7:1 للمستوى AAA. وإذا كان النص كبيرًا، أي 18pt فأكثر أو 14pt فأكثر بخط عريض، فإن 3:1 تحقق AA و4.5:1 تحقق AAA. فعّل نص كبير في الأداة لتطبّق زوج العتبات الصحيح.

لماذا تقول الأداة إن لونيّ غير كافيين بينما يبدوان جيدين لي؟

شاشتك وبصرك وإضاءة الغرفة ليست كما هي عند القارئ. النسبة معيار قابل للتكرار لا يعتمد على أي شاشة بعينها. إذا فشل زوج فاعتبر الرقم هو الحقيقة وعدّل الألوان، بدل الاعتماد على مظهره على شاشتك.

هل يشمل ذلك نص العنصر النائب أو الزر المعطّل؟

العناصر المعطّلة مستثناة في WCAG، لكن نص العنصر النائب نص حقيقي ويحتاج تباينًا كافيًا ليُقرأ. وعند الشك افحص الزوج، وفضّل تسمية ظاهرة على تعليمات تقتصر على العنصر النائب.