لماذا تتطلب WCAG تباين 4.5:1؟
هذه النسبة معيار AA الذي يضمن تمكّن مستخدمي ضعاف البصر من قراءة النص دون أدوات مساعدة. المعيار AAA الأشد صرامة يشترط 7:1.
منتقي الألوان
اختر الألوان وحوّل بين HEX وRGB وHSL
نسبة التباين
⬜ ⬛
اللون التكميلي & الألوان المتشابهة
منتقي الألوان
هل يجب استخدام HEX أم RGB؟
HEX أكثر إيجازاً وشيوعاً في CSS. استخدم rgba() للشفافية، مثلاً rgba(0,0,0,0.5) لأسود شفاف 50%.
كيف أطبق ألوان الوضع المظلم؟
استخدم خصائص CSS المخصصة مع @media (prefers-color-scheme: dark). عَرِّف متغيرات الوضع الفاتح افتراضياً، ثم استبدلها في media query الوضع الداكن.
رموز الألوان: HEX و RGB و HSL
HEX وRGB وHSL هي ثلاثة أساليب لتمثيل الألوان في الحاسوب. HEX (مثل: #FF5733) هو الأكثر استخداماً على الويب، وRGB (مثل: rgb(255,87,51)) يمزج قيم الأحمر والأخضر والأزرق، وHSL (مثل: hsl(11,100%,60%)) يستخدم درجة اللون والتشبع والإضاءة. تصف الأشكال الثلاثة اللون ذاته بطرق مختلفة.
ما هي نسبة تباين WCAG؟
تشترط معايير WCAG الإمكانية AA نسبة تباين لا تقل عن 4.5:1 بين النص والخلفية. هذا هو الحد الأدنى الذي يتيح لمستخدمي ضعاف البصر قراءة النص دون أدوات مساعدة. المعيار AAA أصعب تطبيقاً ويشترط 7:1.
HSL: نموذج الألوان البديهي
يستخدم HSL درجة اللون (Hue: 0-360°) والتشبع (Saturation: 0-100%) والإضاءة (Lightness: 0-100%) لوصف الألوان بشكل أكثر بديهية من RGB. لإنشاء نسخة أفتح من لون العلامة التجارية، ما عليك إلا رفع قيمة L دون حسابات RGB معقدة. يُستخدم HSL على نطاق واسع في أنظمة التصميم لسهولة التعديل.
استخدام الألوان التكميلية والمتشابهة
الألوان التكميلية تقع على بُعد 180° في دائرة الألوان (كالأزرق والبرتقالي، الأحمر والأخضر)، مما يخلق تباينًا عالياً وحيوية بصرية. الألوان المتشابهة هي المتجاورة (كالأزرق والبنفسجي الأزرق والبنفسجي)، مما يُنتج لوحات ألوان منسجمة. يتضمن نظام الألوان الجيد للواجهات لوناً رئيسياً ولون تمييز وألوان محايدة وألوان دلالية.
إدارة الألوان بـ CSS Custom Properties
تُتيح خصائص CSS المخصصة (المتغيرات) إدارة الألوان بشكل مركزي: عَرِّف --color-primary: #2563EB; ثم استخدمه في كل مكان كـ background-color: var(--color-primary). عند الحاجة لتغيير لون العلامة التجارية، يكفي تعديل مكان واحد. اجمعها مع @media (prefers-color-scheme: dark) للتبديل السهل بين الوضع الداكن والفاتح.
الأسئلة الشائعة
هل يجب استخدام HEX أم RGB؟
HEX أكثر إيجازاً وشيوعاً في CSS. استخدم rgba() للشفافية، مثلاً rgba(0,0,0,0.5) لأسود شفاف 50%.
لماذا تتطلب WCAG تباين 4.5:1؟
هذه النسبة معيار AA الذي يضمن تمكّن مستخدمي ضعاف البصر من قراءة النص دون أدوات مساعدة. المعيار AAA الأشد صرامة يشترط 7:1.
كيف أطبق ألوان الوضع المظلم؟
استخدم خصائص CSS المخصصة مع @media (prefers-color-scheme: dark). عَرِّف متغيرات الوضع الفاتح افتراضياً، ثم استبدلها في media query الوضع الداكن.