1:1 to 21:1 · AA · AAA
فاحص التباين
الأسود على الأبيض نسبة تباينه في WCAG هي 21:1، وهي الأعلى الممكنة، والأبيض على #0060fd نسبته 5.13:1. أدخل لون نص وخلفية لتفحص ألوانك.
- #000000 on #ffffff = 21.00:1
- #ffffff on #0060fd = 5.13:1
- #767676 on #ffffff = 4.54:1
- #777777 on #ffffff = 4.47:1
تتحدّث النسبة والفحوص الخمسة أثناء الكتابة. وتُقتطع النسبة إلى خانتين عشريتين ولا تُقرَّب للأعلى أبدًا، فتظهر 4.499 على أنها 4.49:1 وتفشل في فحص 4.5:1.
Scanned by 
NortonTM Safe Web
نظرة سريعة
- السعر
- بلا مقابل
- الحساب
- غير مطلوب
- الرفع
- لا ينطبق — تكتب ألوانًا ولا يُرسل شيء إلى أي مكان
- الصيغة
- (إضاءة الأفتح + 0.05) ÷ (إضاءة الأغمق + 0.05)
- الحدود
- AA: 4.5:1 للنص العادي و3:1 للكبير؛ AAA: 7:1 للعادي و4.5:1 للكبير؛ 3:1 لأجزاء الواجهة
- المعيار
- تعريفات WCAG 2.2 للإضاءة النسبية ونسبة التباين
نسب التباين لأزواج معروفة
أُنتجت هذه الصفوف بالشيفرة نفسها التي يستعملها الفاحص. علامة الصح تعني أن الزوج يحقق المتطلّب، وعلامة الخطأ تعني أنه لا يحققه.
| لون النص | الخلفية | النسبة | AA عادي | AA كبير | AAA عادي | AAA كبير | أجزاء الواجهة |
|---|---|---|---|---|---|---|---|
| #000000 | #ffffff | 21.00:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| #ffffff | #0060fd | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #767676 | #ffffff | 4.54:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #777777 | #ffffff | 4.47:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| #0060fd | #ffffff | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #ffffff | #ffffff | 1.00:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| الفحص | النسبة الدنيا |
|---|---|
| AA، النص العادي | 4.5:1 |
| AA، النص الكبير | 3:1 |
| AAA، النص العادي | 7:1 |
| AAA، النص الكبير | 4.5:1 |
| AA، أجزاء الواجهة والرسوم | 3:1 |
كيف تفحص زوجًا من الألوان
أدخل اللونين
اكتب لون النص ولون الخلفية بأي صيغة CSS، أو استعمل أداتي الاختيار. ويبدّل زر التبديل بينهما، وهذا مفيد للنص الفاتح على خلفية داكنة.
اقرأ النسبة
تتراوح النسبة من 1:1 (لونان متطابقان) إلى 21:1 (أسود على أبيض). وتعرض العيّنة تحت الحقلين الزوج بحجم 16 px وبحجم 24 px، لتحكم على النتيجة بعينيك.
انظر إلى الفحوص الخمسة
تذكر كل بطاقة «نجح» أو «فشل» لمتطلّب واحد من WCAG: AA وAAA للنص العادي، وAA وAAA للنص الكبير، وAA لأجزاء الواجهة. وإذا فشل النص العادي في AA اقترحت الصفحة أقرب لون نص ينجح.
كيف تُحسب نسبة التباين
يقيس WCAG التباين عبر الإضاءة النسبية، أي سطوع اللون من 0 (أسود) إلى 1 (أبيض). وتُقسم كل قناة حمراء وخضراء وزرقاء على 255؛ فالقيمة حتى 0.04045 تُقسم على 12.92، والقيمة الأكبر تُرفع إلى أس: (القيمة + 0.055) مقسومة على 1.055، ثم إلى الأس 2.4. وتكون الإضاءة بعد ذلك 0.2126 ضرب الأحمر زائد 0.7152 ضرب الأخضر زائد 0.0722 ضرب الأزرق، وهو ما يعكس شدة استجابة العين لكل منها. ونسبة التباين هي إضاءة اللون الأفتح زائد 0.05، مقسومة على إضاءة اللون الأغمق زائد 0.05.
يشترط WCAG 2 نسبة 4.5:1 على الأقل للنص العادي و3:1 للنص الكبير في المستوى AA، و7:1 و4.5:1 في المستوى AAA. والنص الكبير هو ما بلغ 18 نقطة على الأقل، أي 24 بكسل CSS، أو 14 نقطة على الأقل بخط عريض، أي نحو 18.66 بكسل. ويشترط معيار النجاح 1.4.11 نسبة 3:1 لأجزاء الواجهة والرسوم التي يحتاج القارئ إلى رؤيتها، مثل حدّ الحقل أو خط المخطط. وتُقارن النسبة بكل حدّ دون تقريب. وإذا كان للون شفافية، فتوضع الخلفية الشفافة فوق الأبيض ولون النص الشفاف فوق الخلفية قبل القياس. وتطبّق هذه الصفحة WCAG 2.x فقط؛ ولا تحسب APCA الذي يُناقش لإصدار لاحق من الإرشادات.
أسئلة عن التباين
ما نسبة التباين التي يشترطها WCAG للنص؟
في المستوى AA يحتاج النص العادي إلى 4.5:1 على الأقل، والنص الكبير إلى 3:1 على الأقل. وفي المستوى AAA تكون الأرقام 7:1 للنص العادي و4.5:1 للنص الكبير. وتُقاس النسبة بين لون النص واللون الذي يقع خلفه مباشرة.
ما الذي يُعدّ نصًا كبيرًا؟
يعرّف WCAG النص الكبير بأنه ما بلغ 18 نقطة على الأقل، أي 24 بكسل CSS، أو 14 نقطة على الأقل بخط عريض، أي نحو 18.66 بكسل CSS. وما هو أصغر من ذلك يُعدّ نصًا عاديًا ويحتاج إلى النسبة الأعلى.
ما أفتح رمادي ينجح في AA على الأبيض؟
اللون #767676 على الأبيض نسبته 4.54:1 وينجح في فحص 4.5:1 للنص العادي. أما الرمادي الأفتح التالي #777777 فنسبته 4.47:1 ويفشل. وبالنسبة إلى 7:1 (AAA) فأفتح رمادي هو #595959 ونسبته 7.00:1.
لماذا تفشل 4.49 مع أنها تبدو كـ 4.5؟
تقارن الفحوص النسبة الدقيقة بالحدّ. فالنسبة 4.499 أقل من 4.5، فتفشل، وتطبعها الصفحة 4.49:1 بدل أن تقرّبها للأعلى. والأحمر الصافي على الأبيض مثال حقيقي: 3.99:1 تفشل في فحص 4.5:1 للنص العادي مع أنها قريبة.
ما التباين الذي تحتاجه الأيقونات والحدود وحقول النماذج؟
يشترط معيار النجاح 1.4.11 تباين غير النص، المضاف في WCAG 2.1، نسبة 3:1 على الأقل بين أجزاء الواجهة أو الرسم التي يحتاج القارئ إلى رؤيتها، مثل حدّ الحقل أو حلقة التركيز أو خط المخطط، والألوان المجاورة لها. وتُستثنى عناصر التحكم المعطّلة والرسوم الزخرفية المحضة.
هل نسبة ناجحة تجعل الصفحة قابلة للوصول؟
لا. فالتباين متطلّب واحد من متطلّبات كثيرة. ويهمّ أيضًا حجم الخط ووزنه، وتباعد الأسطر، وألا يحمل اللون وحده المعنى، ووضوح التركيز، والنص فوق الصور والتدرّجات، وكيف يرى الصفحة من لديهم أنواع مختلفة من رؤية الألوان. استعمل هذه النتيجة مدخلًا واحدًا، واختبر الصفحة بمحتوى حقيقي.