كيف تحقق تبايناً (Contrast) جيداً بين الخلفية (Background) والمقدمة (Foreground) في تصاميمك؟
نظريملاحظة: قد تستخدم بعض الأمثلة التفاعلية أكواد CSS لم تتعلمها بعد. لا تقلق بشأن محاولة فهم الكود بالكامل؛ فالهدف من هذه الأمثلة هو عرض نماذج لمفاهيم التصميم هذه، لتتمكن من فهم آلية عملها بشكل أفضل.
فهم التباين Understanding Contrast
أولاً، قد تحتاج إلى التعرف على مفهوم التباين. التباين هو الفرق بين لونين، أو مدى سهولة التمييز بينهما.
تكون الألوان ذات التباين العالي أكثر تميزاً من الناحية البصرية، في حين تبدو الألوان ذات التباين المنخفض أكثر تشابهاً بصرياً. فعلى سبيل المثال، يتمتع اللونان الأسود والأبيض (black and white) بنسبة تباين عالية جداً، بينما يقل التباين بين اللونين الأزرق الفاتح والأرجواني الفاتح (light blue and light purple).
<style>
.example {
padding: 20px;
margin-bottom: 20px;
font-size: 18px;
font-family: sans-serif;
}
.high-contrast {
background-color: black;
color: white;
}
.low-contrast {
background-color: #add8e6;
color: #dda0dd;
}
.label {
font-weight: bold;
margin-bottom: 5px;
}
</style>
<div class="example high-contrast">
<div class="label">تباين عالٍ</div>
يتميز هذا النص بتباين عالٍ (خلفية سوداء ونص أبيض).
</div>
<div class="example low-contrast">
<div class="label">تباين منخفض</div>
يتميز هذا النص بتباين منخفض (خلفية زرقاء فاتحة ونص أرجواني فاتح).
</div>
معاينة:
تطبيق التباين على النص Applying Contrast to Text
بالطبع، قد يكون التمييز في هذه الأمثلة أكثر وضوحاً بفضل طريقة التنسيق. ولكن ماذا عن تطبيق هذه الألوان على النصوص؟ يمكنك استخدام نص أسود (black text) عالي التباين على خلفية بيضاء (white background)، أو نص بنفسجي (purple text) منخفض التباين على خلفية زرقاء (blue background).
<style>
.text-example {
padding: 10px;
margin-bottom: 20px;
font-size: 18px;
font-family: sans-serif;
}
.text-high-contrast {
background-color: white;
color: black;
}
.text-low-contrast {
background-color: #add8e6;
color: #dda0dd;
}
.label {
font-weight: bold;
margin-bottom: 5px;
display: block;
}
</style>
<div class="text-example text-high-contrast">
<div class="label">نص عالي التباين</div>
هذا نص عالي التباين: نص أسود على خلفية بيضاء.
</div>
<div class="text-example text-low-contrast">
<div class="label">نص منخفض التباين</div>
هذا نص منخفض التباين: نص أرجواني على خلفية زرقاء فاتحة.
</div>
معاينة:
معايير التباين الخاصة بـ WCAG
ولكن، كيف تحدد ما يُعتبر تباينًا "جيدًا بما يكفي"؟ لا يمكنك الاعتماد فقط على كيفية ظهور النص أمامك، إذ أن تجربة كل مستخدم تختلف عن الآخر. ولحسن الحظ، توفر "إرشادات إتاحة محتوى الويب" (WCAG) معيارًا لهذا الأمر.
يُعتبر النص الذي تبلغ نسبة التباين فيه 4.5:1 مطابقاً لمعيار "AA"، وهو الحد الأدنى الذي ينبغي الالتزام به لضمان إتاحة المحتوى لمعظم المستخدمين؛ في حين يُعتبر النص الذي تبلغ نسبة التباين فيه 7:1 مطابقاً لمعيار "AAA"، مما يضمن توفير أفضل مستوى من الإتاحة.
<style>
.contrast-example {
padding: 15px;
margin-bottom: 20px;
font-size: 18px;
font-family: sans-serif;
}
.aa-contrast {
background-color: #ffffff;
color: #4b4b4b;
}
.aaa-contrast {
background-color: #ffffff;
color: #1a1a1a;
}
.label {
font-weight: bold;
margin-bottom: 8px;
display: block;
}
</style>
<div class="contrast-example aa-contrast">
<div class="label">معيار AA (نسبة التباين ~4.5:1)</div>
يفي هذا النص بالحد الأدنى لمعيار إمكانية الوصول المتعلق بالتباين.
</div>
<div class="contrast-example aaa-contrast">
<div class="label">معيار AAA (نسبة التباين ~7:1)</div>
يستوفي هذا النص أعلى معايير سهولة الوصول فيما يتعلق بالتباين.
</div>
معاينة:
مقارنة نسب التباين العالية والمنخفضة Comparing High and Low Contrast Ratios
هناك العديد من المواقع الإلكترونية التي يمكنها التحقق من نسبة التباين بين لونين، إلا أن معظم المتصفحات تتيح لك القيام بذلك مباشرةً عبر أدوات المطورين (developer tools) في موقعك.
لنلقِ نظرة على بضعة أمثلة أخرى حول نسبة التباين لفهم المفهوم بشكل أفضل.
إليك مثال على نص أسود (black text) على خلفية بيضاء (white background) بنسبة تباين تبلغ 21:1.
<style>
.contrast-21 {
background-color: white;
color: black;
padding: 15px;
margin-bottom: 20px;
font-size: 18px;
font-family: sans-serif;
}
.label {
font-weight: bold;
margin-bottom: 8px;
display: block;
}
</style>
<div class="contrast-21">
<div class="label">نسبة التباين 21:1</div>
هذا نص أسود على خلفية بيضاء، وهو ما يمثل أعلى نسبة تباين تبلغ 21:1.
</div>
معاينة:
يتجاوز هذا المثال معيار AAA. والآن، دعونا نلقي نظرة على نص باللون الأرجواني (purple text) على خلفية زرقاء (blue background).
<style>
.contrast-21 {
background-color: white;
color: black;
padding: 15px;
margin-bottom: 20px;
font-size: 18px;
font-family: sans-serif;
}
.label {
font-weight: bold;
margin-bottom: 8px;
display: block;
}
.purple-on-blue {
background-color: #0000cc;
color: #800080;
padding: 15px;
margin-bottom: 20px;
font-size: 18px;
font-family: sans-serif;
}
</style>
<div class="contrast-21">
<div class="label">نسبة التباين 21:1</div>
هذا نص أسود على خلفية بيضاء، وهو ما يمثل أعلى نسبة تباين تبلغ 21:1.
</div>
<div class="purple-on-blue">
<div class="label">بنفسجي على أزرق (تباين منخفض)</div>
هذا لا يفي بمعيار AA.
</div>
معاينة:
يبلغ معدل التباين في هذا المثال 1.48:1، وهو ما لا يفي حتى بمعيار AA.
ضبط خصائص الألوان Adjusting Color Properties
كيف يمكنك معالجة هذه المشكلة؟ حسناً، هناك ثلاثة جوانب تؤثر على نسبة التباين.
ضبط تدرج اللون Adjusting Hue
أولاً، هناك "درجة اللون" (Hue)، التي تمثل النوع العام للون، مثل الأحمر والأزرق والبرتقالي. لننتقل إلى درجة لونية أبعد عن اللون الأزرق؛ وفي هذه الحالة، دعنا نستخدم اللون الأحمر.
<style>
.contrast-21 {
background-color: white;
color: black;
padding: 15px;
margin-bottom: 20px;
font-size: 18px;
font-family: sans-serif;
}
.label {
font-weight: bold;
margin-bottom: 8px;
display: block;
}
.red-on-blue {
background-color: #0000cc;
color: #ff0000;
padding: 15px;
margin-bottom: 20px;
font-size: 18px;
font-family: sans-serif;
}
</style>
<div class="contrast-21">
<div class="label">نسبة التباين 21:1</div>
هذا نص أسود على خلفية بيضاء، وهو ما يمثل أعلى نسبة تباين تبلغ 21:1.
</div>
<div class="red-on-blue">
<div class="label">أحمر على أزرق (تغيير في تدرج اللون مع تباين أعلى)</div>
هذا لا يفي بمعايير إمكانية الوصول.
</div>
معاينة:
ضبط التشبع Adjusting Saturation
للأسف، لم يؤدِّ هذا التغيير إلا إلى رفع نسبة التباين لتصل إلى 1.49:1، مما يعني أنك بحاجة إلى تعديل التشبع، أو "كمية" اللون الموجودة. لنقم بزيادة نسبة اللون الأحمر في النص؛ فهذا يقرّبنا كثيراً من الهدف، إذ تصبح نسبة التباين 3.54:1.
<style>
.contrast-21 {
background-color: white;
color: black;
padding: 15px;
margin-bottom: 20px;
font-size: 18px;
font-family: sans-serif;
}
.label {
font-weight: bold;
margin-bottom: 8px;
display: block;
}
.low-sat-red-on-blue {
background-color: #0000cc;
color: #b23333;
padding: 15px;
margin-bottom: 20px;
font-size: 18px;
font-family: sans-serif;
}
.high-sat-red-on-blue {
background-color: #0000cc;
color: #ff4d4d;
padding: 15px;
margin-bottom: 20px;
font-size: 18px;
font-family: sans-serif;
}
</style>
<div class="contrast-21">
<div class="label">نسبة التباين 21:1</div>
هذا نص أسود على خلفية بيضاء، وهو ما يمثل أعلى نسبة تباين تبلغ 21:1.
</div>
<div class="low-sat-red-on-blue">
<div class="label">لون أحمر منخفض التشبع على خلفية زرقاء (التباين ~1.49:1)</div>
يتميز هذا اللون الأحمر بانخفاض درجة التشبع، مما يؤدي إلى ضعف نسبة التباين.
</div>
<div class="high-sat-red-on-blue">
<div class="label">لون أحمر عالي التشبع على خلفية زرقاء (التباين ~3.54:1)</div>
تؤدي زيادة تشبع اللون الأحمر إلى تحسين التباين، لكنه يظل دون معيار AA.
</div>
معاينة:
ضبط السطوع Adjusting Lightness
ومع ذلك، يمكنك الاقتراب أكثر من النتيجة المطلوبة عن طريق تغيير القيمة الأخيرة، وهي "السطوع" (Lightness)؛ إذ تعبّر هذه القيمة عن مقدار اللون الأبيض الموجود في اللون.
لنُقلّل من درجة سطوع اللون الأحمر؛ فأصبح لدينا الآن لون أحمر داكن للغاية مقابل الخلفية الزرقاء الفاتحة، مما يجعل نسبة التباين 10.34:1.
<style>
.contrast-21 {
background-color: white;
color: black;
padding: 15px;
margin-bottom: 20px;
font-size: 18px;
font-family: sans-serif;
}
.label {
font-weight: bold;
margin-bottom: 8px;
display: block;
}
.blue-bg {
background-color: #add8e6;
padding: 15px;
font-family: sans-serif;
font-size: 18px;
margin-bottom: 20px;
}
.low-sat-red-on-blue {
background-color: #0000cc;
color: #b23333;
margin-bottom: 20px;
}
.high-sat-red-on-blue {
background-color: #0000cc;
color: #ff4d4d;
margin-bottom: 20px;
}
.dark-red-on-light-blue {
background-color: #add8e6;
color: #8b0000;
}
</style>
<div class="contrast-21">
<div class="label">نسبة التباين 21:1</div>
هذا نص أسود على خلفية بيضاء، وهو ما يمثل أعلى نسبة تباين تبلغ 21:1.
</div>
<div class="low-sat-red-on-blue blue-bg">
<div class="label">لون أحمر منخفض التشبع على خلفية زرقاء (التباين ~1.49:1)</div>
يتميز هذا اللون الأحمر بانخفاض درجة التشبع، مما يؤدي إلى ضعف نسبة التباين.
</div>
<div class="high-sat-red-on-blue blue-bg">
<div class="label">لون أحمر عالي التشبع على خلفية زرقاء (التباين ~3.54:1)</div>
تؤدي زيادة تشبع اللون الأحمر إلى تحسين التباين، لكنه يظل دون معيار AA.
</div>
<div class="dark-red-on-light-blue">
<div class="label">أحمر داكن على أزرق فاتح (التباين ~10.34:1)</div>
يؤدي تقليل درجة سطوع اللون الأحمر إلى زيادة كبيرة في نسبة التباين.
</div>
معاينة:
يمكنك الاستمرار في تعديل الألوان لإيجاد التوازن بين التأثير البصري الذي تريده ونسبة تباين تضمن سهولة الوصول؛ ولكن من المهم أن تتذكر أن سهولة الوصول يجب أن تحظى دائمًا بالأولوية.
أسئلة :
ما هو التباين (contrast) في سياق تصميم الويب؟
1. سطوع الألوان في صفحة الويب. ❌
2. الفرق بين لونين ومدى سهولة التمييز بينهما. ✅
3. عدد الألوان المستخدمة في صفحة الويب. ❌
4. حدة الصور في صفحة الويب. ❌
وفقاً لإرشادات إتاحة محتوى الويب (WCAG)، ما هو الحد الأدنى لنسبة التباين للنص لكي يستوفي معيار المستوى "AA"؟
1. 3:1 ❌
2. 4.5:1 ✅
3. 7:1 ❌
4. 21:1 ❌
أيٌّ مما يلي لم يُذكر كعامل يؤثر على نسبة التباين؟
1. درجة اللون Hue. ❌
2. التشبع Saturation. ❌
3. السطوع Lightness. ❌
4. الشفافية Opacity. ✅