تباين الألوان القابل للوصول: WCAG دون الرمادي الممضوغ
كيف تصمم لتباين WCAG 2.2 دون تسطيح علامتك التجارية. نسب وAPCA وأمثلة من أنظمة تصميم حقيقية وسير عمل اختبار مُرمّز.
إمكانية الوصول وشخصية التصميم ليستا في تعارض. هذه هي الأسطورة التي تحكيها معظم فرق العلامات التجارية لنفسها عندما تتجنّب محادثة التباين، وهي أيضًا السبب في أن كثيرًا من إعادات التسمية "القابلة للوصول" تنتهي شبيهة بلافتات المطارات.
تباين الألوان القابل للوصول هو مشكلة قياس. لقد حلّت أنظمة التصميم الحديثة هذه المشكلة بالفعل في طبقة التوكن، ما يعني أنك لست مضطرًا للاختيار بين تلبية 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 للجودة الفعلية. تحقيق الهدفين معًا ليس صعبًا إذا كانت توكنات الألوان مصممة لذلك.
أربعة أنظمة تصميم تحوّل التباين إلى توكنات
هذه الأنظمة ترمّز إمكانية الوصول بالفعل في طبقة التوكن، فيختار المصممون دورًا بدلاً من حساب نسبة.
Radix Colors
تقدم Radix Colors مقاييس من 12 درجة مع تخصيص كل درجة مسبقًا لدور. الدرجتان 11 و12 هما درجتا النص العالي التباين، مضمون أن تجتاز WCAG AA مقابل الدرجات الأدنى. توكنات الدور (text، textContrast، solid، solidHover) تعني أن المصممين لا يحسبون نسبة أبدًا. يختارون دورًا.
ما الذي تسرقه: نموذج التباين-حسب-الدور المرقّم. أي مصمم يمدّ يده إلى الدرجة 11 يعرف أنها تجتاز مقابل الدرجات الأفتح في نفس المقياس. النسبة مُرمّزة في رقم الدرجة ذاته.
Material Design 3
شاهده مباشرة على m3.material.io
يقرن Material 3 كل دور لون بنظير on- (on-primary، on-surface، on-error) مضمون أن يلبي 4.5:1 مقابل أصله. التوكنات المقترنة هي طبقة إمكانية الوصول، مبنية مباشرة داخل النظام.
ما الذي تسرقه: نمط on-. عندما يمدّ المصمم يده إلى on-primary من أجل نص، إمكانية الوصول تلقائية. لا يوجد قرار يمكن الخطأ فيه.
اثنان إضافيان: النسب والأنظمة الإدراكية
Radix وMaterial يحلّان التباين عبر اقتران الأدوار. الاثنان التاليان يحلّانه عبر نسب موثّقة ومقاييس إدراكية موحّدة. كلا النهجين يعمل. كلاهما جدير بالسرقة.
GitHub Primer
يفصل Primer توكنات المقدّمة والخلفية والحدود في طبقات صريحة بنسب تباين موثّقة. fg.default وbg.default لديهم مُنشَرين بنسب دقيقة، وكل توكن دلالي مبني على الأدوار له نفس المعاملة.
ما الذي تسرقه: نشر النسب بجوار التوكنات. عندما يكون تباين كل توكن مقابل كل خلفية ذات صلة موثّقًا، يمكن للمصممين والمطورين تخطّي أداة الفحص تمامًا.
Adobe Spectrum
شاهده مباشرة على spectrum.adobe.com
يستخدم Spectrum مقاييس ألوان إدراكيًا موحّدة بحيث يكون لتوكنين بنفس رقم الدرجة نفس الثقل البصري عبر درجات الألوان. هذا يعني أن تبديل درجات اللون داخل سِمة يحافظ على علاقات التباين. لم تعد تسمع "نجح بالأزرق لكنه فشل بالبرتقالي".
ما الذي تسرقه: التوحيد الإدراكي. المقاييس المبنية على نماذج إدراكية (مثل HSLuv، أو OKLCH، أو نهج Spectrum المخصص) تجعل إمكانية الوصول قابلة للنقل بين سمات العلامة التجارية.
كيف تحافظ على إمكانية الوصول دون فقدان الشخصية
إمكانية الوصول لا تعني نصًا أسود على خلفية بيضاء وعلامة تجارية مُخفّضة الألوان، والفرق التي تُطلق أكثر المنتجات شمولية هي تلك التي فهمت ذلك.
الحيلة في أين تعيش إمكانية الوصول في المكدّس. إذا عاشت في طبقة التوكن، يمكن أن تكون العلامة التجارية نابضة ويحصل المصممون على مخرجات قابلة للوصول. إذا عاشت كمراجعة نهائية، فكل لون علامة تجارية هو عبء ينتظر إخفاق التدقيق.
ثلاث تقنيات تُبقي الشخصية وإمكانية الوصول في الغرفة ذاتها:
- قسّم طبقة اللون المميّز إلى لون علامة تجارية ولون إجراء قابل للوصول. تستخدم Linear درجة بنفسجية محددة للحظات العلامة ودرجة بنفسجية مختلفة قليلاً للعناصر التفاعلية. كلتاهما معروفتان كعلامة. واحدة فقط مضمونة مقابل كل سطح.
- استخدم مقاييس موحّدة إدراكيًا. OKLCH وHSLuv يُربطان قيم الألوان بالسطوع المُدرَك، ويمكنك تدوير درجات الألوان دون كسر التباين. Radix وSpectrum وMaterial 3 يفعلون صيغًا من هذا.
- أطلق الوضع الداكن كمجموعة توكنات موازية، لا كفكرة لاحقة. التوكن الذي يفشل في الوضع الداكن ليس جاهزًا للوضع الداكن. إذا كان نظامك يحلّ
text-defaultإلى لون في الوضع الفاتح ولون مختلف في الداكن، فيجب أن تجتاز كلتا القيمتين مقابل سطحها المقرون.
أسوأ نتيجة هي التسوية التي لم يطلبها أحد: علامة تجارية مُخفّضة الألوان وما زالت غير قابلة للوصول. يحدث ذلك حين تتفاعل الفرق مع ملاحظات التباين بإزالة تشبّع كل لون بدلاً من إصلاح الاقترانات. إزالة التشبّع ليست إمكانية وصول. العلاقات هي.
سير عمل اختبار إمكانية الوصول
اختبار التباين رخيص ومُؤتمَت وعديم الفائدة تمامًا إذا أجّلته حتى مراجعة التصميم.
سير العمل الذي يعمل يُجري فحوصات التباين عند أربع نقاط، لا نقطة واحدة.
- عند تعريف التوكن. عند إنشاء توكن، تُحدَّد الأسطح المسموح بها له أيضًا.
text-defaultمسموح به فقط علىbg-defaultوbg-subtleوbg-raised. يُفحص تباين التوكن مقابل كلٍّ منها مرة واحدة ويُقفل. - عند commit المكوّن. Storybook مع تكامل axe-core أو pa11y يُجري فحوصات إمكانية الوصول على كل نوع مكوّن كجزء من CI. أي نوع جديد يفشل يُحجب قبل الدمج.
- عند تسليم ملف التصميم. إضافات Figma مثل Stark أو مُدقّق WCAG المدمج تُبرز المشكلات داخل أداة التصميم. التقطها وقت التصميم، لا وقت المراجعة.
- على مستوى الصفحة. Lighthouse أو axe DevTools أو pa11y يعمل على صفحات حيّة في staging أو الإنتاج. هذا يلتقط الإخفاقات الواقعية (تضمينات الأطراف الثالثة، المحتوى الذي ينتجه المستخدم، السمات الديناميكية) التي تفوتها اختبارات المكوّنات.
النقطة ليست تشغيل مزيد من الأدوات. النقطة هي تحريك الفحص إلى وقت أبكر. إخفاق تباين يكتشفه خط CI هو إصلاح بخمس دقائق. نفس الإخفاق حين يُلتقط في تدقيق ما قبل الإطلاق يُكلّف الفريق أسبوعًا.
للسبب البنيوي وراء نجاح هذا النهج الطبقي، يغطي دليل أنظمة التصميم لماذا تنتصر فكرة طبقة التوكن. ومقالة قاعدة 60-30-10 معطّلة تشرح لماذا حلّ اللون المبني على الأدوار (الذي تعتمد عليه إمكانية الوصول) محل التفكير المبني على النسب.
الأسئلة الشائعة
هل WCAG AA كافٍ أم أحتاج إلى AAA؟
AA هو المعيار لمعظم المنتجات التجارية ومعظم قوانين إمكانية الوصول. AAA مطلوب قانونيًا فقط في سياقات محددة (حكومية، صحية، تعليمية) ومُكلف التحقيق دون تسطيح اللوحة. اجعل AA أرضية و APCA-المثالي سقفًا.
هل يجب أن يلبي كل عنصر غير نصي نسب التباين؟
مكوّنات واجهة المستخدم غير النصية التي تنقل معنى تحتاج إلى 3:1 كحد أدنى بموجب WCAG 2.2. يشمل ذلك الأزرار، وحدود النماذج، وحلقات التركيز، والأيقونات ذات المعنى، والعناصر الرسومية. الزخرفة البحتة (أنماط الخلفية، والتدرجات المحيطية) مُعفاة. النص العَرَضي (كـ شعار كتابي، تعليق صورة كتراكب) معفى أيضًا.
ما الفرق بين WCAG وAPCA؟
WCAG 2 هو المعيار القانوني الحالي، مبني على صيغة لمعان عمرها 30 عامًا. APCA هو البديل المقترح في مسودة WCAG 3، مبني على الطريقة التي يعمل بها الإدراك البشري فعلًا. نتائج APCA تترابط أفضل مع القراءة الحقيقية لكنها ليست مطلوبة قانونيًا بعد. المنتجات في الإنتاج تستخدم الاثنين: WCAG 2 للامتثال، APCA للجودة.
اخبز إمكانية الوصول في التوكنات
تباين الألوان القابل للوصول ليس اختيارًا أسلوبيًا. هو خاصية نظام.
الفرق التي تُطلق أكثر المنتجات شمولاً وأكثرها تعبيرًا عن العلامة التجارية هي تلك التي توقّفت عن معاملة إمكانية الوصول كفكرة لاحقة وبدأت تعاملها كخاصية لـ لوحة الألوان نفسها.
التوكنات ترمّز النسب. المقاييس ترمّز الاقترانات. الاختبار يقع عند أربع نقاط في سير العمل. لا أحد يرفع مُدقّق تباين أمام شاشة قبل إطلاق.
إذا كانت عمليتك الحالية تتضمّن مصممًا يُدقّق في لوحة بحثًا عمّا "يبدو مقروءًا"، فأنت ستُخفق في تدقيق. إذا تضمنت عمليتك أداة فحص مع مراجعات يدوية، فأنت ستُخفق على نطاق واسع. إذا تضمنت عمليتك توكنات مبنية على الأدوار تُرمّز إمكانية الوصول في طبقة التعريف، فأنت ستُطلق.
ابنِ التوكنات. انشر النسب. أتمتت الفحوصات. تظل العلامة التجارية نابضة، وتظل الواجهة مقروءة، ويصبح التدقيق إجراءً شكليًا بدل إعادة بناء.
Need a color system that hits WCAG without flattening the brand? Brainy builds token-layer accessibility into every palette.
Get Started
