كان أول خطأ في إمكانية الوصول قمت بشحنه على الإطلاق هو الطابع الزمني باللون الرمادي الفاتح على بطاقة بيضاء. لقد بدا أنيقًا في فيجما، وبدا جيدًا على شاشتي المعايرة، وكان غير مرئي تمامًا للعميل الذي يقرأ البريد الإلكتروني على هاتفه في سيارة متوقفة. كان '؛ر ضعاف البصر. لقد كان مجرد ضوء الشمس. علمتني تذكرة الدعم الفردية هذه شيئًا لم يتمكن نموذج التصميم من تحقيقه أبدًا: التباين ليس مسألة ذوق، بل هو خاصية قابلة للقياس، وإذا كنت تفعل ذلك '؛ وقمت بقياسه فأنت تقوم بشحن التخمينات.
ومنذ ذلك الحين قمت ببناء مدقق تباين الألوان في Toolz.dev، تم إدخال قواعد التباين السلكية في الرموز المميزة للتصميم لـ WP Adminify، وتم تدقيق مكونات React أكثر مما يهمني حسابه. هذا الدليل هو نسخة تلك التجربة التي أتمنى لو سلمني إياها شخص ما في البداية. وهو يشرح ما هي نسبة التباين في الواقع، وكيف يتم حساب الرقم، وما هي WCAG تعني الحدود وكيفية إصلاح زوج الألوان الفاشل دون التخلص من لوحة علامتك التجارية.
ليرة تركية؛DR: تباين WCAG هو نسبة من 1:1 إلى 21:1 بناءً على النصوع النسبي للونين. بالنسبة للنص الأساسي العادي، تحتاج إلى 4.5:1 على الأقل لتمرير AA و7:1 لتمرير AAA. ينخفض النص الكبير (حوالي 24 بكسل، أو 18.66 بكسل غامق) إلى 3:1 لـ AA و4.5:1 لـ AAA. تحتاج الرموز وحدود الإدخال غير النصية إلى 3:1. قم بقياس كل زوج نص في الخلفية، وتعامل مع AA كشريط تمرير، ودع الأداة تقترح لون تمرير عندما تقصر.
لماذا يهم تباين الألوان كثيرا؟
التباين هو الفشل الوحيد الأكثر شيوعًا في إمكانية الوصول على الويب. سنة بعد سنة، تجد عمليات التدقيق الآلي لأفضل مليون صفحة رئيسية أن النص منخفض التباين هو أكثر انتهاكات WCAG شيوعًا بفارق كبير. كما أنه يؤثر على معظم الأشخاص، لأنه لا يتعلق فقط بالمستخدمين المسجلين كفيفًا. يتعلق الأمر بأي شخص يعاني من ضعف الرؤية منذ العمر، وأي شخص يعاني من حالة شائعة مثل إعتام عدسة العين، وأي شخص يستخدم شاشة رخيصة، وأي شخص في غرفة مشرقة، وكل واحد منا عندما تضرب الشمس الشاشة.
هناك زاوية عمل أيضًا، ولن أتظاهر بخلاف ذلك. يشير قانون إمكانية الوصول الآن إلى WCAG مباشرة في العديد من المناطق، مما يعني أن الواجهة التي يتعذر الوصول إليها هي عرض قانوني، وليست مجرد مشكلة مجاملة. لكن السبب الذي يجعلني أهتم، والسبب الذي جعلني أبني أداة مخصصة لها، هو أبسط. النص الذي لا يستطيع الأشخاص قراءته هو النص الذي فشل في وظيفته الوحيدة. الواجهة الرائعة التي لا يمكن لأحد استخدامها ليست إنجازًا في التصميم.
الفخ هو أن أعيننا رواة غير موثوقين. نحن نتكيف مع شاشاتنا الخاصة، ونعرف ما يفترض أن يقوله النص، فيملأه دماغنا، وننظر إلى التصاميم في ظروف مثالية. نسبة التباين تزيل كل ذلك. فهو يعطيك رقمًا لا يهتم بشاشتك أو توقعاتك.
ما هي نسبة التباين بالضبط؟
نسبة التباين هي مقارنة بين النصوع النسبي للونين: المقدمة (عادةً النص) وخلفيتك. النصوع النسبي هو مقياس لمقدار الضوء الذي ينبعث منه اللون أو يعكسه، مرجحًا لكيفية إدراك العين البشرية فعليًا للأحمر والأخضر والأزرق. يساهم اللون الأخضر بشكل أكبر في السطوع المدرك، والأزرق هو الأقل، ولهذا السبب فإن قراءة النص الأزرق النقي على الأسود أصعب بكثير من قراءة النص الأخضر النقي.
يتم تعريف النسبة نفسها بواسطة WCAG على النحو التالي
(L1 + 0.05) / (L2 + 0.05)
أين L1 هو النصوع النسبي للون الفاتح و L2 هو ذلك من الظلام. ال 0.05 مصطلحات نموذج الضوء المحيط المنعكس عن الشاشة، ولهذا السبب لا يصل المقياس أبدًا إلى ما لا نهاية. تنتج الألوان المتطابقة نسبة 1:1 بالضبط. النص الأسود النقي على الأبيض النقي يعطي الحد الأقصى 21:1. كل شيء حقيقي يعيش بين هذين النقيضين.
الشيء المهم الذي يجب استيعابه هو أن النسبة ليست خطية مع كيفية "؛ مختلف وحاصل؛ يبدو لونان بمعنى اللون. يمكن أن يكون هناك لونان مختلفان تمامًا في اللون - على سبيل المثال اللون الأحمر المشبع والأخضر المشبع - ولا يزال لهما نفس النصوع تقريبًا، مما يجعلهما كابوسًا لسهولة القراءة على الرغم من أنهما يتصادمان بعنف. التباين يدور حول اختلاف الخفة، وليس اختلاف اللون. وهذا هو بالضبط سبب عدم قدرتك على النظر إليه، ولماذا مدقق تباين الألوان يحول كلا اللونين إلى نصوع قبل إجراء أي مقارنة.
كيف يتم حساب الرقم فعليا؟
إذا كنت تريد فهم الأداة بدلاً من مجرد الثقة بها، فإليك المسار الكامل، الذي يتبع تعريفات WCAG 2.2 تمامًا.
أولاً، يتم تطبيع كل قناة لونية من النطاق 0 main255 إلى 0 main1. ثم يتم جعل كل قناة خطية للتراجع عن منحنى جاما sRGB. تطبق الصيغة مقطعًا خطيًا صغيرًا للقيم المظلمة جدًا ومنحنى طاقة للباقي
c_linear = c / 12.92 if c <= 0.03928
c_linear = ((c + 0.055) / 1.055) ^ 2.4 otherwise
بعد ذلك، يتم دمج القنوات الخطية الثلاث مع معاملات النصوع التي تعكس الإدراك البشري
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
هذه الأوزان ليست اعتباطية. إنها تأتي من الطريقة التي تستجيب بها الخلايا المخروطية للعين '؛ لأطوال موجية مختلفة، ولهذا السبب يهيمن اللون الأخضر. وأخيرًا، يتم توصيل قيمتي النصوع بصيغة النسبة أعلاه، مع وجود القيمة الأخف في الأعلى.
هناك دقة واحدة تعرقل الناس، وهي الشفافية. نسبة التباين ذات معنى فقط بين لونين غير شفافين، لأن اللون شبه الشفاف '؛ يعتمد المظهر الحقيقي على كل ما يكمن خلفه. إذا كان لون النص الخاص بك له قيمة ألفا، فلا يمكنك قياسه مباشرة. النهج الصحيح، والذي تتبعه الأداة، هو تركيب المقدمة الشفافة فوق الخلفية أولاً باستخدام المزج القياسي للمصدر، ثم قياس النسبة مقابل النتيجة المسطحة. وهذا يطابق ما يراه المستخدم بالفعل بدلاً من اللون الذي قمت بتعيينه اسميًا.
ما هي عتبات WCAG التي أحتاج إلى الوصول إليها؟
يحدد WCAG متطلبات التباين على مستويين من المطابقة ولثلاثة أنواع واسعة من المحتوى. وهنا الصورة كاملة في مكان واحد.
| نوع المحتوى | الحد الأدنى AA | الحد الأدنى AAA |
|---|---|---|
| نص عادي (أقل من ~ 24px) | 4.5:1 | 7:1 |
| نص كبير (~24px، أو ~18.66px غامق) | 3:1 | 4.5:1 |
| مكونات واجهة المستخدم والرسومات | 3:1 | 3:1 (لا يوجد AAA منفصل) |
| الشعارات والنص العرضي | معفى | معفى |
بعض الملاحظات من تطبيق هذا الجدول عدة مرات. "؛ نص كبير واقتباس؛ يتم تعريفه من خلال الحجم المعروض، وليس من خلال مدى أهمية النص. العتبة هي 18pt للوزن العادي و14pt غامقة، والتي تترجم إلى 24px و18.66px تقريبًا. أي شيء عند أو أعلى يحصل على شريط مريح 3:1 لـ AA، لأن أشكال الحروف الأكبر تظل مقروءة عند تباين أقل.
قاعدة مكونات واجهة المستخدم هي معيار النجاح 1.4.11، وهي القاعدة التي تنساها الفرق في أغلب الأحيان. تقول إن الحدود المرئية للمكون التفاعلي - حدود إدخال النص، ومخطط الزر، وشكل الأيقونة التي تنقل المعنى - تحتاج إلى 3:1 مقابل المناطق المحيطة بها. لا يزال النموذج المليء بنص التسمية الذي يمرر AA مع حدود الإدخال غير المرئية يفشل، وقد رأيت ذلك بالضبط في الإنتاج أكثر من مرة.
وأخيرًا، يتم إعفاء النص المزخرف وعناصر التحكم المعطلة والشعارات. هذا الإعفاء ضيق. ملصق الزر باللون الرمادي جيد؛ فقرة منخفضة التباين اتصلت بها "؛ ثانوي وحاصل؛ ليس كذلك.
كيف يمكنني استخدام مدقق تباين الألوان؟
يستغرق سير العمل الذي أستخدمه يوميًا حوالي عشر ثوانٍ لكل زوج. افتح مدقق تباين الألوان وأدخل لون النص في الحقل الأول. يمكنك لصق أي تنسيق - مثل سداسي عشري مكون من ستة أرقام #4b5563، سداسي مكون من ثمانية أرقام مع ألفا، و rgb() أو rgba() سلسلة، أ hsl() القيمة، أو كلمة رئيسية CSS عادية مثل navy. تقوم الأداة بتطبيع كل ما تقدمه لها، حتى تتمكن من مزج التنسيقات بحرية بين الحقلين.
أدخل لون الخلفية الخاصة بك في الحقل الثاني. في اللحظة التي يكون فيها كلاهما صالحًا، تظهر النسبة الدقيقة جنبًا إلى جنب مع عينة حية من النص الكبير والعادي والتعليق المعروض على خلفيتك الفعلية. هذه المعاينة مهمة. يخبرك الرقم بما إذا كان يمر أم لا، لكن رؤية كلمات حقيقية على اللون الحقيقي يخبرك ما إذا كان مريحًا، وهو شريط أعلى من مجرد شريط قانوني.
أقل من النسبة، تحصل على شبكة من شارات النجاح والفشل: AA وAAA لكل من النص العادي والكبير، بالإضافة إلى فحص مكون واجهة المستخدم بنسبة 3:1. إذا فشلت المجموعة، توفر الأداة إصلاحًا بنقرة واحدة. فهو يمشي بلون النص الخاص بك أفتح أو أغمق في مساحة HSL - مع الحفاظ على اللون والتشبع الذي اخترته - حتى يمسح النسبة المستهدفة، ثم يسلمك قيمة تمرير يمكنك نسخها مباشرة في ورقة الأنماط الخاصة بك. هذا الجزء الأخير هو الفرق بين المدقق الذي يوبخك والمدقق الذي يساعدك بالفعل: فهو يحافظ على لون علامتك التجارية سليمًا ولا يحرك إلا الخفة بالحد الأدنى المطلوب.
كل شيء يعمل محليًا في متصفحك. لا تترك أي ألوان أو لوحات أو قيم للعلامة التجارية غير منشورة جهازك، وهو أمر مهم عندما تقوم بمراجعة نظام تصميم ما قبل الإطلاق للعميل '؛s. إنه نفس أسلوب الخصوصية أولاً الذي أستخدمه عبر كل أداة على الموقع، وكتبت عن سبب أهمية هذه البنية في دليل خصوصية البيانات.
حالات الاستخدام الشائعة من المشاريع الحقيقية
تدقيق نظام التصميم والرموز المميزة #39؛s
عندما أقوم بإعداد رموز ملونة لمشروع جديد، أقوم بالتحقق من كل اقتران دلالي قبل أن يأتي مكون واحد: النص الأساسي في الخلفية، النص الصامت في الخلفية، النص في الأساسي، النص على البطاقة، النص على كل متغير تنبيه. الرمز المميز الذي يفشل مرة واحدة يفشل في كل مكان يتم استخدامه فيه، لذا فإن التقاطه على مستوى الرمز المميز أرخص بكثير من التقاطه لكل مكون. أحتفظ بقائمة مرجعية بسيطة وأقوم بتشغيل كل زوج من خلال المدقق، وتسجيل النسبة بجوار اسم الرمز المميز.
إنقاذ لون العلامة التجارية الذي "؛ لديه to"؛ يستخدم
يمنحك التسويق علامة تجارية زرقاء ويقول إن الأزرار يجب أن تستخدمها. اختبرت النص الأبيض عليه وحصلت على 3.1:1 - جيد للنص الكبير، وتفشل في تسمية الزر بالحجم الطبيعي. لديك ثلاثة خيارات صادقة: تغميق العلامة التجارية باللون الأزرق قليلاً للأسطح التفاعلية، أو استخدام ملصق أكبر أو أكثر جرأة بحيث يتم تطبيق عتبة 3:1، أو تبديل الملصق إلى لون أغمق إذا كان الزر فاتحًا. تجد ميزة اقتراح الأداة '؛ أقرب ظل تمرير حتى تتمكن من إظهار التسويق لتغيير ملموس وبسيط بدلاً من التغيير المسطح؛ لا.&اقتباس؛
التحقق من العنصر النائب والنص المساعد
يعد نص العنصر النائب مخالفًا متكررًا لأن المتصفحات تعرضه بعتامة منخفضة افتراضيًا، ثم يختار المصممون لونًا رماديًا فاتحًا بالفعل فوق ذلك. تذكر اختبار النتيجة المركبة، وليس اللون الاسمي. يقوم تركيب ألفا checker'؛s بذلك نيابةً عنك: أدخل لون العنصر النائب بعتامة حقيقية على خلفية الإدخال واقرأ النسبة الحقيقية.
التحقق من رؤية الأيقونة والحدود
بالنسبة لفحص واجهة المستخدم 1.4.11، أقوم باختبار لون الأيقونة أو الحدود مقابل كل ما يقع خلفها مباشرة. مقسم رمادي على بطاقة بيضاء، وشيفرون على رأس ملون، وحلقة التركيز على الحقل - كل هذه تحتاج إلى 3:1. إنه فحص سريع يلتقط "؛ كل شيء موجود من الناحية الفنية ولكن يمكنني '؛ شاهد أيًا منه واقتبس؛ فئة الخطأ.
كيف يمكن مقارنة ذلك باستخدام أداة التصميم '؛s المدمجة في الفحص؟
أضافت أدوات التصميم مؤشرات تباين، وتظهر أدوات تطوير المتصفح نسبة في منتقي الألوان، لذا فإن السؤال العادل هو لماذا تصل إلى أداة مخصصة على الإطلاق. وهنا المقارنة الصادقة بلدي.
| يقترب | قوة | حدود |
|---|---|---|
| مدقق تباين مخصص | النسبة الدقيقة، جميع العتبات، تركيب ألفا، اقتراحات تمرير الألوان، تعمل على أي سلسلة ألوان | يمكنك لصق الألوان يدويًا |
| البرنامج المساعد لأداة التصميم | تماشيا مع اللوحة الفنية الخاصة بك | غالبًا ما يكون تقريبيًا، وقد يتجاهل ألفا، المرتبط بهذا التطبيق |
| أدوات تطوير المتصفح | يتحقق من الصفحة المعروضة مباشرة | زوج واحد في كل مرة، بدون اقتراحات، يتطلب وجود الصفحة أولاً |
| مقلة العين ذلك | سريع | خطأ، باستمرار |
تفوز الأداة المخصصة عندما تعمل من القيم بدلاً من الصفحة المعروضة - مراجعة الرموز المميزة، أو التحقق من المواصفات، أو إصلاح خطأ تم الإبلاغ عنه - وكلما كنت بحاجة إلى بديل تمرير بدلاً من مجرد حكم. تصبح أدوات تطوير المتصفح أفضل بمجرد وجود الصفحة وتريد التحقق من ما تم شحنه بالفعل. أستخدم كليهما في مراحل مختلفة.
ملاحظات متقدمة للفرق التي تهتم
لقد تعلمت بعض الأشياء التي تتجاوز الأساسيات. أولاً، التباين ضروري ولكنه ليس كافياً. اجتياز 4.5:1 يزيل حاجزًا واحدًا؛ لا يجعل الواجهة قابلة للوصول من تلقاء نفسها. لا تزال بحاجة إلى حالات تركيز مرئية، ولا يزال يتعين عليك تجنب نقل المعنى من خلال اللون وحده، ولا تزال بحاجة إلى اختبار حقيقي باستخدام تقنية مساعدة حقيقية. تعامل مع النسبة كأرضية، وليس كخط نهاية.
ثانيا، الوضع المظلم ليس حرا. يمكن أن تفشل اللوحة التي تمر في الوضع الفاتح في الوضع المظلم لأن علاقات النصوع تنعكس. تحقق من كلا الموضوعين. يوجد تبديل معاينة الخلفية المظلمة لـ checker'؛s على وجه التحديد لأنني ظللت أنسى ذلك.
ثالثًا، كن حذرًا من "؛ قريب بما فيه الكفاية."؛ نسبة 4.48:1 هي نسبة فشل وليست فوزًا تقريبيًا. تختلف الشاشات، ويختلف المستخدمون، ويكون الحد الأدنى به هامش مدمج لسبب ما. إذا كنت على الحدود، تجاوزها.
إذا كنت تقوم بتجميع مجموعة أدوات أوسع، فإن دليل مجموعة أدوات مطور الويب يغطي مدى ملاءمة التباين جنبًا إلى جنب مع عمليات التحقق الأخرى التي تستحق التشغيل الآلي. وبمجرد مرور الألوان الخاصة بك، أدوات مثل مولد التدرج و منتقي الألوان ساعدك في إنشاء بقية اللوحة على أساس قمت بالتحقق منه بالفعل. إذا كنت تقوم أيضًا بإنشاء بيانات تعريف الصفحة والمعاينات الاجتماعية، فإن مولد العلامات أزواج جيدة في نفس تمريرة ما قبل الإطلاق.
أسئلة وأجوبة
ما هي نسبة تباين الألوان الجيدة؟
بالنسبة للنص الأساسي العادي، اهدف إلى تحقيق مستوى 4.5:1 على الأقل لتلبية مستوى WCAG AA و7:1 لتلبية مستوى AAA الأكثر صرامة. النص الكبير، الذي يعني حوالي 24 بكسل أو 18.66 بكسل غامق، يحتاج فقط إلى 3:1 لـ AA و4.5:1 لـ AAA. تحتاج الأيقونات ومكونات واجهة المستخدم التفاعلية إلى 3:1 على الأقل مقابل المناطق المحيطة بها.
ما الذي يعتبر نصًا كبيرًا تحت WCAG؟
النص الكبير هو 18pt على الأقل، أي 24 بكسل تقريبًا، للوزن العادي، أو 14بت على الأقل، أي 18.66 بكسل تقريبًا، عندما يكون غامقًا. النص بهذا الحجم أو أعلى منه مؤهل لعتبة AA المريحة 3:1 لأن أشكال الحروف الأكبر تظل مقروءة بتباين أقل من الأشكال الصغيرة.
ما هو الفرق بين WCAG AA و AAA؟
AA هو المستوى الذي تستهدفه معظم القوانين والمنظمات ويتطلب 4.5:1 للنص العادي. AAA هو المستوى المحسن ويتطلب 7:1، وهو ما يناسب المحتوى الذي يستهدف المستخدمين ذوي الرؤية الضعيفة ولكن يصعب الوصول إليه عبر لوحة الألوان بأكملها. تتعامل معظم الفرق مع AA باعتباره شريط التمرير وAAA باعتباره طموحًا لمحتوى القراءة النقدي.
كيف يتم حساب نسبة التباين؟
يتم تحويل كل لون إلى نصوعه النسبي WCAG، وهو مقياس سطوع مصحح بأشعة جاما ومرجح إدراكيًا. النسبة هي (L_lighter + 0.05) مقسومة على (L_darker + 0.05)، مما ينتج قيمة من 1:1 للألوان المتطابقة إلى 21:1 للأسود النقي على الأبيض النقي.
هل تؤثر الشفافية على نتيجة التباين؟
نعم. يتيح لون النص شبه الشفاف للخلفية الظهور من خلاله، مما يغير لونها الفعال. الطريقة الصحيحة هي تركيب المقدمة الشفافة فوق الخلفية أولاً، ثم قياس النسبة، بحيث تعكس النتيجة ما يراه المستخدم بالفعل بدلاً من اللون الاسمي الذي قمت بتعيينه.
لماذا يمر النص الخاص بي بحجم كبير ولكنه يفشل بالحجم الطبيعي؟
تختلف العتبات. يحتاج النص العادي إلى 4.5:1 لـ AA بينما يحتاج النص الكبير إلى 3:1 فقط، لذا فإن النسبة بين 3 و4.5 تمر للعناوين ولكنها تفشل في النسخ الأساسي. إما رفع التباين للنص الأساسي أو التأكد من استخدام الاقتران فقط في الأحجام الكبيرة حيث تنطبق العتبة المريحة.
هل نسبة التباين العابرة كافية لإمكانية الوصول؟
لا، التباين ضروري ولكنه ليس كافيا. تحتاج أيضًا إلى حالات تركيز مرئية، ويجب عليك تجنب نقل المعنى بالألوان وحدها، ويجب عليك الاختبار باستخدام المحتوى الحقيقي والتكنولوجيا المساعدة. يؤدي اجتياز النسبة إلى إزالة حاجز مشترك واحد ولكنه لا يجعل الوصول إلى الواجهة في حد ذاته أمرًا سهلاً.
هل يرسل مدقق تباين الألوان ألواني إلى أي مكان؟
لا. يتم تشغيل جميع عمليات التحليل والرياضيات محليًا في متصفحك باستخدام JavaScript. لا يتم تحميل أو تخزين أي قيم ألوان أو لوحات علامات تجارية أو لقطات شاشة، وتستمر الأداة في العمل دون أي اتصال بالشبكة بمجرد تحميل الصفحة.
