تباين الألوان وقراءة النص
اخترت لمتجرك نصًا رماديًا فاتحًا على خلفية بيضاء لأنه يبدو أنيقًا. على شاشتك يبدو واضحًا، لكن على جوال في ضوء الشمس، أو لعميل كبير في السن، قد لا يُقرأ. نسبة التباين تقيس ذلك برقم بدل التخمين.
ما هي نسبة التباين؟
رقم من 1:1 إلى 21:1 يقارن سطوع لون النص بسطوع الخلفية. 1:1 يعني لونين متطابقين، و21:1 أسود على أبيض. إرشادات الوصول WCAG تطلب 4.5:1 على الأقل للنص العادي في المستوى AA، و3:1 للنص الكبير، و7:1 للنص العادي في المستوى AAA.
نص بلون #0F6B5F على خلفية #FFFFFF: النسبة 6.39:1. ينجح في AA للنص العادي، وفي AAA للنص الكبير، ويرسب في AAA للنص العادي الذي يحتاج 7:1.
الرمادي #767676 على الأبيض: 4.54:1 وينجح في AA.
الرمادي #777777 على الأبيض: 4.48:1 ويرسب، رغم أن اللونين متجاوران تقريبًا.
الطريقة
- افتح فاحص تباين الألوان وأدخل لون النص ولون الخلفية بصيغة HEX أو RGB أو HSL.
- اقرأ النسبة والنجاح أو الرسوب لكل مستوى.
- راجع العينة الحية بالعربية والإنجليزية.
- إن رسب اللون، استخدم الاقتراحات: أقرب لون ينجح على الطريق نحو الأسود أو الأبيض.
أين تفحص في متجرك؟
- نص الأزرار فوق لون الزر، خاصة زر الإضافة إلى السلة.
- السعر والخصم، فهما أهم نص في صفحة المنتج.
- النص الرمادي الصغير، مثل مدة الشحن وسياسة الإرجاع.
- روابط التذييل على خلفية داكنة.
ما لا تقيسه الأداة
- تقارن لونين مصمتين فقط، ولا تفحص النص فوق الصور أو التدرجات.
- النجاح والرسوب بالنسبة الدقيقة غير المقربة: 4.499 تظهر 4.49 وترسب في 4.5:1.
- النسبة لا تقيس كل ما يؤثر في القراءة، مثل سُمك الخط ونوعه وسطوع الشاشة.
لتعرف كود لون من شعارك أو صورة منتجك، استخدم منتقي الألوان من الصور. ولاستخراج ألوان هوية كاملة من صورة، استخدم استخراج لوحة الألوان، ثم افحص كل لون نص فوقها هنا.
أسئلة شائعة
هل يكفي أن يبدو النص واضحًا على شاشتي؟
لا. شاشتك وعيناك ليست مقياسًا لكل العملاء. الرقم يعطيك حكمًا ثابتًا لا يعتمد على شاشة بعينها.
ما الفرق بين AA وAAA؟
AA هو الحد الأدنى المطلوب عادة، وAAA مستوى أعلى أصعب في التحقيق. للنص العادي: 4.5:1 لمستوى AA و7:1 لمستوى AAA.
هل تدعم الأداة الألوان الشفافة؟
لون النص الشفاف يُدمج أولًا مع الخلفية ثم تُحسب النسبة. أما الخلفية الشفافة فتُرفض، لأن نتيجتها تعتمد على ما خلفها.