فاحص تباين الألوان
تحقق مما إذا كانت ألوان النص والخلفية تلبي معايير الوصول WCAG.
نص عينة كبير
هذا نص عادي يُستخدم لمعاينة سهولة القراءة بحجم أصغر.
نسبة التباين
النص الصعب القراءة ليس مسألة ذوق — إنه فشل إمكانية وصول قابل للقياس، وأحد أشيعها على الويب. النص الرمادي الفاتح على خلفية بيضاء يبدو نظيفًا لمصمم بشاشة جيدة في غرفة خافتة، وهو غير مقروء حقًا لمن لديه ضعف بصر، أو على شاشة رخيصة، أو في ضوء شمس ساطع. إرشادات إمكانية وصول محتوى الويب (WCAG) تُعرّف بالضبط كم تباينًا يحتاج النص، كنسبة رقمية، فيتوقّف هذا عن كونه ذاتيًا. تقيس هذه الأداة التباين بين أي لونين وتخبرك هل يلبّي تلك المعايير.
كيف يعمل الفاحص
أدخل لون نص ولون خلفية، وتحسب الأداة نسبة التباين بينهما باستخدام معادلة WCAG، ثم تخبرك أي مستويات إمكانية وصول يجتازها الزوج أو يفشلها. تحسب حقيقة أن النص الأكبر يحتاج تباينًا أقل من النص الصغير، فتُبلّغ نتائج لكليهما. الحساب مبني على الإضاءة النسبية للألوان، وهي كيف يُنمذج المعيار إدراك الإنسان للسطوع بدل قيم اللون الخام.
عتبات WCAG
نسبة التباين = (L_الأفتح + 0.05) ÷ (L_الأغمق + 0.05)
L = الإضاءة النسبية، من 0 (أسود) لـ1 (أبيض)
متطلبات WCAG:
نص عادي AA: 4.5:1 AAA: 7:1
نص كبير AA: 3:1 AAA: 4.5:1
واجهة/رسوم AA: 3:1
النسب تمتد من 1:1 (متطابق) لـ21:1 (أسود على أبيض)النسبة مبنية على الإضاءة النسبية، لا قيم اللون ذاتها، ولهذا لونان يبدوان مختلفين بالتساوي لمصمم قد يكون لهما تباين مختلف جدًا. الإضاءة تُثقّل الأخضر أكثر بكثير من الأزرق، لأن العين البشرية أكثر حساسية للأخضر — فنص أصفر يُقرأ ساطعًا وأزرق داكن خافتًا، حتى بتشبّع متشابه. لهذا أيضًا «النص الكبير» يحصل على متطلب أدنى: الأشكال الحرفية الأكبر أسهل حلًّا، فـ3:1 يكفي حيث يحتاج الصغير 4.5:1. المقياس يبلغ ذروته عند 21:1، أسود نقي على أبيض نقي.
ما يجب معرفته عن تباين الألوان
- 1اهدف لـAA كحد أدنى: 4.5:1 للنص العادي، 3:1 للكبير. هذا المستوى الذي تشير إليه معظم قوانين ومعايير إمكانية الوصول، وهو أرضية حقيقية لا طموح. AAA (7:1) أصرم ويستحق البلوغ لنص المتن حيث تستطيع، لكن اجتياز AA خط الأساس الذي يُبقي نصك مقروءًا للسكان الكبار ببصر أو شاشات أقل من مثالية.
- 2النص الكبير يحصل على عتبة أدنى لأن الحجم يعين المقروئية. النص يُحتسب «كبيرًا» عند نحو 18pt، أو 14pt عريض، ويحتاج 3:1 فقط بدل 4.5:1. لهذا عنوان كبير يستطيع استخدام لون سيفشل كنص متن. لكن لا تستخدم سماحية النص الكبير لتبرير نص صغير منخفض التباين — العتبتان موجودتان لسبب إدراكي حقيقي.
- 3الجميل والقابل للوصول ليسا في تعارض، لكن يجب فحص كليهما. اللوحات المتناغمة غالبًا تقرن ألوانًا بإضاءة متشابهة، ما يبدو أنيقًا وقد يفشل التباين بشدة. لوحة قد تكون جذابة حقًا وتترك النص غير مقروء، فالتباين فحص منفصل عن الجماليات — تحقّق من النسبة بدل الثقة أن توليفة حسنة المظهر مقروءة أيضًا.
- 4لا تنسَ العناصر غير النصية: الأيقونات والأزرار وحدود النماذج تحتاج 3:1. متطلبات تباين WCAG تمتد بعد النص للواجهة ذاتها، لأن عنصر تحكم لا يراه أحد غير قابل للوصول كنص لا يقرؤه أحد. أيقونة خافتة أو حد إدخال بالكاد مرئي يفشل مستخدمين حقيقيين، فأخضِع عناصر الواجهة لحد 3:1 أيضًا.
- 5اختبر في ظروف حقيقية، لا استوديو تصميم خافت فقط. تباين يبدو كافيًا على شاشة معايرة في ضوء خافت قد يصير غير مقروء على هاتف في ضوء الشمس أو شاشة منخفضة الجودة. نسبة WCAG موجودة تحديدًا لضمان المقروئية عبر تلك الظروف الواقعية، فتلبية المعيار الرقمي أوثق من الثقة بكيف تبدو توليفة على شاشتك.
الأسئلة الشائعة
أي نسبة تباين أحتاج لنص قابل للوصول؟
كحد أدنى، WCAG AA: 4.5:1 للنص العادي و3:1 للنص الكبير (نحو 18pt، أو 14pt عريض). هذا المستوى الذي تشير إليه معظم قوانين إمكانية الوصول وهو خط الأساس العملي لنص مقروء. مستوى AAA الأصرم يطلب 7:1 على النص العادي و4.5:1 على الكبير، ويستحق البلوغ لنص المتن حيث ممكن. تحت عتبات AA، يصير نصك صعب القراءة حقًا لجزء كبير من جمهورك.
لماذا يفشل النص الرمادي الفاتح على أبيض رغم أني أقرؤه؟
لأنك على الأرجح تراه في ظروف مثالية — شاشة جيدة، بإضاءة مريحة، ببصر عادي. نسبة WCAG موجودة لضمان المقروئية عبر ظروف أصعب بكثير: ضعف بصر، شاشات رخيصة أو مغطاة بوهج، ضوء شمس ساطع، وعيون شائخة. رمادي فاتح على أبيض فشل كلاسيكي تحديدًا لأنه يبدو جيدًا للمصمم وغير مقروء لمجموعة كبيرة من المستخدمين الحقيقيين. المعيار الرقمي يحمي الناس الذين لا تستطيع رؤيتهم يختبرون موقعك.
لماذا لأحجام النص الأكبر متطلب تباين أدنى؟
لأن الأشكال الحرفية الأكبر أسهل حلًّا بطبيعتها، فتبقى مقروءة بتباين أدنى مما يحتاج النص الصغير. تضع WCAG 3:1 للنص الكبير (نحو 18pt أو 14pt عريض) مقابل 4.5:1 للنص العادي لهذا السبب. يعكس حقيقة إدراكية، لا ثغرة — لهذا لا يجب أن تمدّد سماحية النص الكبير لتبرير نص متن منخفض التباين، حيث ينطبق المتطلب الأعلى حقًا.
هل ينطبق التباين على الأزرار والأيقونات، لا النص فقط؟
نعم. تتطلّب WCAG نسبة تباين 3:1 للعناصر غير النصية كالأيقونات وحدود الأزرار وحدود حقول النماذج وعناصر تحكم رسومية ذات معنى، لأن عنصر واجهة لا يدركه أحد غير قابل للوصول كنص غير مقروء. أيقونة خافتة أو خط إدخال بالكاد مرئي يفشل مستخدمين حقيقيين كما يفعل النص منخفض التباين، فنفس انضباط فحص النسبة ينطبق على الواجهة البصرية، لا الكلمات فقط.
كيف تُحسب نسبة التباين فعلًا؟
تقارن الإضاءة النسبية للونين — قياس السطوع المُدرَك الذي يُثقّل الأخضر أكثر، لأن العين البشرية أكثر حساسية للأخضر. النسبة هي إضاءة الأفتح زائد 0.05 مقسومة على إضاءة الأغمق زائد 0.05، مُنتجةً قيمة من 1:1 للألوان المتطابقة حتى 21:1 لأسود نقي على أبيض نقي. لأنها مبنية على الإضاءة لا قيم اللون الخام، لونان يبدوان مختلفين جدًا قد يكون لهما تباين سيّئ، ولهذا قياسه يهم.