مولد لوحات الألوان
اللون المتمم للأحمر #ff0000 هو #00ffff، وهو اللون المقابل له تمامًا على دائرة الألوان. وتضيف اللوحة الثلاثية للأحمر اللونين #00ff00 و#0000ff. ونسبة تباين النص الأسود على الأبيض 21:1.
طريقة الاستخدام
- اختر لونًا أساسيًا من مربع الألوان أو اكتب رمز HEX مثل #0b7a6a. وتعمل أيضًا صيغ RGB وHSL مثل rgb(11, 122, 106).
- اختر التناسق: متكامل أو متجاور أو ثلاثي أو أحادي. يظهر إطار حول لونك الأساسي.
- انقر سطر HEX أو RGB أو HSL لنسخ القيمة. ولنسخ اللوحة كاملة اضغط «نسخ كل رموز HEX».
- راجع سطري التباين في كل لون، فهما يبيّنان مدى وضوح النص الأبيض والأسود فوق ذلك اللون.
طريقة الحساب
تُعالج الألوان بنظام HSL: درجة اللون (hue) موقعه على دائرة الألوان من 0 إلى 360 درجة، والتشبع حيوية اللون، والإضاءة مدى فتحه أو قتامته. تدير اللوحات درجة اللون فقط وتحافظ على التشبع والإضاءة، فتبدو كل ألوان اللوحة متقاربة الإحساس.
المتكامل يضيف اللون المقابل على بعد 180 درجة. والمتجاور يستخدم الجارين على بعد 30 درجة من الجانبين. والثلاثي ثلاثة ألوان بين كل منها 120 درجة. أما الأحادي فيثبت درجة اللون والتشبع ويغيّر الإضاءة وحدها بخطوات 15 نقطة، ويبقى بين 8 و92 بالمئة حتى لا تتحول الأطراف إلى أبيض أو أسود خالص.
تُحسب نسبة التباين وفق WCAG 2. تُحوَّل كل قناة إلى ضوء خطي، ثم تُحسب الإضاءة النسبية L = 0.2126 R + 0.7152 G + 0.0722 B، والنسبة (L الأفتح + 0.05) / (L الأغمق + 0.05)، فتتراوح بين 1:1 و21:1.
تشترط WCAG للنص العادي 4.5:1 على الأقل (AA)، و7:1 للمستوى AAA. أما النص الكبير، أي نحو 24 px أو 19 px عريض فما فوق، فيكفيه 3:1 للمستوى AA. تستخدم الشارة تحت كل نسبة حدود النص العادي، وتعرض «AA كبير» إذا تحقق شرط النص الكبير وحده.
حدود نسبة التباين
| المستوى | النسبة | الاستخدام |
|---|---|---|
| AA كبير | 3:1 | النص الكبير وعناصر الواجهة |
| AA | 4.5:1 | نص المحتوى العادي |
| AAA | 7:1 | وضوح أعلى |
أسئلة شائعة
ما اللون المتمم؟
هو اللون المقابل للون الأساسي تمامًا على دائرة الألوان، على بعد 180 درجة. يعطي هذا الزوج تباينًا قويًا، ويناسب زر دعوة إلى الإجراء يجب أن يبرز عن الخلفية.
أي لوحة أختار لموقع إلكتروني؟
الأحادية هي الأكثر أمانًا لواجهة هادئة. والمتجاورة تبدو منسجمة وتضيف بعض التنوع. أما المتكاملة والثلاثية فأكثر جرأة، فاجعل لونًا واحدًا هو الرئيسي واستخدم الباقي لمسات صغيرة.
هل نسبة التباين العالية ضرورية دائمًا؟
للنص نعم. يجب أن يبلغ نص المحتوى 4.5:1 مع خلفيته. يمكن أن تكون الأشكال الزخرفية والعناوين الكبيرة أقل، لكن النص داخل الأزرار والروابط يجب أن يلتزم بالقاعدة.
لماذا يختلف اللون المولَّد قليلًا عما أختاره يدويًا؟
يبقى لونك الأساسي كما أدخلته. أما الألوان الأخرى فتُحسب بنظام HSL ثم تُقرَّب إلى قيم RGB صحيحة، لذا قد تختلف بدرجة واحدة عن لون مختار يدويًا.
هل تُحفظ ألواني؟
لا. يُحسب كل شيء في متصفحك. لحفظ لونك الأساسي واللوحة في رابط استخدم «مشاركة الرابط».