تباين الألوان المتاح: WCAG بلا رمادي ممل
كيف تُصمِّم وفق معايير تباين WCAG 2.2 دون أن تُحوِّل هوية علامتك التجارية إلى رمادي. النسب، وAPCA، وأمثلة حقيقية من أنظمة التصميم، وسير عمل اختبار قائم على الـ tokens.
الوصول والشخصية التصميمية ليسا في تعارض. هذه هي الأسطورة التي تروّجها معظم فِرق العلامات التجارية لتبرير تجنّب نقاش التباين، وهذا أيضاً هو السبب في أن كثيراً من إعادات التصميم "المتاحة" تنتهي بمظهر لافتات المطارات.
تباين الألوان المتاح هو مشكلة قياس. أنظمة التصميم الحديثة حلّتها بالفعل على مستوى الـ token، مما يعني أنك لست مضطراً للاختيار بين تحقيق معايير WCAG والحفاظ على هوية العلامة التجارية. تحتاج فقط إلى معرفة القواعد، ومعرفة أين تكون القواعد خاطئة، ومعرفة أين يقع العمل الحقيقي.
لماذا التباين هو القاعدة الوحيدة التي لا يمكنك تجاوزها
نحو 300 مليون شخص يرون الألوان بشكل مختلف عما تفترضه لوحة ألوانك الأساسية، وأكثر منهم يستخدمون الواجهات في إضاءة خافتة، أو على شاشات رديئة، أو مع ضعف بصري جزئي لم يُبلَّغ عنه أحد.
انخفاض التباين هو أكثر إخفاقات الوصول شيوعاً على الويب. وهو أيضاً الأسهل في الإصلاح. البقع العمياء، وقصور إدراك الألوان، والوهج، وتقدّم العمر، والشاشات الرخيصة، وضوء الشمس المباشر على شاشة الهاتف. كل هذه العوامل تنتهي إلى حل واحد: تباين كافٍ بين النص والخلفية بحيث تصمد الرسالة في أصعب الحالات، لا على شاشة Retina الخاصة بالمصمم فحسب.
تكلفة الخطأ هنا ليست الإقصاء وحده. إنها التعرّض للمساءلة القانونية. قانون الوصول الأوروبي الصادر عن الاتحاد الأوروبي، والمادة 508 في الولايات المتحدة، وقانون AODA في أونتاريو، وقائمة متنامية من القوانين الوطنية، كلها تستخدم WCAG كمرجع قانوني. التباين هو من أول ما يفحصه أي تدقيق، لأنه من أول ما يُشحَن مكسوراً.
قواعد تباين WCAG 2.2 بلغة بسيطة
يمنحك WCAG ثلاثة أرقام: 4.5:1، و3:1، و3:1، وكل منها ينطبق على نوع محدد من عناصر الواجهة.
| العنصر | الحد الأدنى AA | الحد الأدنى AAA | ملاحظات |
|---|---|---|---|
| نص الجسم | 4.5:1 | 7:1 | أي نص أصغر من 18pt عادي أو 14pt عريض |
| النص الكبير | 3:1 | 4.5:1 | 18pt+ عادي أو 14pt+ عريض |
| مكونات الواجهة والرسومات | 3:1 | غير محدد | الأزرار، الأيقونات، حدود النماذج، حلقات التركيز |
| النص في الشعارات أو الصور الزخرفية | معفى | معفى | عناصر العلامة التجارية والنصوص العَرَضية لا تُحسب |
AA هو المستوى الذي تستهدفه معظم المنتجات التجارية وتشترطه معظم قوانين الوصول. AAA هو هدف أكثر صرامة، يُستخدم في الغالب في أعمال الحكومة والرعاية الصحية والتعليم. ما لم يسلّمك أحدٌ وثيقة امتثال تنص على AAA، فإن AA هو الحد الأدنى.
الفخ الذي يقع فيه معظم المصممين هو نسيان قاعدة 3:1 للعناصر غير النصية. حدود حقل النموذج بنسبة 2:1 مقارنة بخلفية الصفحة تفشل حتى لو اجتازت التسمية الداخلية الاختبار.
حلقة التركيز ذات التباين غير الكافي تفشل. الأيقونة التي يعتمد معناها على اللون بنسبة 2.5:1 تفشل. تباين العناصر غير النصية ليس اختيارياً.
لماذا حسابات WCAG غالباً ما تكون خاطئة
نسب التباين في WCAG هي صيغة عمرها 30 عاماً لا تأخذ الإدراك البصري بعين الاعتبار، وهذا هو سبب نجاحها أحياناً مع ألوان تبدو فظيعة وفشلها مع ألوان تبدو جيدة.
صيغة WCAG 2 مبنية على السطوع فحسب. تتعامل مع النص على الخلفية كعلاقة خطية بين السطوع النسبي للونين. هذا ليس كيف يقرأ الجهاز البصري البشري التباين فعلياً.
التباين الإدراكي الحقيقي يعتمد على وزن الخط وحجمه ودرجة حرارة اللون وما كانت العين تنظر إليه قبل ثانية. WCAG 2 لا يأخذ أياً من هذه العوامل بعين الاعتبار. النتيجة هي نسبة تعامل النص الرمادي الفاتح على أبيض معاملةً مماثلة للنص الأسود على رمادي فاتح، رغم أن أحدهما مقروء والآخر مؤلم.
كيف يحل APCA مشكلة الإدراك
APCA، خوارزمية التباين الإدراكي المتاح، تقيس التباين بالطريقة التي يعمل بها الإدراك البشري الفعلي، وهذا هو سبب اقتراح مسودة WCAG 3 إياها كبديل.
تتراوح درجات APCA من 0 (لا تباين) إلى نحو 108 (تباين مفرط). خلافاً لـ WCAG 2، تأخذ في الاعتبار وزن الخط وحجمه وقطبيته (الفاتح على الداكن مقابل الداكن على الفاتح يؤثران على العين بشكل مختلف).
عتبات APCA التقريبية للنصوص الشائعة:
- نص الجسم (16px عادي): 75+ (مطلوب)، 90+ (مثالي)
- نص صغير (14px عادي): 90+ (مطلوب)
- نص كبير (24px+): 60+ (مطلوب)
- واجهة غير نصية: 45+ كحد أدنى
APCA ليس مطلوباً قانونياً في أي مكان بعد. لكن المنتجات الفعلية تستخدمه بالفعل كمعيار داخلي لأنه يرتبط ارتباطاً أوثق بما يُقرأ جيداً فعلاً. الخطوة الذكية هي تلبية WCAG 2 AA للامتثال وتلبية APCA للجودة الفعلية. تحقيق الهدفين معاً ليس صعباً إذا كانت color tokens لديك مصمّمة لذلك.
أربعة أنظمة تصميم تُرمِّز التباين في الـ tokens
هذه الأنظمة تُدمج الوصول بالفعل في طبقة الـ token، فيختار المصممون دوراً بدلاً من حساب نسبة.
Radix Colors
يُشحَن Radix Colors بمقاييس 12 خطوة مع تحديد دور لكل خطوة مسبقاً. الخطوتان 11 و12 هما خطوتا النص عالي التباين، ومضمون اجتيازهما لـ WCAG AA مقابل الخطوات الأدنى. tokens الأدوار (text، textContrast، solid، solidHover) تعني أن المصممين لا يحسبون نسبة أبداً. يختارون دوراً.
ما يمكن استعارته: نموذج التباين المرقّم حسب الدور. أي مصمم يصل إلى الخطوة 11 يعرف أنها تجتاز الاختبار مقابل الخطوات الأفتح من نفس المقياس. النسبة مُضمَّنة في رقم الخطوة نفسه.
Material Design 3
يقرن Material 3 كل دور لوني بنظيره المُبادِل (on-primary، on-surface، on-error) المضمون تحقيق 4.5:1 مقابل أصله. الـ tokens المُزدوَجة هي طبقة الوصول، مُدمَجة مباشرة في النظام.
ما يمكن استعارته: نمط on-. حين يصل مصمم إلى on-primary للنص، يكون الوصول تلقائياً. لا قرار يمكن أن يُخطئ فيه.
اثنان آخران: النسب والأنظمة الإدراكية
Radix وMaterial يحلّان التباين عبر إقران الأدوار. الاثنان التاليان يحلّانه عبر النسب الموثّقة والمقاييس الإدراكية الموحّدة. كلا النهجين يعملان. كلاهما يستحق الاستعارة منه.
GitHub Primer
يفصل Primer tokens المقدمة والخلفية والحدود إلى مستويات صريحة مع نسب تباين موثّقة. fg.default وbg.default لديهم نُشرت نسبهم الدقيقة، وكل token دلالي قائم على الدور يحظى بالمعاملة ذاتها.
ما يمكن استعارته: نشر النسب بجانب الـ tokens. حين يُوثَّق تباين كل token مقابل كل خلفية ذات صلة، يستطيع المصممون والمطورون تخطّي الفاحص تماماً.
Adobe Spectrum
اطّلع عليه على spectrum.adobe.com
يستخدم Spectrum مقاييس ألوان موحّدة إدراكياً بحيث يكون للـ tokens ذات رقم الخطوة نفسه الوزن البصري ذاته عبر درجات الألوان. وهذا يعني أن تبديل درجات الألوان ضمن ثيم ما يحافظ على علاقات التباين. لا مزيد من "نجح في الأزرق لكن يفشل في البرتقالي".
ما يمكن استعارته: التوحيد الإدراكي. المقاييس المبنية على نماذج إدراكية (مثل HSLuv أو OKLCH أو النهج المخصص في Spectrum) تجعل الوصول قابلاً للنقل عبر ثيمات العلامة التجارية.
كيف تبقى متاحاً دون خسارة الشخصية
الوصول لا يعني نصاً أسود على أبيض وعلامة تجارية باهتة، والفِرق التي تُشحَن منتجاتها الأكثر شمولاً هي تلك التي أدركت ذلك.
الحيلة تكمن في أين في التسلسل يعيش الوصول. إذا عاش في طبقة الـ token، تستطيع العلامة التجارية أن تكون زاهية ولا يزال المصممون يحصلون على مخرجات متاحة. إذا عاش كمراجعة نهائية، يصبح كل لون من ألوان العلامة التجارية مسؤولية تنتظر الفشل في تدقيق.
ثلاث تقنيات تجمع الشخصية والوصول في غرفة واحدة:
- قسِّم مستوى التمييز إلى لون علامة تجارية ولون حركة متاح. تستخدم Linear بنفسجياً محدداً للحظات العلامة التجارية وبنفسجياً مختلفاً قليلاً للعناصر التفاعلية. كلاهما يعكس العلامة بوضوح. واحد فقط مضمون مقابل كل سطح.
- استخدم مقاييس إدراكية موحّدة. تُربط قيم الألوان في OKLCH وHSLuv بالسطوع المُدرَك، حتى تتمكن من التنقل بين درجات الألوان دون كسر التباين. Radix وSpectrum وMaterial 3 تتبع متغيرات من هذا النهج.
- اشحن الوضع الداكن كمجموعة tokens موازية، لا كإضافة لاحقة. token يفشل في الوضع الداكن ليس جاهزاً للوضع الداكن. إذا كان نظامك يُحوِّل
text-defaultإلى لون في الفاتح ولون مختلف في الداكن، يجب أن تجتاز كلتا القيمتين الاختبار مقابل السطح المُزاوَج.
أسوأ نتيجة هي التسوية التي لم يطلبها أحد: علامة تجارية باهتة لا تزال غير متاحة. يحدث ذلك حين تتفاعل الفِرق مع ملاحظات التباين بتشبيع أقل لكل لون بدلاً من إصلاح الأزواج. إزالة التشبيع ليست وصولاً. العلاقات هي الوصول.
سير عمل اختبار الوصول
اختبار التباين رخيص ومُؤتمَت وعديم الجدوى تماماً إذا تركته حتى مراجعة التصميم.
سير العمل الفعّال يُجري فحوصات التباين في أربع نقاط، لا نقطة واحدة.
- عند تعريف الـ token. حين يُنشأ token، تُحدَّد أسطحه المسموح بها أيضاً.
text-defaultمسموح به فقط علىbg-defaultوbg-subtleوbg-raised. يُفحَص تباين الـ token مقابل كل منها مرة واحدة ويُقفَل. - عند commit المكوّن. يُشغِّل Storybook مع تكامل axe-core أو pa11y فحوصات وصول على كل متغير من متغيرات المكوّن كجزء من CI. أي متغير جديد يفشل يُحجَب قبل الدمج.
- عند تسليم ملف التصميم. تُنبِّه إضافات Figma مثل Stark أو فاحص WCAG المُدمَج على المشكلات داخل أداة التصميم. اكتشفها في مرحلة التصميم، لا في مرحلة المراجعة.
- على مستوى الصفحة. يُشغَّل Lighthouse أو axe DevTools أو pa11y على الصفحات الحيّة في البيئة التجريبية أو الإنتاجية. يكتشف هذا حالات الفشل في العالم الحقيقي (تضمينات طرف ثالث، محتوى مُنشأ من المستخدمين، ثيمات ديناميكية) التي تفوت اختبارات المكوّنات.
الهدف ليس تشغيل المزيد من الأدوات. الهدف هو تقديم الفحص في وقت أسبق. فشل التباين الذي يكتشفه خط CI هو إصلاح يستغرق خمس دقائق. الفشل نفسه الذي يُكتشَف في تدقيق ما قبل الإطلاق يكلّف الفريق أسبوعاً.
للسبب الجوهري الذي يجعل هذا النهج المتعدد الطبقات ناجحاً، يتناول دليل أنظمة التصميم لماذا يفوز التفكير على مستوى الـ token. وتشرح قطعة قاعدة 60-30-10 مكسورة لماذا حلّ اللون القائم على الأدوار (الذي يعتمد عليه الوصول) محل التفكير القائم على النسب.
الأسئلة الشائعة
هل AA كافٍ أم أحتاج إلى AAA؟
AA هو المعيار لمعظم المنتجات التجارية ومعظم قوانين الوصول. AAA مطلوب قانونياً فقط في سياقات محددة (الحكومة، الرعاية الصحية، التعليم) ومكلف الوصول إليه دون تسطيح اللوحة. استهدف AA كحد أدنى، وAPCA-ideal كحد أقصى.
هل تحتاج كل عنصر غير نصي إلى تلبية نسب التباين؟
مكونات الواجهة غير النصية التي تنقل معنى تحتاج إلى 3:1 كحد أدنى بموجب WCAG 2.2. يشمل ذلك الأزرار وحدود النماذج وحلقات التركيز والأيقونات ذات المعنى والعناصر الرسومية. الزخرفة البحتة (أنماط الخلفية، التدرجات المحيطة) معفاة. النص العَرَضي (شعار logotype، تراكب تعليق صورة) معفى أيضاً.
ما الفرق بين WCAG وAPCA؟
WCAG 2 هو المعيار القانوني الحالي، مبني على صيغة سطوع عمرها 30 عاماً. APCA هو البديل المقترح في مسودة WCAG 3، مبني على كيفية عمل الإدراك البشري الفعلي. ترتبط درجات APCA ارتباطاً أوثق بسهولة القراءة الحقيقية لكنها ليست مطلوبة قانونياً بعد. المنتجات الفعلية تستخدم كليهما: WCAG 2 للامتثال، وAPCA للجودة.
أدمج الوصول في الـ Tokens
تباين الألوان المتاح ليس خياراً أسلوبياً. إنه خاصية النظام.
الفِرق التي تُشحَن منتجاتها الأكثر شمولاً وحيوية في العلامة التجارية هي تلك التي توقفت عن التعامل مع الوصول كإضافة لاحقة وبدأت تتعامل معه كخاصية في لوحة الألوان نفسها.
الـ tokens تُرمِّز النسب. المقاييس تُرمِّز الأزواج. الاختبار يحدث في أربع نقاط في سير العمل. لا أحد يرفع فاحص تباين أمام شاشة قبيل الإطلاق.
إذا كانت عمليتك الحالية تتضمن مصمماً يقيّم لوحة بالعين لمعرفة إن كانت "تبدو مقروءة"، ستفشل في تدقيق. إذا كانت عمليتك تتضمن أداة فاحص ومراجعات يدوية، ستفشل على نطاق واسع. إذا كانت عمليتك تتضمن tokens قائمة على أدوار تُرمِّز الوصول في طبقة التعريف، ستُشحَن.
ابنِ الـ tokens. انشر النسب. أتمِت الفحوصات. تبقى العلامة التجارية زاهية، وتبقى الواجهة مقروءة، ويصبح التدقيق إجراءً شكلياً بدلاً من إعادة بناء كاملة.
Need a color system that hits WCAG without flattening the brand? Brainy builds token-layer accessibility into every palette.
Get Started
