لون خلفية الوضع الفاتح: لماذا لا يكفي #FFFFFF، و8 ألوان تستخدمها بدلاً منه

أفضل لون لخلفية الوضع الفاتح ليس #FFFFFF. ضع الصفحة على رمادي هادئ مثل #F2F2F7 واحتفظ بالأبيض للبطاقات التي تجلس فوقها، ليكون للأسطح شيء ترتفع عنه. إليك لماذا تفشل الشاشة البيضاء بالكامل، والحلول الثلاثة، والألوان الثمانية التي تسلّمها لمطوّرك.

لماذا تصبح الشاشة البيضاء بالكامل مسطّحة

معظم المصممين يبدؤون الوضع الفاتح بطلاء كل شيء بالأبيض. إنه التعبئة الافتراضية في كل أداة تصميم والخلفية الافتراضية في كل متصفح، فيبدو محايداً. هو ليس كذلك. إنه الخيار الوحيد الذي يسلبك القدرة على إظهار العمق.

البطاقة يجب أن تبدو مختلفة عن الصفحة التي تجلس عليها. حين يكون كلاهما #FFFFFF، لا يبقى للفصل بينهما إلا حدّ أو ظل، فيتحمل هذان التفصيلان كل العمل. أضف بضع بطاقات أخرى وتتحول الشاشة إلى شبكة من الخطوط.

الوضع الداكن حلّ هذه المشكلة أصلاً. هناك، السطح الأفتح يعني سطحاً أعلى، فكل طبقة أفتح بدرجة من التي تحتها. ورقتنا عن أنظمة ألوان الوضع الداكن تشرح هذا التدرج، وتصميم الوضع الداكن يغطي بقية اللوحة. الوضع الفاتح لا يملك درجة أفتح فوق الأبيض، لذا يحتاج حركة مختلفة: اخفض الأرضية.

الحل 1: ابدأ الصفحة من #F2F2F7

#FFFFFF صفحة

الصفحة والبطاقات كلاهما #FFFFFF

#F2F2F7 صفحة

الصفحة #F2F2F7 والبطاقات #FFFFFF

#F2F2F7 هو الرمادي الذي يضعه iOS خلف قوائمه المجمّعة. إنه system gray 6 من Apple في الوضع الفاتح، وإرشاد Apple نفسها هو استخدام ألوان الخلفية المجمّعة لعروض الجداول المجمّعة. الإعدادات هي المثال الكلاسيكي: صفحة رمادية شاحبة وصفوف بيضاء.

هذا التغيير الواحد يمنحك أرضية وسقفاً. الصفحة هي الأرضية، والبطاقات والأوراق السفلية هي السقف، والفجوة بينهما مرئية دون رسم خط واحد.

أين تطبّقه:

• خلفية الصفحة، خلف كل شاشة فيها بطاقات أو قوائم أو أقسام.
• القوائم المجمّعة وشاشات الإعدادات، حيث الصفوف بيضاء والفجوات رمادية.
• حقول الإدخال داخل بطاقة بيضاء، التي يمكن أن تأخذ رمادي الصفحة فتبدو غائرة.

إذا كانت شاشتك مقالاً أبيض طويلاً بلا بطاقات إطلاقاً، فالأبيض مناسب. القاعدة للواجهات المصنوعة من أسطح.

الحل 2: دع الظلال تقوم بالرفع

في الوضع الداكن، الارتفاع هو لون أفتح. في الوضع الفاتح، تبقى الأسطح بيضاء ويكبر الظل بدلاً من ذلك. البطاقة في وضع الراحة تأخذ ظلاً صغيراً ناعماً، والقائمة أو الحوار الذي يطفو فوقها يأخذ ظلاً أكبر وأنعم.

عادتان تجعلان الشكل صحيحاً:

