رموز الألوان: الأساسية والدلالية

01طبقتان من الرموز

تأتي رموز الألوان عادة في طبقتين. الرموز الأساسية هي اللوحة الخام مثل blue-500 أو gray-100. والرموز الدلالية تصف وظيفة، مثل text-primary وsurface وborder وaccent وdanger. تستخدم المكوّنات الطبقة الدلالية فقط، ويشير كل رمز دلالي إلى رمز أساسي.

02سمِّ بحسب الدور وخطّط للحالات

الرمز المسمى blue-button يفقد معناه لحظة يتحول اللون إلى الأخضر. أما الرمز المسمى accent فيصمد أمام التغيير لأن قيمته وحدها تتغير. كما تخبر الأسماء الدلالية المطورين بمكان استخدام اللون.

• رموز النص: الرئيسي والثانوي والمعطّل، ومنها text-primary
• رموز الأسطح: الخلفية العادية والمرتفعة، ومنها surface
• رموز الحدود: الحد العادي والقوي، ومنها border
• اللون المميز وحالاته عند التمرير والضغط، ومنه accent
• ألوان التغذية الراجعة للخطر والنجاح والتحذير، ومنها danger

خطّط للحالات مبكرًا. تحتاج حالات التمرير والنشاط والتركيز والتعطيل إلى قيمة محددة لكل منها بدل الارتجال.

تغيّر العناصر التفاعلية مظهرها، ويستحق كل تغيير رمزًا. قد يستخدم الزر accent لتعبئته الافتراضية وaccent-hover عند مرور المؤشر وaccent-active أثناء الضغط. ويستخدم العنصر المعطّل زوجًا خافتًا مثل text-disabled على تعبئة surface-muted.

• التمرير: أغمق أو أفتح قليلًا من الافتراضي.
• النشاط: درجة إضافية بعد التمرير.
• التركيز: حلقة واضحة المعالم لا تعتمد على اللون وحده.
• المعطّل: تأكيد أقل، ورغم أن العناصر المعطّلة معفاة من متطلبات التباين، أبقِ التسمية مقروءة.

لا تستخدم اللون إشارة وحيدة. اقرن الأحمر الدال على الخطر بأيقونة أو تسمية نصية.

03وضع داكن وسمات بتكلفة قليلة

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

في السمة الفاتحة تُعرَّف القيم الأساسية على العنصر الجذر، فيكون السطح أبيض والنص رماديًا داكنًا جدًا: <code>;--surface<;/code>; و<code>;--text-primary<;/code>;

وفي السمة الداكنة يعيد استعلام الوسائط تعيين الرمزين نفسيهما بقيم داكنة عندما يفضّل المستخدم الوضع الداكن، دون أي تغيير في المكوّنات: <code>;prefers-color-scheme: dark<;/code>;

ثم تستخدم المكوّنات <code>;background: var(--surface)</code>; ولا تستخدم أبدًا قيمة hex مباشرة.

04افحص التباين لكل زوج من الرموز

الرموز لا تضمن ألوانًا مقروءة. افحص كل زوج يظهر معًا في كل سمة. تشترط WCAG نسبة 4.5:1 على الأقل للنص العادي و3:1 للنص الكبير ولمكوّنات الواجهة مثل حدود حقول الإدخال.

1. اذكر الأزواج التي تظهر معًا: text-primary على surface، وaccent على surface، والنص على accent.
2. قِس كل زوج بأداة فحص التباين.
3. دوّن النتيجة بجانب الرمز.
4. كرّر ذلك للوضع الداكن ولحالات التعطيل.

وثّق كل زوج معتمد في نظام التصميم، ليُفحص التباين مرة واحدة بدل فحصه في كل شاشة.

تفيد الرموز أيضًا عند التسليم، إذ ينسخ المطور اسم الرمز بدل رمز hex، ويتطلب أي تحديث لاحق للهوية تغيير قيمة واحدة في مكان واحد. أبقِ اللوحة الأساسية صغيرة، وغالبًا بضعة ألوان محايدة مع لون أو لونين بعدة درجات من الإضاءة لكل منهما.

05المصادر

• W3C. Web Content Accessibility Guidelines (WCAG) 2.2. https://www.w3.org/TR/WCAG22/
• MDN Web Docs. Using CSS custom properties (variables). https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties