تصميم سهل القراءة

عاين زوج الألوان في كتلة نص واقعية.

نسبة التباين

17.32:1

النص العادي AA

ناجح

النص العادي AAA

ناجح

النص الكبير AA

ناجح

النص الكبير AAA

ناجح

مكونات الواجهة AA

ناجح

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

تحقق من تباين ألوان WCAG وقم بتحويل الألوان بين HEX وRGB وHSL.

كيفية فحص التباين

أدخل اللونين وراجع نتائج WCAG ثم انسخ القيم المحولة.

كيفية فحص التباين

كيف يتم حساب نسبة التباين؟

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

ماذا تعني نتائج التباين WCAG AA وAAA؟

بالنسبة للنص العادي، يتطلب WCAG AA نسبة لا تقل عن 4.5:1، بينما يتطلب AAA نسبة 7:1. يستخدم النص الكبير حدودًا أقل لأن الأحرف الأكبر حجمًا والسميكة بما يكفي تكون أسهل في التمييز: 3:1 لمستوى AA و 4.5:1 لمستوى AAA. يعتمد اعتبار النص كبيرًا على حجمه ووزنه عند العرض، وليس على تسمية التصميم وحدها. لذلك قد تنجح مجموعة ألوان لعنوان كبير وتفشل مع نص الفقرة. تحقق من المتطلب الذي يطابق التنسيق الفعلي ومستوى المطابقة المستهدف.

هل تحتاج الرموز وعناصر التحكم ومؤشرات التركيز إلى عمليات فحص التباين؟

نعم. يعد تباين النص جزءًا واحدًا فقط من إمكانية الوصول إلى الألوان. المعلومات المرئية المطلوبة لتحديد عناصر تحكم واجهة المستخدم وحالات المكونات والكائنات الرسومية ومؤشرات تركيز لوحة المفاتيح تحتاج عادةً إلى تباين بنسبة 3:1 على الأقل مع الألوان المجاورة بموجب إرشادات التباين غير النصية WCAG. العناصر الزخرفية وعناصر التحكم غير النشطة لها اعتبارات مختلفة. اختبار الحدود والأيقونات والمخططات والحالات المحددة ورسائل التحقق من الصحة ومخططات التركيز في السياق. لا يثبت زوج النص الذي يمرر AA أن كل عنصر تفاعلي أو رسومي على نفس الشاشة يمكن الوصول إليه.

كيف يمكنني اختبار الشفافية والتدرجات وخلفيات الصور؟

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

هل يضمن اجتياز مدقق التباين تصميمًا يسهل الوصول إليه؟

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