لماذا تبدو ألوان واجهتك مبتدئة: 6 حلول بالأكواد الدقيقة
ستة أخطاء لونية تجعل الواجهة تبدو مبتدئة، والحل الاحترافي لكل منها بالأكواد الدقيقة: لون مميز واحد، لون مع أيقونة وكلمات، مساحات مُفتَّحة، نص مميز أغمق، نص داكن على الأصفر، ودرجة لكل حالة.
اللون المبتدئ نادرًا ما يكون تنافرًا. هو ست عادات صغيرة: ألوان مميزة كثيرة، لون يؤدي مهمته وحده، تعبئات بكامل القوة في كل مكان، لون علامة فاتح يُستخدم للنص، أبيض على الأصفر، ودرجة واحدة لكل الحالات. اللون الاحترافي يبدو هادئًا لأن لكل واحدة من هذه قاعدة. إليك الست مع الأكواد.
1. لون مميز واحد، للإجراء
أحمر
أخضر
كهرماني
بنفسجي
محايد
محايد
محايد
لون مميز #6440E0
حين يكون لكل عنصر لونه الخاص، يفقد اللون معناه. لا يجد النظر مكانًا يستقر عليه، ويتنافس الإجراء الحقيقي مع الزينة.
اختر لونًا مميزًا واحدًا وأنفقه فقط على ما يمكن للناس التفاعل معه: الزر الرئيسي، التبويب المحدد، الرابط. وكل ما عدا ذلك يصبح محايدًا. إذا استطعت أن تشير إلى عنصر ملوّن وتقول "هذا غير قابل للضغط"، فانزع لونه. قاعدة 60-30-10 هي الفكرة نفسها بالنِّسب: اللون المميز هو العشرة الصغيرة.
2. لون وأيقونة وكلمات
البريد الإلكتروني
✕ مبتدئ: حدّ أحمر ولا شيء غيره
البريد الإلكتروني
أضف العنوان كاملًا، مثل sam@mail.com.
✓ محترف: لون وأيقونة وكلمات
البريد الإلكتروني
✕ مبتدئ: أي الحقلين خاطئ؟
البريد الإلكتروني
أضف العنوان كاملًا، مثل sam@mail.com.
✓ محترف: ما زال واضحًا
نحو 8 بالمئة من الرجال من أصول شمال أوروبية يجدون صعوبة في التمييز بين الأحمر والأخضر، وهو الرقم المعتاد "1 من كل 12 رجلًا". وبالنسبة لهم، ولكل من يستخدم هاتفه تحت الشمس، الحدّ الأحمر هو حدّ رمادي.
لذا تحتاج الحالة إلى ثلاث إشارات: لون، وأيقونة في المقدمة، وكلمات تقول ما يجب فعله. هذا هو WCAG 1.4.1، استخدام اللون: يمكن للون أن يدعم الرسالة، لكن لا يكون الطريقة الوحيدة لإيصالها. لوحة ألوان الأخطاء الكاملة في ورقتنا عن لون رسائل الخطأ.
3. فتّح المساحات الكبيرة
اشترك في Pro بـ $4
خرائط بلا إنترنت، بلا إعلانات، ومشاركة الرحلات.
ترقية✕ مبتدئ: البطاقة كلها بلون كامل
اشترك في Pro بـ $4
خرائط بلا إنترنت، بلا إعلانات، ومشاركة الرحلات.
ترقية✓ محترف: تفتيحة، ولون كامل على الزر
كتلة كبيرة من اللون بكامل قوته صاخبة، وتستنزف لونك المميز. وعندها لا يبقى للزر داخلها ما يميّزه، لأن كل ما حوله بنفس اللون أصلًا.
فتّح المساحة الكبيرة بدلًا من ذلك، واحتفظ باللون الكامل للجزء الذي يؤدي العمل. هنا تجلس البطاقة على #E6DDFF، درجة باهتة من البنفسجي نفسه، والزر بـ #6440E0 كاملًا. استخدم الحركة نفسها للافتات والصفوف المحددة والأقسام المميزة. تُظهر ورقتنا عن لوحات ألوان العلامة كيف تبني درجات التفتيح من صبغة واحدة.
4. أغمق نص اللون المميز
بنفسجي فاتح على أبيض
بنفسجي أغمق على أبيض
لون العلامة الفاتح جيد كتعبئة وضعيف كنص. يبدو #9A79FC ودودًا على زر، لكنه ينهار كرابط بحجم 14 px على الأبيض. الحل يحافظ على الصبغة ويخفض السطوع: #6440E0 هو البنفسجي نفسه، بعمق كافٍ للقراءة.
لمن يدافع عن القرار: #9A79FC على الأبيض نسبته 3.22 إلى 1، أقل من 4.5 إلى 1 التي يطلبها WCAG للنص، و#6440E0 نسبته 6.27 إلى 1. تشرح ورقتنا عن تباين الألوان الميسَّر الأرقام وكيفية فحصها.
احتفظ بنسختين من كل لون علامة: الساطعة للتعبئة والرسوم، والأعمق للنص والأيقونات الرفيعة.
5. نص داكن على الأصفر
أبيض على أصفر
داكن على أصفر
الأصفر والألوان الفاتحة ساطعة بطبيعتها، فالأبيض عليها لا يكاد يختلف عنها في السطوع. الأبيض على #FED480 نسبته 1.41 إلى 1. أما شبه الأسود مثل #161513 على الأصفر نفسه فنسبته 12.99 إلى 1.
تنطبق القاعدة على كل تعبئة فاتحة: الأصفر الباهت، النعناعي، الأزرق السماوي، الخوخي. إذا كانت الخلفية فاتحة فالنص داكن. يبدو الأمر معكوسًا لمصمم اعتاد الأبيض على لون العلامة، وهو من أسرع الطرق لجعل الزر يبدو احترافيًا.
6. درجة لكل حالة
افتراضي
مضغوط
معطّل
زر يبدو مضغوطًا كما يبدو في حالته العادية لا يعطي أي استجابة، وزر معطّل بنفس لون الزر النشط يبدو معطوبًا. امنح كل حالة درجتها من الصبغة نفسها: #6440E0 افتراضيًا، #4422B2 عند الضغط، وتفتيحة باهتة مثل #E6DDFF بنص #9A79FC مقروء عند التعطيل.
التعطيل هو الحالة الوحيدة التي يُقبل فيها التباين المنخفض، ويعفيها WCAG منه، لكن يجب أن يبقى النص مقروءًا بما يكفي ليفهم الناس ما كان الزر سيفعله. مجموعة الدرجات الثلاث نفسها تصلح للروابط والتبويبات ومفاتيح التبديل.
الحلول الستة في جدول واحد
| مبتدئ | محترف | القيمة |
|---|---|---|
| ألوان مميزة كثيرة | لون مميز واحد، للإجراء | #6440E0 على الشيء الوحيد الذي يُضغط عليه |
| اللون وحده | لون وأيقونة وكلمات | ليس الإشارة الوحيدة أبدًا |
| مساحات بلون كامل | مساحات مُفتَّحة | #E6DDFF في الخلفية، #6440E0 على الزر |
| لون علامة فاتح كنص | نص مميز أغمق | #6440E0 وليس #9A79FC |
| أبيض على أصفر | نص داكن على الأصفر | #161513 على #FED480 |
| درجة واحدة لكل الحالات | درجة لكل حالة | #6440E0 و#4422B2 و#E6DDFF مع نص #9A79FC |
الأسئلة الشائعة
ما الذي يجعل لوحة ألوان الواجهة تبدو هاوية؟
ألوان مميزة كثيرة، واللون وحده يحمل المعنى، وتعبئات بكامل القوة على المساحات الكبيرة، وألوان علامة فاتحة تُستخدم للنص. إصلاح هذه الأربعة يهم عادةً أكثر من تغيير اللوحة نفسها.
كم لونًا مميزًا يجب أن تحتوي الواجهة؟
واحد. استخدمه فقط لما يمكن للناس الضغط عليه أو التفاعل معه، وأبقِ كل شيء آخر محايدًا. ألوان الحالة مثل الأحمر للأخطاء منفصلة، وتأتي دائمًا مع أيقونة وكلمات.
ما لون النص الذي يوضع على خلفية صفراء؟
لون داكن. #161513 على #FED480 نسبته نحو 13 إلى 1، بينما الأبيض على الأصفر نفسه نحو 1.4 إلى 1. وينطبق الأمر نفسه على أي خلفية فاتحة.
كيف أجعل لون علامة فاتح مقروءًا كنص؟
احتفظ بالصبغة وخفّض السطوع. #9A79FC نسبته نحو 3.2 إلى 1 على الأبيض، و#6440E0، البنفسجي نفسه، نحو 6.3 إلى 1.
ما لون الزر عند الضغط عليه؟
درجة أغمق من الافتراضي، مثل #4422B2 مقابل #6440E0. تعطي الناس استجابة بأن الضغطة سُجلت، دون تغيير الصبغة.
هل يجب أن تستوفي الأزرار المعطلة متطلبات التباين؟
يعفي WCAG عناصر التحكم المعطلة من الحد الأدنى للتباين، لكن أبقِ النص مقروءًا ليعرف الناس ما يفعله الزر.
المصادر
- WCAG 2.2, 1.4.3 Contrast (Minimum) (4.5 إلى 1 للنص، والمكونات المعطلة معفاة) و1.4.1 Use of Color.
- النسب محسوبة بصيغة السطوع النسبي في WCAG:
#9A79FCعلى#FFFFFF3.22 إلى 1، و#6440E0على#FFFFFF6.27 إلى 1 (كلاهما بصبغة نحو 254 درجة)، و#FFFFFFعلى#FED4801.41 إلى 1، و#161513على#FED48012.99 إلى 1. - يصيب قصور رؤية اللونين الأحمر والأخضر نحو 8 بالمئة من الرجال من أصول شمال أوروبية، بحسب National Eye Institute.
- درجات الحالات (
#4422B2للمضغوط،#E6DDFFمع نص#9A79FCللمعطّل) من لوحتنا الخاصة. وألوان الفلاتر في القسم 1 للتوضيح فقط. - نُشرت أولًا كشرائح (carousel) على UX Brainy.
Want a palette that guides the eye across your whole product? Our team designs and builds UI and design systems with color decided once.
Get Started
