أداة مجانية: إمكانية الوصول

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

قارن لون النص بلون الخلفية وفق WCAG 2.2 هنا مباشرةً، أو أدخل عنوان صفحة لتجد كل نص يقل عن الحد الأدنى للتباين، مع ألوانه المقيسة وأقرب لون يجتاز الحد.

حاسبة التباين

أدخل لون النص ولون الخلفية. تُجرى كل الحسابات في متصفحك.

هكذا يبدو النص العادي بحجم 16 بكسل.

نص كبير بحجم 24 بكسل

إطار زر

نسبة التباين4.54:1

نتائج WCAG 2.2 لهذين اللونين
نص عادي، AAWCAG 1.4.3، يتطلب 4.5:1ناجح
نص كبير، AAWCAG 1.4.3، يتطلب 3:1ناجح
نص عادي، AAAWCAG 1.4.6، يتطلب 7:1فاشل
نص كبير، AAAWCAG 1.4.6، يتطلب 4.5:1ناجح
الأيقونات والحدود وحقول النماذجWCAG 1.4.11، يتطلب 3:1ناجح

أقرب ألوان النص التي تجتاز الحد على هذه الخلفية

النص الكبير هو ما لا يقل حجمه عن 24 بكسل، أو 18.66 بكسل بخط عريض. وتُقرَّب النسب إلى الأدنى، لذا تظهر النسبة 4.499:1 على أنها 4.49:1 وتُعدّ فاشلة، كما يقصد WCAG.

أو افحص صفحة بحثًا عن نص منخفض التباين

مجاني. يفحص العنوان الذي تدخله في نحو 20 ثانية.

ما تفحصه هذه الأداة

  • نسبة WCAG لأي لونين

    تستخدم الحاسبة معادلة السطوع النسبي (relative luminance) الواردة في تعريفات WCAG 2.2، وتعرض النتيجة للنص العادي والنص الكبير وعناصر الواجهة، في المستويين AA وAAA. وتعمل في متصفحك.

  • لون يجتاز الحد، محسوب لك

    عندما لا يجتاز زوج من الألوان الحد، تجد الأداة أقرب لون نص من درجة اللون نفسها يبلغ 4.5:1 أو 7:1، حتى تغيّر أقل قدر ممكن من تصميمك.

  • كل نص منخفض التباين في الصفحة

    يشغّل فحص الصفحة قاعدة color-contrast من axe-core في متصفح Chrome حقيقي، ويسرد كل عنصر لا يجتاز الحد مع لون نصه ولون خلفيته وحجم خطه ونسبته.

  • مجمّعة حسب زوج الألوان

    تُجمَّع الإخفاقات حسب لون النص ولون الخلفية، لأن تغييرًا واحدًا في أحد ألوان القالب يُصلح عادةً كل العناصر التي تستخدمه.

  • الحد الصحيح للنص الكبير

    يحتاج النص الذي لا يقل حجمه عن 24 بكسل، أو 18.66 بكسل بخط عريض، إلى 3:1 بدلًا من 4.5:1. ويطبّق الفحص الحد المناسب على كل عنصر بناءً على حجم خطه ووزنه المحسوبين.

  • ما تعذّر قياسه، وسبب ذلك

    يُدرَج النص الموضوع فوق الصور أو التدرّجات اللونية أو العناصر المتداخلة بشكل منفصل مع السبب، حتى تعرف بالضبط ما يجب التحقق منه بالعين.

ما لا يمكنها فحصه

  • قياس النص فوق الصور الفوتوغرافية أو التدرّجات أو الفيديو. فالبرنامج لا يستطيع معرفة أي جزء من الصورة يقع خلف كل حرف، لذا تُدرَج هذه الحالات لتتحقق منها بنفسك.
  • فحص حالات التمرير أو التركيز أو غيرها. فالفحص يرى الصفحة كما تُحمَّل؛ تحقّق من تلك الألوان بالحاسبة.
  • فحص الأيقونات والحدود وحقول النماذج في الصفحة وفق WCAG 1.4.11. لكن الحاسبة تعرض نتيجة 3:1 لأي زوج ألوان تُدخله.
  • قراءة النص الذي يشكّل جزءًا من صورة، مثل لافتة كُتبت كلماتها داخل الصورة نفسها.
  • اختبار أكثر من الصفحة التي تُدخلها. أما الفحص المجاني الكامل فيختبر ما يصل إلى خمس صفحات أساسية.

لماذا يهم ذلك

التباين المنخفض هو أكثر إخفاقات إمكانية الوصول شيوعًا على الويب. فقد وجد تحليل WebAIM لعام 2026 للصفحات الرئيسية لأكبر مليون موقع نصًا منخفض التباين في 83.9% منها، بمتوسط 34 حالة في الصفحة الواحدة.

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

وهو كذلك من أرخص المشكلات إصلاحًا: ففي معظم المواقع يتسبب عدد قليل من ألوان القالب في كل الإخفاقات تقريبًا، وتغييرها يُصلح كل الصفحات دفعة واحدة.

كيف تقرأ النتائج

