فاحص تباين الألوان
فاحص تباين ألوان مجاني: تحقق مما إذا كانت ألوان النص والخلفية تستوفي WCAG 2.2 بمستويي AA وAAA، واعرف نسبة التباين وأقرب لون ناجح.
هذا نص عادي بحجم الفقرة.
نص كبير
زر| AA | AAA | |
|---|---|---|
| نص عادي | ||
| نص كبير (24 px، أو 18.7 px غامق) | ||
| الأيقونات وحدود الواجهة | — |
ما الذي تفعله
يقيس هذا الفاحص التباين بين لون النص وخلفيته باستخدام معادلة إرشادات إمكانية الوصول WCAG 2.2، المعتمدة في كثير من قوانين إمكانية الوصول. ويعرض نسبة التباين من 1:1 (بلا تباين) إلى 21:1 (أسود على أبيض)، وما إذا كان الزوج يجتاز مستويي AA وAAA للنص العادي والنص الكبير ومكونات الواجهة مثل الأيقونات والحدود. وعندما يفشل الزوج، يقترح أقرب لون بدرجة اللون نفسها يجتاز الاختبار.
طريقة الاستعمال
- أدخل لون النص ولون الخلفية أو اخترهما.
- اقرأ نسبة التباين ونتائج AA وAAA، وتحقق من المعاينة المباشرة.
- إذا فشل الاختبار، فاضغط «استخدام» على أحد الألوان المقترحة، ثم انسخ الرابط لمشاركة النتيجة.
الأسئلة الشائعة
ما نسبة التباين التي أحتاجها؟
يتطلب المستوى AA، وهو الهدف القانوني المعتاد، نسبة 4.5:1 للنص العادي و3:1 للنص الكبير وللأيقونات وحدود الواجهة. ويتطلب المستوى AAA نسبة 7:1 للنص العادي و4.5:1 للنص الكبير.
ما الذي يُعد نصًا كبيرًا؟
النص الذي لا يقل حجمه عن 24 بكسل CSS (18 نقطة)، أو لا يقل عن نحو 18.7 بكسل CSS (14 نقطة) إذا كان غامقًا. غالبًا ما تكون العناوين كبيرة، أما نص المتن فعادةً لا.
لماذا يفشل #777777 على الأبيض؟
نسبته 4.47:1، أي أقل بقليل من 4.5:1 المطلوبة للنص العادي. ولا تُقرَّب النسب إلى الأعلى، لذا فإن رماديًا أغمق قليلًا مثل #767676 (4.54:1) هو أفتح رمادي يجتاز الاختبار على الأبيض.
W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)
W3C — WCAG 2.2, 1.4.11 Non-text Contrast