اللون

لون يسهل الوصول إليه

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

<!-- Good: Denotes state without colors alone -->
<div class="error-msg">
  <span aria-hidden="true">❌</span>
  <span>The password entered was invalid.</span>
</div>

التباين

• الحد الأدنى لمعايير التباين: يجب الحفاظ على نسبة 4.5:1 للنص العادي و3:1 للنص الكبير أو الرموز.
• التأكّد من استيفاء معايير تباين العناصر غير النصية: يجب الحفاظ على نسبة تباين لا تقل عن 3:1 لحدود مكوّنات واجهة المستخدم وحالاتها.
  • ويشمل ذلك العناصر المرئية (الحدود والخلفيات وظلال المربّعات والخطوط السفلية) التي تشكّل الحدود أو تشير إلى وجود مكوّن في واجهة المستخدم (مثل حدود حقل الإدخال).
  • ويشمل ذلك أيضًا العناصر المرئية التي تشير إلى الحالات النشطة داخل مكوّن (مثل علامات الاختيار في مربّعات الاختيار أو أزرار التبديل).
  • تنبيه: قد يمثّل استيفاء نسبة التباين 3:1 للعناصر غير النصية تحديًا للتصاميم البسيطة. يمكن أن يؤدي استخدام التدرجات الناعمة أو الظلال الداخلية أو الخارجية الخفيفة إلى تخفيف الحدود المرئية مع تلبية متطلبات تسهيل الاستخدام.
• استخدام prefers-contrast فقط عند الحاجة: يمكنك استخدام @media (prefers-contrast: more) عندما يتضمّن التصميم عناصر ذات تباين منخفض (مثل الحدود الدقيقة والنصوص الثانوية الخافتة) التي تحتاج إلى تعزيز، ولن تحتاج معظم المواقع الإلكترونية التي تستوفي الحد الأدنى من التباين إلى استخدام هذه الميزة.

أنظمة الألوان الفاتحة والداكنة

• إتاحة أنظمة الألوان الفاتحة والداكنة: يمكنك استخدام @media (prefers-color-scheme: dark) وإقرانها بسمة CSS‏ color-scheme لكي تتطابق عناصر التحكّم في النماذج وأشرطة التمرير والأسطح الأخرى التي يعرضها وكيل المستخدم. لمزيد من التفاصيل، يُرجى الاطّلاع على الوضع الداكن.

وضع "الألوان الإلزامية"

• إتاحة "وضع الألوان المفروضة": في "وضع الألوان المفروضة" (التباين العالي في نظام التشغيل Windows)، يتجاهل المتصفّح ألوان المؤلف باستخدام كلمات رئيسية للنظام ويجرّد background-image وbox-shadow وborder-image. حدِّد الألوان الاحتياطية للنظام لرموز الألوان باستخدام @media (forced-colors: active).
• استخدِم forced-color-adjust: none فقط عندما يكون اللون معلومة أساسية (مثل أداة تمييز البنية ونموذج علبة الألوان). لا تستخدِم forced-color-adjust: none لمجرد الحفاظ على المظهر الجمالي.
• لا تعتمد على background-image أو box-shadow أو border-image لنقل الحدود أو الفواصل أو الحالة: تختفي هذه العناصر في وضع "الألوان المفروضة" (وغالبًا في الطباعة أيضًا). وإذا كان عليك استخدامها، تأكَّد من توفّر بديل في وضع الألوان المفروضة، مثل outline أو border مع كلمات رئيسية لألوان النظام (CanvasText أو LinkText أو ButtonText أو Highlight أو GrayText أو غيرها).

جارٍ إنشاء تدرّجات اللون

قبل إنشاء تدرجات الألوان ديناميكيًا، تحقَّق مما إذا كان بإمكانك استخدام رمز تصميم حالي ومحدّد مسبقًا. يسمح هذا بمزيد من التحكم في المصمم ويضمن الاتساق.

إذا كنت بحاجة إلى إنشاء ألوان أفتح أو أغمق بشكل ديناميكي:

• لا تكتفِ بضبط قناة الإضاءة في oklch/oklab أو lch/lab، مثل oklab(from var(--primary) 0.9 a b). على الرغم من أنّ هذه هي الطريقة الصحيحة من الناحية النظرية، لا تطبّق المتصفّحات بعد عملية تعيين النطاق، لذا لا يمكن توقّع اللون الناتج.
• يمكنك استخدام color-mix() للمزج مع الأبيض أو الأسود (يُفضَّل استخدام oklab)، ما يحافظ على اللون بأمان في النطاق، ولكنّه يميل إلى إلغاء تشبُّع الألوان بشكل مفرط وإنتاج تدرّجات وظلال باهتة.
• يمكنك الجمع بين تعديل السطوع وأي من الطرق الأخرى (مثل color-mix(in oklab, oklch(from var(--primary) 0.9 c h), white 30%)) لتحقيق التوازن بين الاثنين، ولكن تجنَّب تجاوز% 30 في تعديل السطوع.