نسبة التباين
من 1:1 (اللون نفسه مرتين) إلى 21:1 (الأسود على الأبيض). وتُقرَّب النسب إلى الأدنى، لذا فإن الزوج الذي يظهر بنسبة 4.49:1 لا يجتاز الحد الأدنى البالغ 4.5:1.
نص عادي، AA (4.5:1)
الحد الأدنى لنص المحتوى والروابط والتسميات ونصوص الأزرار وفق WCAG 1.4.3.
نص كبير، AA (3:1)
للنص الذي لا يقل حجمه عن 24 بكسل، أو 18.66 بكسل بخط عريض. ويعرّف WCAG النص الكبير بأنه 18 نقطة، أو 14 نقطة بخط عريض.
AAA (7:1 و4.5:1)
المستوى المحسّن في WCAG 1.4.6. وهو غير مطلوب لمطابقة المستوى AA، لكنه يساعد عددًا أكبر من القرّاء.
الأيقونات والحدود وحقول النماذج (3:1)
يطلب WCAG 1.4.11 نسبة 3:1 مقابل الألوان المجاورة لأجزاء عناصر التحكم والرسومات التي يحتاج الناس إلى رؤيتها لاستخدامها.
نص لا يجتاز الحد
كل عنصر قاسه الفحص فجاء دون الحد المطلوب له، مع محدِّده وألوانه وحجمه ونسبته. افتح أيًّا منها لترى ترميزه، ولقطة شاشة إن توفرت.
للتحقق بالعين
نص لم يستطع axe-core قياسه، مع السبب، مثل وجود صورة أو تدرّج لوني خلفه.

كيف تصلح أكثر المشكلات شيوعًا

  • نص رمادي على خلفية بيضاء

    اللون #767676 هو تقريبًا أفتح رمادي يبلغ 4.5:1 على الأبيض (4.54:1). أما الرماديات الأفتح مثل #999999 (2.84:1) فهي سبب شائع للإخفاقات في تذييلات الصفحات والتعليقات التوضيحية والنصوص النائبة والأسعار.

  • نص أبيض على زر بلون العلامة التجارية

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

  • النص النائب في النماذج

    النص النائب (placeholder) يبقى نصًا ويحتاج إلى 4.5:1. والأفضل من ذلك أن تضع تسمية مرئية فوق الحقل حتى لا يكون النص النائب هو التعليمة الوحيدة.

  • النص فوق الصور وشرائح العرض

    ضع النص على خلفية مصمتة أو شبه شفافة، أو أضف طبقة داكنة فوق الصورة، ثم تحقّق من أفتح جزء في الصورة يقع خلف النص.

  • شارات التخفيضات والخط الصغير

    النص في عناصر التحكم المعطّلة مستثنى من 1.4.3، لكن شارات التخفيضات والأسعار والنصوص القانونية الصغيرة ليست مستثناة. وهي غالبًا أبهت نص في صفحات المتجر.

تباين الألوان المنخفض: لماذا يهم وكيف تصلحه في Shopify وWooCommerce وأي موقع

أسئلة حول هذه الأداة

ما نسبة التباين التي يتطلبها WCAG؟

في المستوى AA، يتطلب 4.5:1 للنص العادي و3:1 للنص الكبير (معيار النجاح 1.4.3)، و3:1 لمكونات الواجهة والرسومات ذات المعنى (1.4.11). ويطلب المستوى AAA نسبة 7:1 و4.5:1 (1.4.6).

ما الذي يُعدّ نصًا كبيرًا؟

يعرّف WCAG النص الكبير بأنه لا يقل عن 18 نقطة، أو 14 نقطة بخط عريض. وهذا يعادل بوحدات CSS نحو 24px، أو 18.66px بخط عريض.

هل يجب أن تستوفي الشعارات الحد الأدنى للتباين؟

لا. يستثني WCAG 1.4.3 الشعارات النصية والنصوص التي تشكّل جزءًا من شعار أو اسم علامة تجارية، وكذلك النصوص الزخرفية البحتة والنصوص في عناصر التحكم غير النشطة.

لماذا يُدرج الفحص النص الموضوع فوق صورة للمراجعة؟

يقيس axe-core الألوان المصمتة. وعندما تقع صورة أو تدرّج لوني أو عنصر آخر خلف النص، لا يستطيع معرفة الألوان التي تلتقي، لذا يبلّغ عن العنصر ليتحقق منه شخص بدلًا من التخمين.

هل أحتاج إلى تباين بمستوى AAA؟

المستوى AAA غير مطلوب لمطابقة المستوى AA، ولا يوصي W3C باشتراط AAA لمواقع كاملة. ومع ذلك يبقى بلوغ 7:1 لنص المحتوى ممارسة جيدة حيثما يسمح تصميمك.

هل APCA جزء من WCAG؟

لا. APCA طريقة مختلفة لحساب التباين نوقشت لـ WCAG 3، الذي لا يزال مسودة. وتُقاس المطابقة اليوم بنسبة WCAG 2 التي تحسبها هذه الأداة.

المصادر

أدوات ذات صلة

يبدأ تقرير إصلاح إمكانية الوصول ($174، دفعة واحدة) من الفحص المجاني الكامل، ويضيف صفحات أكثر، والتغيير المطلوب لكل نتيجة، وملف PDF، وإعادة اختبار للتحقق من إصلاحاتك.

عن تقرير إصلاح إمكانية الوصول