فاحص التباين (درجات WCAG AA / AAA)

كيف تعمل نسبة التباين

تُعرِّف WCAG (إرشادات إمكانية الوصول إلى محتوى الويب) التباينَ بوصفه نسبة بين الإضاءة النسبية للونَيْن. تُحوِّل المعادلة كل قناة sRGB خطيًا، وتُوازنها بحسب حساسية العين البشرية (R 0.2126، G 0.7152، B 0.0722)، ثم تحسب (أفتح + 0.05) / (أغمق + 0.05). تتراوح النتيجة من 1:1 (متطابق) إلى 21:1 (أسود على أبيض).

نحسب هذا في متصفحك باستخدام المعادلة الرسمية لـ WCAG 2.x. تفحص شارات الدرجات الأربع بمقابل عتبات AA البالغة 4.5:1 (عادي) و3:1 (كبير)، وعتبات AAA البالغة 7:1 (عادي) و4.5:1 (كبير). 'النص الكبير' هو 24px / 18pt، أو 18.66px / 14pt عريض.

لماذا الاجتياز على مستوى AA كحد أدنى

AA هو المستوى القابل للتطبيق قانونيًا في كثير من الولايات القضائية (ADA الأمريكي، EU EN 301 549، قانون المساواة البريطاني للخدمات الرقمية). فشل AA على نص الجسم هو أكثر مشكلات إمكانية الوصول شيوعًا والأسهل إصلاحًا أثناء التصميم بدلًا من ما بعد الإطلاق.

يُوصى بـ AAA للقراءة الطويلة وخدمات الحكومة والواجهات ذات المخاطر العالية. صارم — الرمادي الفاتح على الأبيض الذي يُفضِّله المصمم أول الأمر عادةً ما يفشل AAA بسهولة. إذا كان موقعك يُقدِّم معظمه محتوى للقاء السريع، استهدف AA؛ إذا تنشر كتبًا أو مقالات أو معلومات حيوية، استهدف AAA.

الأخطاء الشائعة

'يبدو جيدًا على شاشتي.' الشاشات المُعايَرة والأضواء الفلورية في المكاتب والاستخدام الخارجي للهواتف الذكية كلها تُغيِّر التباين المُدرَك. استخدم النسبة لا عينيك.

تصميم الوضع المظلم بعكس أكواد hex. العكس يُغيِّر درجة اللون ويكسر التباين. أعِد اختبار كل زوج ألوان بعد تبديل السمات.

الوثوق بإرشادات العلامة التجارية. اختُيرت كثير من لوحات العلامات التجارية قبل الوعي بـ WCAG. إذا فشل اللون الوردي على أبيض، اقترح وردياً أغمق قليلًا لنص الجسم واحتفظ بالأصلي للاستخدام الزخرفي.