tigtools

مدقق التباين

أدخل لون النص ولون الخلفية للاطّلاع على نسبة تباين WCAG، والمستويات المستوفاة، ومعاينة مباشرة.

تعمل في متصفحك لا يلزم التسجيل

نسبة التباين

4.47:1

المتطلبالمطلوبالنتيجة
AA، نص عادي4.5:1إخفاق
AA، نص كبير3:1اجتياز
AAA، نص عادي7:1إخفاق
AAA، نص كبير4.5:1إخفاق
مكوّنات واجهة المستخدم والرسومات3:1اجتياز

النص الكبير هو ما لا يقل حجمه عن 24px (18pt) بالوزن العادي أو 18.66px (14pt) بالخط العريض.

معاينة

نص عادي بحجم 16px. ثعلب بني سريع يقفز فوق كلب كسول.

يصعب قراءة النص الصغير بحجم 14px عند انخفاض التباين.

نص كبير بحجم 24px

نص عريض بحجم 18.66px (14pt)

زر

أقرب لون نص مستوفٍ للمتطلبات

الهدف
يحقق #767676 نسبة تباين 4.54:1 على هذه الخلفية.

يُمزج النص الشفاف مع الخلفية قبل القياس؛ وتُمزج الخلفية الشفافة مع اللون الأبيض.

كيفية الاستخدام

  1. أدخل لون النص (المقدمة) ولون الخلفية بصيغة HEX أو rgb() أو hsl() أو أي صيغة CSS أخرى، أو استخدم أدوات اختيار الألوان.
  2. اطّلع على نسبة التباين ونتيجة النجاح أو الإخفاق لكل متطلب من متطلبات WCAG.
  3. إذا لم يتحقق أحد المتطلبات، فاختر هدفًا وطبّق اللون المقترح، الذي يحافظ على درجة اللون ويغيّر الإضاءة فقط.
  4. استخدم «تبديل» للتحقق من التركيبة المعكوسة، مثل نص فاتح على زر داكن.

كيف تعمل الأداة

تتبع النسبة تعريف WCAG 2.2: يُحسب السطوع النسبي لكل لون من قنوات sRGB، وتساوي النسبة (الأفتح + 0.05) ÷ (الأغمق + 0.05). وتتراوح من 1:1 (لونان متطابقان) إلى 21:1 (أسود على أبيض).

المتطلبات التي يتم التحقق منها: يتطلب معيار النجاح 1.4.3 (AA) نسبة 4.5:1 للنص العادي و3:1 للنص الكبير؛ ويتطلب 1.4.6 (AAA) نسبة 7:1 و4.5:1؛ ويتطلب 1.4.11 نسبة 3:1 لعناصر واجهة المستخدم والرسومات ذات الدلالة، مثل حدود حقول الإدخال والأيقونات. حجم النص الكبير لا يقل عن 24px عاديًا أو نحو 18.66px عريضًا. لا تسمح WCAG بالتقريب إلى الأعلى، لذا فإن نسبة 4.49:1 لا تحقق AA رغم قربها من الحد؛ والنسبة المعروضة هنا مبتورة وليست مقربة.

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

أمثلة

نص رمادي لا يحقق الحد إلا بفارق طفيف

يحقق النص الرمادي #777777 على خلفية بيضاء نسبة 4.48:1. وهذا مناسب للنص الكبير ومكونات واجهة المستخدم، لكنه لا يحقق AA للنص العادي. أقرب درجة رمادية تحقق المتطلبات هي نحو #767676، بنسبة 4.54:1.

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

يحقق النص الأبيض على #ff8800 نسبة تقارب 2.4:1، فلا يفي حتى بحد 3:1 للنص الكبير. والحلان المعتادان هما تغميق اللون البرتقالي أو استخدام نص داكن؛ ويوضح الاقتراح مدى الحاجة إلى تغميق لون النص.

التحقق من حد حقل في نموذج

يحقق الحد الرمادي الفاتح #cccccc على خلفية بيضاء نسبة تقارب 1.6:1. وبموجب المعيار 1.4.11، يجب أن يحقق الحد الذي يحدد حقل الإدخال نسبة 3:1، لذا يلزم استخدام لون قريب من #949494 أو أغمق.

الأسئلة الشائعة

ما نسبة التباين المطلوبة لتحقيق WCAG AA؟

يلزم 4.5:1 لنص المتن العادي، و3:1 للنص الكبير (24px، أو 18.66px عريضًا)، ولمكونات واجهة المستخدم والرسومات ذات الدلالة. ويرفع مستوى AAA النسبة إلى 7:1 للنص العادي و4.5:1 للنص الكبير.

هل يجب أن يحقق نص الشعار أو الزر المعطل متطلبات التباين؟

لا. تستثني WCAG النصوص في الشعارات وأسماء العلامات التجارية، والنصوص الزخرفية البحتة، والنصوص في مكونات واجهة المستخدم غير النشطة (المعطلة).

لماذا تختلف نتيجتي قليلًا عن نتيجة أداة أخرى؟

تقرّب بعض الأدوات النسبة إلى منزلة عشرية واحدة أو إلى الأعلى. تقارن WCAG القيمة الدقيقة، لذا تعرض هذه الأداة النسبة مبتورة إلى منزلتين عشريتين. وقد تنتج فروق طفيفة أيضًا عن إدخال ألوان بقناة ألفا.

ما طريقة APCA الجديدة لقياس التباين؟

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

الخصوصية

يجري التحقق من الألوان في متصفحك. لا يتم تحميل أي شيء أو تخزينه.