أضفت وضعًا داكنًا لموقعي، أي درجات الرمادي ولون الهوية أستخدم للنص على الخلفية الداكنة؟
أعد فحص كل زوج من جديد، فاللون الناجح على الأبيض قد يفشل على الأسود تقريبًا. لون الهوية #0F6B5F يعطي 6.39:1 على الأبيض لكن 2.93:1 فقط على #121212. أما الرمادي #9E9E9E فيعطي 6.99:1 على الخلفية الداكنة ويصلح للنص الثانوي، والأداة تقترح لك درجة أفتح من لون هويتك تنجح في الوضع الداكن.
لماذا لا تنتقل الألوان بين الوضعين؟
النسبة تقارن سطوع النص بسطوع الخلفية. في الوضع الفاتح تحتاج نصًا داكنًا، وفي الوضع الداكن تحتاج نصًا فاتحًا. اللون الداكن الذي يلمع على الأبيض يغرق حين تصبح الخلفية داكنة، لأن الفرق في السطوع بينهما يتلاشى. لهذا لا يكفي قلب الخلفية وترك ألوان النص كما هي.
لون الهوية: من ناجح إلى فاشل
- #0F6B5F على #FFFFFF: النسبة 6.39:1، ناجح في AA للنص العادي.
- #0F6B5F على #121212: النسبة 2.93:1، غير ناجح حتى في عناصر الواجهة.
- #0F6B5F على #1E1E1E: النسبة 2.61:1، أسوأ على الرمادي الداكن الشائع في البطاقات.
الحل ليس التخلي عن لون الهوية، بل استخدام نسخة أفتح منه للوضع الداكن. اكتب #0F6B5F في «لون النص» و#121212 في «لون الخلفية» في فاحص تباين الألوان، واختر الهدف 4.5:1. هنا ينقلب الوضع المعتاد: «أقرب لون أغمق» يقول إن الأسود الخالص نفسه لا يبلغ الهدف، بينما يظهر في «أقرب لون أفتح» اللون #3F897F بنسبة 4.55:1.
لاحظ أن #3F897F على الأبيض يعطي 4.12:1 ويفشل للنص العادي. أي أنك تحتاج فعلًا درجتين: #0F6B5F للوضع الفاتح و#3F897F للوضع الداكن، وكل منهما مفحوص على خلفيته.
درجات الرمادي للنص على الخلفية الداكنة
- الأبيض #FFFFFF على #121212: النسبة 18.73:1. ناجح في كل المستويات، لكن بعض المصممين يرونه حادًا للفقرات الطويلة.
- #B3B3B3 على #121212: النسبة 8.93:1، ناجح في AAA للنص العادي، ومناسب للنص الأساسي.
- #9E9E9E على #121212: النسبة 6.99:1، ناجح في AA للنص العادي ويفوته AAA بفارق ضئيل، ومناسب للنص الثانوي.
- #757575 على #121212: النسبة 4.07:1، غير ناجح للنص العادي رغم أنه يبدو مقروءًا.
- #616161 على #121212: النسبة 3.02:1، وتقترح الأداة بدلًا منه #7D7D7D بنسبة 4.55:1 عند الهدف 4.5:1.
واحذر من نقل رمادي الوضع الداكن إلى الوضع الفاتح: #9E9E9E نفسه على الأبيض يعطي 2.68:1 ويفشل.
طريقة عمل منظمة
- اكتب قائمة بكل ألوان النص في موقعك: الأساسي والثانوي والروابط والأسعار وحدود الخانات.
- إن كانت ألوانك مأخوذة من صورة الهوية، استخرجها أولًا عبر استخراج لوحة الألوان.
- افحص كل لون مرتين: مرة على خلفية الوضع الفاتح ومرة على خلفية الوضع الداكن.
- للألوان الفاشلة في الوضع الداكن استخدم «أقرب لون أفتح»، ثم انسخ التقرير أو نزّله ملفًا نصيًا لتسجل القيم.
الأداة تفحص الألوان المصمتة فقط. إن استخدمت ظلالًا أو تدرجات خلف النص في الوضع الداكن فافحص أفتح نقطة فيها. والنجاح في النسبة لا يعني أن الوضع الداكن متاح بالكامل، بل أن ألوان النص فيه مقروءة بمقياس WCAG 2.
أسئلة شائعة
لماذا لا يظهر اقتراح أغمق على الخلفية الداكنة؟
لأن تغميق النص على خلفية داكنة يقلل التباين. الطريق الوحيد هو التفتيح، فتعرض الأداة أن الأسود الخالص لا يبلغ الهدف.
هل أستخدم الأسود الخالص #000000 خلفية؟
القرار تصميمي. النسب على #000000 أعلى قليلًا منها على #121212، لكن افحص ألوانك على الخلفية التي ستستخدمها فعلًا.
هل تفحص الأداة الوضع الداكن تلقائيًا؟
لا. هي تقارن لونين تكتبهما أنت. افحص كل زوج بنفسك، ويمكنك استخدام «تبديل اللونين» للمقارنة السريعة.
