فاحص تباين الألوان

فاحص التباين أونلاين — أداة إمكانية الوصول WCAG 2.1

فاحص التباين من Toolsiro هو أداة مجانية لإمكانية الوصول وفق WCAG 2.1، تحسب نسبة التباين بين أي لون نص ولون خلفية، وتتحقق منها مقابل جميع مستويات إمكانية الوصول الخمسة في WCAG، وتعرض معاينة مباشرة لشكل النص على الخلفية بالضبط. لا تخمين — فقط نتائج فورية ودقيقة يمكنك الوثوق بها.

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

فهم نسبة التباين

تقيس نسبة التباين الفرق في اللمعان النسبي بين لونين. اللمعان مقياس إدراكي للسطوع يأخذ في الاعتبار كيفية استجابة العين البشرية بشكل مختلف للضوء الأحمر والأخضر والأزرق — يبدو الأخضر أكثر إشراقاً للعين من الأزرق بنفس الشدة، لذا تُوزِّن الصيغة وفقاً لذلك.

تُنتج صيغة نسبة التباين قيماً من 1:1 (ألوان متطابقة — لا تباين) إلى 21:1 (نص أسود على أبيض أو العكس — أقصى تباين). الصيغة: (L1 + 0.05) / (L2 + 0.05)، حيث L1 هو اللمعان النسبي للون الأفتح وL2 للون الأغمق.

مستويات إمكانية الوصول WCAG 2.1

AA — النص العادي (4.5:1): الحد الأدنى لنسبة التباين المطلوبة للنص العادي وفق المستوى AA من WCAG 2.1. النص العادي أقل من 18pt (24px) أو أقل من 14pt (18.67px) إذا كان عريضاً. هذا أكثر متطلبات إمكانية الوصول استشهاداً ومعيار الحد الأدنى لمعظم المواقع والتطبيقات العامة.

AA — النص الكبير (3:1): النص الكبير — 18pt (24px) أو أكبر، أو 14pt (18.67px) عريض أو أكبر — يتطلب نسبة تباين أقل لأن حجمه الأكبر يجعله أسهل للقراءة. العناوين والنص الكبير تندرج في هذه الفئة.

AAA — النص العادي (7:1): المعيار المُحسَّن للنص العادي في المستوى AAA. هذا أعلى متطلبات تباين WCAG ويضمن قراءة ممتازة لمستخدمي الإعاقات البصرية الكبيرة.

AAA — النص الكبير (4.5:1): المعيار المُحسَّن للنص الكبير، يُطابق متطلب AA للنص العادي المُطبَّق على النص الكبير لأعلى مستوى من إمكانية الوصول.

AA — مكونات واجهة المستخدم (3:1): عناصر واجهة المستخدم — حدود النماذج وحلقات التركيز والأيقونات — تتطلب 3:1 مقابل الألوان المجاورة. أُضيف هذا في WCAG 2.1 لتغطية إمكانية وصول واجهة المستخدم التفاعلية.

ما تعنيه نتائج النجاح/الفشل

شارة "ناجح" الخضراء تعني أن مزيج الألوان يلبي معيار WCAG ذاك — يمكنك استخدام هذا المزيج لذلك النوع من المحتوى بثقة. شارة "فاشل" الحمراء تعني أن التباين غير كافٍ لذلك المعيار — النص سيكون صعب القراءة ويجب مراجعة المزيج.

يمكن أن يجتاز المزيج بعض المستويات ويرسب في أخرى في نفس الوقت. مثلاً، نسبة 4.8:1 ستجتاز AA العادي (≥4.5) وAA الكبير (≥3) وAAA الكبير (≥4.5)، لكنها ستُخفق في AAA العادي (≥7).

معاينة النص المباشرة

تُقدِّم الأداة لوحة معاينة مباشرة تُظهر لون نصك مقابل لون خلفيتك مع ثلاثة عينات نص: نص عنوان كبير يمثل "النص الكبير" وفق WCAG، ونص نص أساسي عادي يمثل "النص العادي"، ونص صغير عريض. هذا يتيح لك رؤية النتيجة الإدراكية الفعلية — ليس فقط الرقم — والحكم فوراً على مدى قابلية المزيج للقراءة عملياً.

أخطاء إمكانية الوصول الشائعة وكيفية إصلاحها

النص الرمادي الفاتح على خلفية بيضاء أكثر حالات فشل التباين شيوعاً في تصميم الويب الحديث. الجمالية البسيطة التي تفضل الرمادي #999999 على الأبيض تُنتج نسبة تباين 2.85:1 فقط — أدنى بكثير من متطلب 4.5:1 للنص العادي. تغميق الرمادي إلى #767676 يُنتج 4.5:1 بالضبط، الحد الأدنى للاجتياز.

النص الأبيض على الألوان متوسطة التشبع كثيراً ما يُخفق. الأبيض على الأزرق المتوسط النموذجي مثل #4A90E2 يُنتج حوالي 3.2:1 — يجتاز للنص الكبير لكن يُخفق للنص العادي.

الامتثال لإمكانية الوصول في الممارسة

الامتثال لـWCAG ليس مجرد التزام أخلاقي — بل قانوني في كثير من الولايات القضائية. قانون الأمريكيين ذوي الإعاقات (ADA) في الولايات المتحدة، وقانون إمكانية الوصول الأوروبي (EAA) في الاتحاد الأوروبي، وقوانين مكافئة في أستراليا وكندا ودول أخرى كثيرة تتطلب من المواقع والتطبيقات تلبية معايير إمكانية الوصول. WCAG 2.1 المستوى AA هو المعيار الأكثر استشهاداً في هذه الأطر القانونية.

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

أسئلة شائعة

ما نسبة التباين اللازمة لاجتياز WCAG AA؟ 4.5:1 للنص العادي، 3:1 للنص الكبير (18pt+ أو 14pt+ عريض)، و3:1 لمكونات واجهة المستخدم.

ما الحد الأقصى لنسبة التباين الممكنة؟ 21:1، وهو الأسود النقي (#000000) مقابل الأبيض النقي (#FFFFFF). هذا هو الحد الأقصى المرجعي في صيغة WCAG.

هل يجب استهداف AA أم AAA؟ WCAG AA هو الهدف القانوني والامتثالي القياسي. AAA مُوصى به للمحتوى الحرج ونص الجسم وأي موقع يخدم المستخدمين ذوي الإعاقات البصرية الكبيرة.

هل تُطبَّق نسبة التباين على الصور والعناصر الزخرفية؟ تنطبق متطلبات تباين WCAG على النص ومكونات واجهة المستخدم. الصور الزخرفية البحتة والعناصر ذات القيمة المعلوماتية الصفرية مُستثناة. لكن أي نص فوق صورة يجب أن يلبي متطلبات التباين مقابل محتوى الصورة أدناه.