أدوار الألوان الخمسة
تحت «التصميم» و«الألوان» تجد «لوحة ألوانك». لكل لون مهمة: «الخلفية» هي أساس الصفحة كلها، و«السطح» هو كل ما يقع فوقها — البطاقات والمربعات والحقول. «لون النص» مخصّص للنص الأساسي، و«لون التمييز» للأزرار والروابط وكل ما يؤدي إجراءً. «النص على الأزرار» هو لون الكتابة فوق لون التمييز؛ وإذا تركته فارغًا، نحسبه بحيث يكون مقروءًا.
تعيّن لونًا بالنقر على مربع لونه أو بكتابة قيمته الست عشرية (Hex) أسفله، مثل #8A4B2E، ثم التأكيد بالضغط على Enter. المربع المتقطّع يعني: لم يُعيَّن بعد، والقالب هو من يقرر. وعلامة × بجوار لون معيَّن تحرّره مجددًا، أما حرف i الصغير بجوار كل دور فيشرحه في جملة واحدة.
- افتح «التصميم» واختر «الألوان».
- انقر على مربع لون أحد الأدوار أو اكتب قيمته الست عشرية.
- تحقّق في المعاينة — يتم الحفظ تلقائيًا.
التنسيقات على عجلة الألوان
«اكتشاف تنسيقات الألوان» يفتح عجلة الألوان. النقطة الكبيرة فيها هي «اللون الأساسي»، وهو لون التمييز الخاص بك: ما تختاره على العجلة يُحفظ فورًا بوصفه لون التمييز. تسحب النقطة بالفأرة أو بإصبعك؛ وعندما تكون في موضع التركيز، تعمل مفاتيح الأسهم أيضًا، ومع مفتاح Shift بخطوات أكبر. ويجعل شريط التمرير «السطوع» أسفلها اللونَ أفتح أو أغمق.
وبجانبها تختار «التناغم»: «متجاورة» أو «أحادية اللون» أو «متكاملة» أو «متكاملة منقسمة» أو «ثلاثية» أو «مربّع» أو «درجات» أو «صوري الخاصة». وتعرض «لوحة الألوان» أسفلها الألوان المتناسقة مع قيمها الست عشرية؛ و«استخدم كـ…» أسفل أي لون يضعه على دور واحد بعينه.
«تطبيق على العلامة» يوزّع لوحة الألوان دفعة واحدة: اللون الأساسي بوصفه لون التمييز، ومعه خلفية فاتحة وسطح فاتح ولون نص داكن ونص أزرار بالأسود أو الأبيض — محسوبًا ليكون مقروءًا. وبعد ذلك يمكنك تغيير كل دور على حدة.
- تحت «الألوان» افتح «اكتشاف تنسيقات الألوان».
- اسحب النقطة الكبيرة إلى لونك الرئيسي واختر تناغمًا.
- انقر على «تطبيق على العلامة».
سهولة القراءة
أسفل لوحة الألوان، يقيس مربع «وضوح القراءة» أربعة أزواج من الألوان: «النص فوق الخلفية» و«النص فوق السطح» و«النص على الأزرار» و«لون التمييز على الخلفية» — وفق WCAG، بنسبة 4,5:1 على الأقل. يعرض كل زوج تباينه وحكمًا بالكلمات: «مقروء جدًا» أو «مقروء جيدًا» أو «على الحد — يصعب قراءته» أو «غير مقروء». ولا يُقاس الزوج الذي لم يُعيَّن أحد لونيه بعد.
إذا كان زوج ما غير مقروء، يظهر التحذير عند اللونين كليهما («تباين غير كافٍ مع: …») ويعرض المربع ما يترتب على ذلك في كل أداة. «يُستبدل في: …» يعني أن هذه الأداة تعرض هناك لونًا مقروءًا بدلًا من لونك — فالموقع الإلكتروني والنموذج وWordPress تستخدم الأسود أو الأبيض، والمتجر يستخدم لونه الخاص أولًا. و«يبقى كما هو في: …» يعني أن الأداة تعرض ألوانك تمامًا، حتى لو كانت قراءتها صعبة.
وتحت ذلك يظهر «هكذا يصبح مقروءًا»: ما يصل إلى ثلاث لوحات ألوان جاهزة ينجح فيها كل زوج. نحسب جميع الأزواج معًا كي لا يُفسد أي تصحيح زوجًا آخر — فكل لون يصبح أفتح أو أغمق فقط ويحتفظ بدرجته اللونية؛ ويبقى النص على الأزرار بلونك أو يصبح أسود أو أبيض. وتعرض معاينة صغيرة الأزواج الأربعة لكل اقتراح، ويظهر بجانبها أي لون يتغيّر وكيف. «تطبيق» يضع لوحة الألوان على علامتك التجارية، و«تراجع» يعيد ألوانك.
الألوان المقروءة تفيد الجميع: ضعاف البصر، وكل من ينظر إلى هاتفه تحت ضوء الشمس.
فحص التباين بالتفصيل
«فحص التباين بالتفصيل» يفحص زوجًا واحدًا عن قرب. في الأعلى تختار الزوج، وتظهر نسبته بخط كبير، مثل 5,20 : 1. وتحتها لون المقدمة والخلفية، لكلٍّ منهما مربع لون وشريط تمرير «السطوع» — وما تغيّره هنا يغيّر لون علامتك التجارية.
يبيّن الجدول المستويات التي يحققها الزوج: «نص كبير» و«نص صغير» و«الرسوم وعناصر التحكم»، لكلٍّ منها في مستويي AA وAAA مع «ناجح» أو «راسب». يحتاج النص الأساسي إلى 4,5:1، والعناوين الكبيرة إلى 3:1؛ أما لون التمييز بجوار الخلفية فيكفيه 3:1. وبجانبه ترى الزوج على هيئة صفحة صغيرة فيها عنوان وفقرة.
إذا لم يكن التباين كافيًا، تظهر «اقتراحات — الدرجة نفسها، أفتح أو أغمق فقط»: نقرة واحدة تضع اللون المقترح على الدور. وإذا تعذّر ذلك تمامًا بهذه الدرجة اللونية، يخبرك المربع بأن عليك اختيار أحد اللونين من جديد.
- تحت «الألوان» افتح «فحص التباين بالتفصيل».
- اختر في الأعلى الزوج غير المقروء.
- انقر على اقتراح أو اسحب شريط التمرير «السطوع» حتى يظهر «ناجح».