رأيت #999 على أبيض ألف مرّة. التعليقات، ونصّ العنصر النائب، وتلميحات النماذج، والتسميات الثانوية، والخطّ الصغير تحت زرّ. هي الطريقة الافتراضية لقول «هذا أقلّ أهمّية».
نسبة تباينه 2.85:1. الحدّ الأدنى لنصّ المتن 4.5:1. ليس على الحافّة — بل ناقص نحو 40%.
من أين تأتي 4.5:1
الرقم ليس اعتباطيًّا. وجدت البحوث في حسّاسية التباين أن من بصره 20/40 — وهو حدّ رخصة القيادة في معظم البلدان، وعادي تمامًا بعد الخمسين — يحتاج نحو 1.5 ضعف تباين من بصره 20/20. أُخذ الأساس للنص المقروء 3:1، و3 × 1.5 = 4.5.
فالحدّ يجيب عن سؤال محدّد: هل يستطيع من بصره ضعيف قليلًا، بنظّارة خاطئة أو بلا نظّارة، أن يقرأ هذا؟ ليست تلك حالة طرفية. بل هي معظم من تجاوز الخمسين، وكل من على هاتف في ضوء النهار، وكل من على شاشة رخيصة بزاوية.
النص الكبير يحصل على حدّ أدنى 3:1، لأن الحجم يعوّض التباين. لكن «الكبير» له تعريف محدّد — 18 نقطة، أو 14 نقطة عريضة، أي نحو 24 بكسل و18.5 بكسل. العنوان بحجم 16 بكسل شبه العريض لا يتأهّل، وهذا الاستثناء يُدَّعى له باستمرار.
المعادلة، ولماذا يخفق التقدير بالعين
النسبة هي (L₁ + 0.05) / (L₂ + 0.05)، حيث L هي الإضاءة النسبية. تحسب 0.05 الضوء المحيط المنعكس عن الشاشة، ولهذا لا يبلغ شيء اللانهاية أبدًا — فالأسود الصافي على الأبيض الصافي 21:1، وهو الأقصى.
الإضاءة هي حيث ينكسر الحدس. فكل قناة تُجعل خطّية أولًا — بفكّ ترميز غاما الذي يطبّقه sRGB — ثم تُوزَن:
L = 0.2126 R + 0.7152 G + 0.0722 B
الأخضر يُحسب عشرة أضعاف ما يُحسب الأزرق. تطوّرت الرؤية البشرية بذروة حسّاسية في الجزء الأخضر من الطيف، والمعادلة تعكس ذلك.
النتيجة صادمة ومخالفة للحدس تمامًا:
- الأصفر الصافي على أسود — 19.56:1. ينجح في كل شيء.
- الأزرق الصافي على أسود — 2.44:1. يخفق في كل شيء.
كلاهما «لون مشبَع ساطع على أسود». كلاهما يبدو زاهيًا. أحدهما يكاد يبلغ أقصى تباين ممكن والآخر غير مقروء، ولا قدر من النظر إليهما يخبرك أيّهما أيّ. متوسّط قيم RGB — الاختصار الذي يجريه فحص ذهني سريع — يخطئ في هذا بالضبط.
فقِسه. لا تحكم عليه بالعين. جرّب الاثنين في فاحص التباين وراقب الأرقام.
الرماديات التي تنجح
على خلفية بيضاء، هذه هي الصورة كلها:
#767676 يستطيع حمل نصّ متن على أبيض. الرماديان على جانبَي ذلك الخطّ يبدوان متشابهين وليسا كذلك.انظر إلى #767676 و#999999 أعلاه وحاول أن ترى أيّهما يخفق. تلك حجّة هذه المقالة كلها في سطر: بينهما درجتان، ويبدوان متشابهين، وأحدهما غير مقروء لعدد كبير جدًّا من الناس.
لا شيء أفتح من #767676 يستطيع حمل نصّ متن على أبيض. تلك الحقيقة الواحدة تحسم معظم نزاعات التباين قبل أن تبدأ.
المواضع الأربعة التي يقع فيها الخطأ
نصّ العنصر النائب. تعرضه المتصفّحات رماديًّا افتراضيًّا، ثم يفتّحه المصمّمون أكثر. هو كثيرًا ما يكون التسمية الوحيدة للحقل — ومتى بدأ أحد بالكتابة اختفى كليًّا، وتلك مشكلة أخرى أسوأ. استعمل تسمية حقيقية فوق الحقل.
حدود حقول النماذج. يشترط WCAG 1.4.11 نسبة 3:1 لأجزاء الواجهة التي ليست نصًّا: حدود المدخلات، والأيقونات، وحلقات التركيز، وخطوط الرسوم البيانية. فالصفحة التي تنجح كل كلمة فيها قد تخفق هنا، والنموذج الذي حدود حقوله #e5e5e5 نموذج لا يرى بعض الناس حدوده.
النص فوق الصور. تتغيّر النسبة عبر الصورة. افحص أفتح نقطة وأدكنها يعبرهما النص، لا المتوسّط — فالعنوان المقروء فوق السماء والمختفي فوق المبنى هو النتيجة المعتادة. فإن أخفق أيّ من الطرفين، احتاج النص حجابًا خلفه.
الضوابط المعطَّلة. يستثنيها WCAG. ذلك استثناء امتثال لا استثناء قابلية استعمال — فالزرّ المعطَّل الذي لا يستطيع أحد قراءته يبقى زرًّا لا يستطيع أحد قراءته، والمستخدمون لا يميّزون «معطَّل» من «مكسور».
الوضع الداكن ليس إعفاءً
عكس اللوحة لا يحفظ النسب، لأن الإضاءة ليست متماثلة على الجانبين. فالأبيض الصافي على الأسود الصافي 21:1 من الناحية التقنية لكنه ينتج هالة — الوهج الذي يجعل النص يبدو مهتزًّا، خاصّةً لمن عنده انحراف في البصر. معظم السمات الداكنة المبنيّة جيّدًا تستعمل أبيض مائلًا نحو #e8e8e8 على شبه أسود نحو #121212 لهذا السبب بالضبط.
الألوان المشبَعة تتصرّف على نحو مختلف أيضًا. فالأزرق الذي يُقرأ جيّدًا على أبيض كثيرًا ما يكون شديد الدكنة على أسود ويحتاج تفتيحًا كبيرًا. كل زوج يجب فحصه في السمتين — لا تحويل ينقل النتائج بينهما.
التسلسل دون تفتيح النص
سبب اللجوء إلى الرمادي حقيقي: المعلومات الثانوية ينبغي أن تبدو ثانوية. لكن الإضاءة أداة واحدة من أدوات عدّة، وهي الوحيدة التي لها أرضية في إمكانية الوصول. أما البقيّة فلا:
- الحجم. 14 بكسل مقابل 16 بكسل يُقرأ تابعًا بتباين كامل.
- الوزن. عادي مقابل شبه عريض، بلا تغيير لون إطلاقًا.
- المسافة. البعد عن المحتوى الرئيسي يشير إلى العلاقة أقوى ممّا يشير اللون.
- الموضع. ما هو تحت ومزاح يُفهم ثانويًّا بلا أي تنسيق.
استعمل #595959 بحجم 14 بكسل بدل #999 بحجم 16 بكسل. فهو أهدأ في التخطيط، ويبقى الجميع قادرًا على قراءته.
بناؤه داخل اللوحة
تدقيق الألوان بعد وقوعها لا يثبت أبدًا. ولّد سلّمًا يكون الجواب فيه محسومًا سلفًا. ابنِ سلّم درجات، وقِس كل خطوة مرّة واحدة، وسجّل أي الخطوات آمنة للنص. عندئذٍ تصير «استعمل 700 لنصّ المتن» قاعدةً يتبعها أي أحد بلا إعادة اشتقاقها.
مولّد اللوحات يبلّغ أين يقع ذلك الخطّ لأي صبغة تعطيه إياها، وفاحص التباين يعطيك أقرب درجة من لونك تنجح — الصبغة نفسها، والإشباع نفسه، وإضاءة معدَّلة. ذلك عادةً هو الفرق بين إصلاح يُعتمد وآخر يُتراجَع عنه لأنه يبدو خاطئًا.
الخلاصة
نصّ المتن يحتاج 4.5:1، و#767676 أفتح رمادي يبلغها على الأبيض. الأزرق لا يسهم بإضاءة تُذكر، فالأزرق الساطع على داكن يخفق بينما الأصفر الساطع ينجح بيسر — لا تستطيع الحكم على هذا بالعين. الحدود والأيقونات وحلقات التركيز تحتاج 3:1 خاصّة بها. حين يحتاج شيء أن يبدو ثانويًّا، اجعله أصغر أو أخفّ وزنًا لا أفتح لونًا.