فحص تباين الألوان WCAG
يحسب نسبة التباين بين لون النص ولون الخلفية، ويبين هل تنجح في مستويي WCAG AA وAAA للنص العادي والكبير، مع معاينة.
جرّب أداة أخرى
اخترناها لتكمل هذه الأداةأداة فحص تباين الألوان من Tooleem تأخذ لون النص ولون الخلفية، بكود HEX أو بالاختيار من لوحة الألوان، وتحسب نسبة التباين بينهما وفق إرشادات WCAG 2.1. تعرض النتيجة لأربع حالات: النص العادي والنص الكبير، في المستوى AA والمستوى الأعلى AAA، مع معاينة لنص تجريبي بالحجمين وزر لتبديل اللونين. تفيد مصممي المواقع والتطبيقات ومن يريد محتوى مقروءاً لضعاف البصر. الحساب في متصفحك.
طريقة الاستخدام
- 01اختر لون النصاكتب كود HEX مثل #333333 أو اختر اللون.
- 02اختر لون الخلفيةبالطريقة نفسها، أو اضغط تبديل لعكس اللونين.
- 03اقرأ النسبة والنتائجتظهر نسبة التباين ونجاح أو فشل كل حالة، مع معاينة للنص.
متى تفيدك هذه الأداة؟
- تصميم الأزرار والروابطالتأكد من أن نص الزر مقروء فوق لونه.
- إمكانية الوصولمراجعة ألوان الموقع وفق معيار يُطلب في كثير من المشاريع الحكومية والمؤسسية.
- ألوان العلامة التجاريةاختيار درجة من لون العلامة تصلح للنصوص دون الإخلال بالهوية.
أمثلة
- رمادي داكن على أبيض#333333 على #FFFFFF تعطي تباين 12.63 إلى 1، فتنجح في كل المستويات للنص العادي والكبير.
- رمادي فاتح على أبيض#999999 على أبيض تعطي نحو 2.85 إلى 1، فتفشل حتى في AA للنص الكبير الذي يحتاج 3 إلى 1.
- أبيض على أزرقنص أبيض على #3B82F6 يعطي نحو 3.68 إلى 1، فينجح للنص الكبير في AA ويفشل للنص العادي.
نصائح لنتيجة أفضل
- النص العربي يحتاج هامشاًالخطوط العربية ذات الضربات الرفيعة والنقاط الصغيرة تستفيد من تباين أعلى من الحد الأدنى، خاصة في الأحجام الصغيرة.
- النص الكبير ليس كل عنوانالكبير في WCAG هو 18 نقطة أو أكبر، أو 14 نقطة غامقة، أي نحو 24 بكسل أو 19 بكسل غامق.
- الصور والتدرجاتعلى خلفية متدرجة أو صورة، افحص أضعف نقطة يقع عليها النص.
كيف تُحسب نسبة التباين؟
تحسب الأداة الإضاءة النسبية لكل لون من قيم RGB بعد تصحيح جاما، ثم تقسم إضاءة اللون الأفتح زائد 0.05 على إضاءة الأغمق زائد 0.05. تتراوح النسبة من 1 إلى 1 للونين متطابقين حتى 21 إلى 1 للأسود على الأبيض. هذه هي الطريقة المعرفة في إرشادات WCAG 2.1 من W3C.
مستويات AA وAAA
وفق المعيارين 1.4.3 و1.4.6 في WCAG 2.1: يحتاج النص العادي 4.5 إلى 1 للمستوى AA و7 إلى 1 للمستوى AAA، ويحتاج النص الكبير 3 إلى 1 للمستوى AA و4.5 إلى 1 للمستوى AAA. المستوى AA هو المطلوب عادة في المواقع، وAAA مستوى أعلى للمحتوى الذي يحتاج وضوحاً أكبر.
ما الذي لا يقيسه التباين؟
نسبة التباين تقيس الفرق في الإضاءة فقط. لا تحكم على حجم الخط أو سماكته أو جماله، ولا تغني عن الاختبار مع المستخدمين. ولا تعتمد على اللون وحده لنقل المعلومة، فبعض القراء لا يميزون الألوان.
أسئلة شائعة
ما نسبة التباين المطلوبة للنص؟
4.5 إلى 1 على الأقل للنص العادي، و3 إلى 1 للنص الكبير، في المستوى AA من WCAG 2.1.
ما الفرق بين AA وAAA؟
AA هو المستوى المعتاد للمواقع، وAAA مستوى أعلى يتطلب 7 إلى 1 للنص العادي و4.5 إلى 1 للكبير.
ما المقصود بالنص الكبير؟
نص بحجم 18 نقطة أو أكبر، أو 14 نقطة غامقاً، أي نحو 24 بكسل أو نحو 19 بكسل غامق.
هل تقبل الأداة كود HEX المختصر؟
نعم، مثل #0F0، ويُفهم كصيغته الكاملة.
هل تُحفظ الألوان؟
لا. يجري الحساب في متصفحك فقط.