مدقق التباين

الدليل الكامل لتباين الألوان وسهولة القراءة

التباين هو أكثر إصلاح إمكانية وصول تأثيرًا على الويب — والأكثر فشلًا شيوعًا. فالنص الرمادي الفاتح على خلفيات بيضاء يبدو «نظيفًا» للمصممين وغير مقروء لملايين الزوار، بمن فيهم أي شخص فوق الأربعين وأي شخص في ضوء شمس ساطع وحوالي 5% من الناس ذوي الرؤية المنخفضة. ويشرح هذا الدليل المعيار والرياضيات وكيف تصلح الإخفاقات دون تدمير تصميمك.

معيار WCAG بلغة عادية

يحدد WCAG 2.x مستويي امتثال للتباين. المستوى AA (الذي تشير إليه القوانين — بما فيها قانون إمكانية الوصول الأوروبي وقضايا ADA في الولايات المتحدة) يتطلب نسبة 4.5:1 للنص العادي و3:1 للنص الكبير. المستوى AAA (المعيار الذهبي) يتطلب 7:1 و4.5:1 على التوالي. والشعارات والنصوص الزخرفية البحتة مستثناة — لكن إذا نقلت معلومات، فيجب أن تنجح. وملاحظة: سيستبدل WCAG 3.0 (في المسودة) النسب في النهاية بنموذج APCA جديد، لكن النسب تبقى المعيار القابل للتنفيذ اليوم.

لماذا يفشل التباين كثيرًا

ثلاثة جناة: الموضة (الرماديات الفاتحة جدًا رائجة في معارض الأعمال) وألوان العلامات المستخدمة بكامل قوتها للنصوص (فبرتقالي علامة زاهٍ يبرز كزر يفشل كنص 12px) والنصوص فوق الصور حيث تختلف الخلفية — فبقعة ساطعة في صورة قد تدمر المقروئية بصمت. والإصلاح للصور: تراكب داكن شبه شفاف أو ستار صلب خلف النص، ثم إعادة اختبار أسوأ منطقة.

أبعد من النسبة: مقروئية واقعية

النسبة ضرورية لكن غير كافية. فأوزان الخطوط الرفيعة (100–300) تحتاج إلى تباين أكثر مما تفترضه الصيغة — فضّل 400+ لنص المتن. والنص الصغير جدًا (تحت 12px) يجهد حتى عند نسب ناجحة. والشاشات اللماعة وضوء الشمس والشاشات الرخيصة تخفض التباين فعليًا، لذا عامل 4.5:1 كأرضية لا هدف — فنص متن 7:1 أريح بشكل ملحوظ للجميع، لا فقط لمن لديهم إعاقات.

إصلاح الإخفاقات برشاقة

لا تعيد التصميم من الصفر. حرّك: أغمق النص بنسبة 10–20% إضاءة أو أضف عتامة إلى صبغات الخلفية — وعادة ما يكفي ذلك لعبور العتبة مع البقاء على العلامة. وللروابط، تذكر أن اللون وحده لا يستطيع تمييزها (استخدم التسطير أيضًا). وللأزرار المعطلة والعناصر النائبة، التباين المنخفض متوقع — لكن تأكد من أن السبب يُبلَّغ بطريقة أخرى. واختبر لوحتك النهائية بتدرج رمادي: فإذا ظل التسلسل الهرمي مقروءًا، فتباينك يؤدي وظيفته.

من يساعد هذا (تلميح: الجميع)

تساعد تحسينات إمكانية الوصول أبعد بكثير من المستفيدين الاسميين: فالتسميات التوضيحية تساعد في المقاهي الصاخبة والتباين العالي يساعد في ضوء الشمس وحالات التركيز الواضحة تساعد مستخدمي لوحة المفاتيح الأقوياء. ويعيش حوالي 15% من سكان العالم مع إعاقة ما — فالتصميم للتباين هو تصميم لسدس جمهورك، بالإضافة إلى كل من يمر بيوم شاشة سيئ.