مدقّق تباين الألوان

افحص تباين ألوان WCAG في متصفحك

يقيس مدقق تباين الألوان هذا نسبة التباين وفق معيار WCAG بين لوني النص والخلفية، ويخبرك فوراً ما إذا كان الزوج يجتاز مستويَي AA وAAA للنص العادي والنص الكبير ومكونات واجهة المستخدم. أدخل قيمة سادسية، أو حرّر حقول RGB وHSL، أو اسحب شريط الإضاءة، أو استخدم أداة قطارة العين لالتقاط أي لون على شاشتك — تتحدث نسبة التباين ومصفوفة النتائج والمعاينة المباشرة أثناء الكتابة.

يعمل مثل الأدوات التي يثق بها المصممون بالفعل — رياضيات WCAG ذاتها المستخدمة في WebAIM وAdobe Color — لكنه يضيف معاينة مقروءة مباشرة، ودرجة APCA (WCAG 3)، وإصلاحاً بنقرة واحدة للأزواج الفاشلة. يعمل كل شيء محلياً في JavaScript: ألوانك لا تغادر جهازك أبداً ولا حاجة لأي حساب.

شرح عتبات WCAG AA وAAA

تتراوح نسبة تباين WCAG بين 1:1 (لونان متطابقان) و21:1 (أسود على أبيض). المستوى AA — المعيار الذي تشترطه معظم القوانين كقانون ADA والمادة 508 — يستلزم 4.5:1 للنص العادي و3:1 للنص الكبير. أما المستوى AAA فيرفع ذلك إلى 7:1 و4.5:1. النص الكبير هو 18pt (24px) فأكثر، أو 14pt (نحو 18.66px) فأكثر بخط غامق.

تفصّل مصفوفة النتائج كل عتبة بشكل منفصل، حتى ترى بلمحة واحدة أن اللون الرمادي #767676 على خلفية بيضاء يجتاز AA لنص الجسم بنسبة 4.54:1 لكنه يقصر عن 7:1 المطلوبة لـ AAA. إن كان فريقك مطالباً بالامتثال القانوني (ADA أو EN 301 549 أو المادة 508)، فإن AA هو الحد الأدنى المطلوب تجاوزه.

ابقَ في المعاينة وصحح الألوان وأطلقها

الأرقام وحدها لا تكفي، لذا تعرض المعاينة المباشرة عناوين حقيقية ونصاً أساسياً ونصاً صغيراً وزراً وشريحة نموذجية بألوانك الفعلية — لترى مدى القراءة، لا لتكتفي بقراءة النسبة. حين يفشل زوج ما، يحافظ مقترح 'اجعله يجتاز' على تدرج لونك وإشباعه ويضبط الإضاءة نحو أقرب لون يتجاوز المستوى المختار (AA أو AA كبير أو AAA)، ثم يطبقه بنقرة واحدة.

تقبل شبكة الأزواج لوحةً كاملة وتُظهر بلمحة واحدة أي مجموعات الألوان تجتاز الاختبار — مفيد عند بناء نظام تصميم يستلزم أن يكون كل ثنائي (مقدمة وخلفية) آمناً. بدلاً من اختبار عشرات الأزواج واحداً تلو الآخر، تلصق لوحتك مرة واحدة وترى المصفوفة الكاملة فوراً.

APCA: لمحة عن تباين WCAG 3

إلى جانب النسبة الكلاسيكية، يعرض هذا المدقق درجة APCA Lc — مقياس التباين الإدراكي المقترح لـ WCAG 3. يحاكي APCA كيفية قراءة العين فعلياً للنص الفاتح على خلفية داكنة مقارنةً بالنص الداكن على خلفية فاتحة، ويأخذ وزن الخط في الاعتبار، فيكتشف مشكلات قراءة قد يغفلها معيار WCAG 2. إرشادات تقريبية: Lc 75+ لنص الجسم، وLc 60+ للنص الكبير، وLc 45+ للعناوين الكبيرة.

لا يزال WCAG 3 في طور المسودة ولم يحل محل WCAG 2.2، لذا يعني الامتثال اليوم استيفاء عتبتَي 4.5:1 و3:1. إظهار APCA إلى جانب النسب الحالية يمكّنك من تهيئة لوحتك للمستقبل دون انتظار اعتماد المعيار.

التباين غير النصي للأيقونات ومكونات الواجهة

لا يقتصر التباين على النصوص. تشترط WCAG 2.1 SC 1.4.11 تباين 3:1 لحدود المكونات التفاعلية — حواف حقول الإدخال ومؤشرات التركيز وحالات التبديل — وللأيقونات والرسومات ذات المعنى. تتضمن المصفوفة فحصاً مخصصاً لـ واجهة المستخدم والرسومات بنسبة 3:1 لتأكيد أن محيط الزر أو الأيقونة مرئي.

هذا مجال يفشل فيه كثير من الفرق في عمليات التدقيق دون أن يدركوا ذلك. حافة حقل إدخال رمادية فاتحة (#D1D1D1 على خلفية بيضاء تعطي 1.4:1) انتهاك شائع لمعيار WCAG 2.1 حتى لو كان كل نص الصفحة يجتاز الاختبار. فحص مكونات واجهتك هنا يستغرق ثوانٍ ويجنّبك المفاجآت في عمليات التدقيق الرسمية.

مقارنة مع WebAIM وAdobe Color وChrome DevTools

مدقق تباين WebAIM على webaim.org هو أكثر أداة إمكانية وصول مجانية مرجعاً وتستخدم معادلة WCAG 2 ذاتها. غير أنه لا يعرض APCA ولا تتوفر معاينة نص مباشرة، كما لا يمكنه إصلاح الأزواج الفاشلة تلقائياً.

أدوات إمكانية الوصول في Adobe Color تعرض نتائج AA/AAA وتتضمن محاكي عمى الألوان، لكنها تستلزم حساب Adobe مجانياً لحفظ الأعمال ولا تقترح لوناً مجتازاً تلقائياً.

Chrome DevTools تحتوي على شارة نسبة التباين في منتقي الألوان بلوحة العناصر — مفيدة للفحص داخل المتصفح، لكن فقط داخل DevTools.

يعمل هذا المدقق دون تسجيل دخول، ويعرض نسب WCAG 2 ودرجة APCA Lc معاً، ويقدم معاينة مباشرة بألوانك، ويتيح اختبار شبكة لوحة كاملة في نظرة واحدة. جميع الحسابات تعمل محلياً في JavaScript.