• لوّن الظل بحبرك، لا بالأسود الصرف. ظل بلون نصك (المنشور استخدم #1B1530، بنفسجي غامق) يبدو جزءاً من الواجهة. الأسود الصرف يبدو كبقعة.
• اجعل الأكبر يعني الأعلى. استخدم سلّماً قصيراً من أربع درجات، من الصغيرة إلى الكبيرة، واربط كل مستوى بوظيفة: بطاقة، بطاقة مرتفعة، قائمة، حوار. ثم لا تخترع خامسة أبداً.

/* A starting point, not a platform spec. Tune the values to your brand. */ :root { --shadow-ink: 27 21 48; /* #1B1530 */ --shadow-sm: 0 1px 2px rgb(var(--shadow-ink) / 0.08); --shadow-md: 0 4px 12px rgb(var(--shadow-ink) / 0.10); --shadow-lg: 0 12px 32px rgb(var(--shadow-ink) / 0.14); } .card { background: #FFFFFF; box-shadow: var(--shadow-sm); } .menu { background: #FFFFFF; box-shadow: var(--shadow-md); } .dialog { background: #FFFFFF; box-shadow: var(--shadow-lg); }

الصفحة الرمادية هي ما يجعل هذا ينجح. على صفحة بيضاء يكاد الظل الناعم يختفي، فيعوّض الناس بظل أغمق أو بحدّ. على #F2F2F7 يكفي ظل خفيف.

الحل 3: لطّف أسودك، ثم عمّق لونك المميز

نص #000000 الصرف على صفحة بيضاء أو شبه بيضاء أقسى مما يلزم، ويجعل كل لون آخر يبدو ضعيفاً بجانبه. Material 3 يجعل نصه الفاتح أهدأ بدرجة.

#1D1B20 نص

النص

#49454F ثانوي

النص الثانوي

#A9A8AA معطّل

معطّل، 38 بالمئة

• #1D1B20 للنص. هو لون on-surface في Material 3. أسود تقريباً مع لمسة بنفسجية، ويناسب الأبيض والرمادي معاً.
• #49454F للنص الثانوي مثل التعليقات وأسطر المساعدة والطوابع الزمنية. ما زال سهل القراءة، وأهدأ بوضوح من النص الرئيسي.
• نفس الحبر بنسبة 38 بالمئة للتسميات والأيقونات المعطّلة. فوق الأبيض يصبح #A9A8AA، وMaterial تستخدم هذه الشفافية بالضبط. النص المعطّل هو المكان الوحيد الذي يكون فيه التباين المنخفض هو المقصود، وWCAG تستثنيه.

اللون المميز يحتاج التصحيح المعاكس. لون علامة فاتح وساطع بدا رائعاً على شاشة داكنة يختفي على الأبيض.

#BB86FC

لون مميز فاتح على الأبيض

#6200EE

لون مميز عميق على الأبيض

#BB86FC هو البنفسجي الأساسي في Material للسمات الداكنة. على الأبيض يكاد يختفي، وهذه مشكلة لأي شيء يجب أن يُقرأ كزر أو رابط.

#6200EE هو البنفسجي الأساسي في Material للسمات الفاتحة، من العائلة نفسها، وعميق بما يكفي ليثبت. حين تبني سمة فاتحة، لا تعد استخدام لون السمة الداكنة المميز. اختر الدرجة الأعمق من الدرجة اللونية نفسها.

ألوان الوضع الفاتح الثمانية

انقر على أي شريحة لنسخ كودها.

#F2F2F7الأساس#FFFFFFالبطاقات#E5E5EAالفواصل#1D1B20النص#49454Fالثانوي#A9A8AAالمعطّل#6200EEالأساسي#B00020الخطأ

#E5E5EA هو iOS system gray 5، ويصلح للفواصل لأن الفاصل يكفي أن يُلاحَظ لا أن يُقرأ. حدّ الحقل يحتاج أكثر من ذلك. ورقتنا عن النص التوضيحي والتسميات تعطيك لون الحدود الذي يجب استخدامه بدلاً منه.

سلّم هذا لمطوّرك

الألوان الثمانية نفسها كخصائص CSS مخصصة:

:root { --color-base: #F2F2F7; --color-card: #FFFFFF; --color-divider: #E5E5EA; --color-text: #1D1B20; --color-text-secondary: #49454F; --color-text-disabled: #A9A8AA; --color-primary: #6200EE; --color-error: #B00020; } body { background: var(--color-base); color: var(--color-text); } .card { background: var(--color-card); } .caption { color: var(--color-text-secondary); } .card + .card { margin-top: 12px; } hr { border: 0; border-top: 1px solid var(--color-divider); }

إذا كنت تطلق سمة داكنة أيضاً، فأعطِ كل اسم من هذه الأسماء قيمة ثانية تحت @media (prefers-color-scheme: dark)، كما في خريطة رموز الوضع الداكن. الأسماء تبقى كما هي وتتغير القيم فقط، وهذا ما يمنع الوضع الفاتح من أن يصبح "الوضع الداكن مقلوباً".

الأرقام وراء عبارة "سهل الرؤية"

المنشور يقول "سهل الرؤية" و"صعب الرؤية". لمن يدافع عن الاختيار في اجتماع مراجعة، إليك الأرقام (نسب تباين WCAG 2 محسوبة على الأبيض):

حقيقة أخرى تستحق المعرفة: سطح Material 3 الفاتح نفسه ليس #FFFFFF أيضاً. إنه #FEF7FF، أبيض بالكاد ملوّن. حتى نظام التصميم الذي تعتبره معظم الفرق الخيار الافتراضي لا يطلي الشاشة بالأبيض الصرف.

الأسئلة الشائعة

ما أفضل لون خلفية للوضع الفاتح؟

رمادي فاتح ناعم مثل #F2F2F7 للصفحة، مع #FFFFFF للبطاقات فوقها. الرمادي يعطي الأسطح البيضاء شيئاً تبرز عنه، فتحتاج حدوداً وظلالاً أقل.

هل #FFFFFF لون خلفية سيئ؟

ليس دائماً، لكن الشاشة البيضاء بالكامل لا تملك وسيلة لإظهار العمق. تذوب البطاقات في الصفحة، فتتحمل الحدود والظلال كل العمل. الأبيض يعمل أفضل كلون للأسطح، لا للشاشة كلها.

ما هو #F2F2F7؟

هو iOS system gray 6 في الوضع الفاتح، الرمادي الذي تستخدمه Apple خلف القوائم المجمّعة مثل تطبيق الإعدادات. توصي Apple بألوان الخلفية المجمّعة لعروض الجداول المجمّعة.

ما لون النص الذي أستخدمه على خلفية بيضاء؟

أسود ناعم تقريباً مثل #1D1B20 للنص و#49454F للنص الثانوي. كلاهما من ألوان Material 3 ويُقرآن بسهولة على الأبيض وعلى #F2F2F7.

كيف تُظهر الارتفاع في الوضع الفاتح؟

بالظلال. في الوضع الداكن السطح الأفتح يعني الأعلى، لكن الوضع الفاتح لا يملك درجة أفتح فوق الأبيض، فتبقى الأسطح بيضاء ويكبر الظل مع الارتفاع.

هل يجب أن يتغير اللون المميز بين الوضعين الفاتح والداكن؟

نعم. لون مميز فاتح مثل #BB86FC يعمل على الشاشات الداكنة لكنه يكاد يختفي على الأبيض. استخدم درجة أعمق من الدرجة اللونية نفسها، مثل #6200EE، على الأسطح الفاتحة.

المصادر

• Apple Human Interface Guidelines، Color: #F2F2F7 هو systemGray6 في الوضع الفاتح (R242 G242 B247)، وألوان الخلفية المجمّعة مخصصة لعروض الجداول المجمّعة.
• أدوار ألوان Material 3، مقروءة من androidx Compose ColorLightTokens وPaletteTokens: on surface #1D1B20 (Neutral10)، on surface variant #49454F (NeutralVariant30)، السطح الفاتح #FEF7FF. راجع أدوار ألوان Material.
• شفافية التسميات والأيقونات المعطّلة 0.38 من رموز مكونات Material 3. #1D1B20 بنسبة 38 بالمئة فوق #FFFFFF يساوي #A9A8AA.
• #BB86FC و#6200EE هما اللونان الأساسيان في Material للداكن والفاتح. #B00020 هو لون الخطأ الأساسي الفاتح في Material. #E5E5EA هو iOS system gray 5 في الوضع الفاتح.
• WCAG 2.2، 1.4.3 Contrast (Minimum) و1.4.11 Non-text Contrast. النسب محسوبة بصيغة اللمعان النسبي في WCAG. النص المعطّل مستثنى من الحد الأدنى.
• حبر الظل #1B1530 ومستويات الظل الأربعة توصيتنا نحن، وليست قيمة منصة.
• نُشر أولاً كاروسيل على UX Brainy.