مدقق تباين الألوان (WCAG)
افحص نسبة التباين بين لون النص ولون الخلفية وفق معايير WCAG AA وAAA للنص العادي والنص الكبير ومكونات الواجهة، مع اقتراحات للإصلاح.
جارٍ تحميل مدقق تباين الألوان…
ملفاتك لا تغادر جهازك أبدًا
طريقة استخدام مدقق تباين الألوان
- 1
افتح مدقق تباين الألوان في هذه الصفحة. تُحمَّل مباشرة في متصفحك.
- 2
أضف ملفك أو نصك أو القيم، واضبط الإعدادات.
- 3
انسخ النتيجة أو نزّلها. لا يُرفع أي شيء ولا يُخزَّن.
عن هذه الأداة
النص منخفض التباين من أكثر مشكلات إتاحة الوصول شيوعا على الويب، ويزعج كل من يقرأ على هاتفه تحت الشمس. يحسب مدقق تباين الألوان هذا نسبة التباين بين لون النص ولون الخلفية ويخبرك هل تجتاز إرشادات WCAG 2. وإن لم تجتزها، يقترح أقرب الألوان التي تجتازها لتصلح المشكلة دون تغيير تصميمك.
طريقة فحص التباين
- أدخل لون النص ولون الخلفية، أو اخترهما بصريا.
- اقرأ نسبة التباين ونتيجة النجاح أو الفشل لكل مستوى.
- انظر إلى المعاينة المباشرة بنص عادي وعناوين كبيرة وخط صغير.
- إن فشل مستوى ما، استخدم إصلاحا مقترحا أو بدّل اللونين لاختبار العكس.
- انسخ كود CSS للتركيبة الناجحة.
متطلبات التباين في WCAG
| العنصر | AA | AAA |
|---|---|---|
| النص العادي | 4.5:1 | 7:1 |
| النص الكبير (24px، أو 18.66px عريض) | 3:1 | 4.5:1 |
| مكونات الواجهة والأيقونات | 3:1 | غير محدد |
مستوى AA هو الذي تشير إليه معظم القوانين وسياسات إتاحة الوصول. ومستوى AAA أشد ويوصى به للنصوص الطويلة. ويُعد النص العريض بحجم 18px تقريبا نصا كبيرا أيضا.
كيف تُحسب النسبة
يحوّل المدقق اللونين إلى الإضاءة النسبية، وهي مقياس للسطوع المُدرَك، ثم يقسم الأفتح مضافا إليه 0.05 على الأغمق مضافا إليه 0.05. تتراوح النتيجة من 1:1 (لا تباين، اللون نفسه) إلى 21:1 (أسود على أبيض).
نصائح لألوان سهلة القراءة
- النص الرمادي على الأبيض هو السبب المعتاد: #767676 تقريبا أفتح رمادي ما زال يجتاز AA للنص العادي على الأبيض.
- افحص كل الحالات: النصوص الإرشادية والأزرار المعطلة والروابط وألوان التمرير والنص فوق الصور.
- لا تعتمد على اللون وحده لإيصال المعنى، مثل الأحمر للأخطاء؛ أضف أيقونة أو نصا.
- اختبر ألوان العلامة التجارية مبكرا، لأن الأصفر الزاهي والأزرق الفاتح يفشلان غالبا كلون للنص.
تصمم مخططا كاملا؟ يعرض مولد لوحات الألوان التباين لكل لون، ويحوّل محول الألوان القيم بين HEX وRGB وHSL.
الأسئلة الشائعة
ما نسبة التباين المطلوبة لمستوى WCAG AA؟
4.5:1 على الأقل للنص العادي، و3:1 للنص الكبير ولمكونات الواجهة مثل الأزرار وحدود النماذج والأيقونات.
ما الذي يُعد نصا كبيرا؟
النص بحجم 24px على الأقل، أو النص العريض بحجم 18.66px تقريبا (14 نقطة) على الأقل. يحتاج النص الكبير إلى 3:1 لمستوى AA و4.5:1 لمستوى AAA.
ما الفرق بين AA وAAA؟
AA هو المستوى القياسي الذي تشير إليه معظم قوانين إتاحة الوصول. AAA أشد، 7:1 للنص العادي، ويوصى به للفقرات الطويلة.
ما أعلى نسبة تباين ممكنة؟
21:1، وهي نص أسود على خلفية بيضاء أو العكس.
لون علامتي التجارية يفشل. ماذا أفعل؟
استخدم إصلاحا مقترحا يحافظ على الصبغة ويعدّل الإضاءة حتى ينجح، أو استخدم لون العلامة للعناوين الكبيرة والخلفيات بدلا من النص الأساسي.
هل يفحص النص فوق الصور؟
لا. إنه يفحص لونين مصمتين. للنص فوق الصور، اختبر اللون مقابل أفتح وأغمق أجزاء الصورة خلف النص.