محوّل الألوان وفاحص التباين

اكتب لونًا بأي صيغة لتحصل على كل الصيغ الأخرى فورًا. ثم اختبر زوج النص والخلفية وفق قواعد التباين في WCAG.

كل شيء يعمل داخل متصفحك

ألوانك ونصوصك وصورك لا تُرفع إلى أي مكان.

اللون

HEX (3 أو 4 أو 6 أو 8 خانات) أو rgb() أو hsl() أو oklch() أو اسم مثل tomato

HEX#4f46e5
RGBrgb(79 70 229)
RGB (legacy)rgb(79, 70, 229)
HSLhsl(243 75% 59%)
HSL (legacy)hsl(243, 75%, 59%)
OKLCHoklch(51.1% 0.23 277)

فاحص التباين

لون النص

لون الخلفية

The quick brown fox jumps over the lazy dog

نص تجريبي لقياس وضوح القراءة على هذه الخلفية

نص كبير · Large text

نسبة التباين

4.54:1

نص عادي

AA (4.5:1)ناجح
AAA (7:1)راسب

نص كبير

AA (3:1)ناجح
AAA (4.5:1)ناجح

طريقة الاستخدام

1اكتب لونًا أو الصقه: HEX أو rgb() أو hsl() أو oklch() أو اسمًا، أو استخدم المنتقي أو القطّارة.
2انسخ الصيغة التي تحتاجها من القائمة.
3في فاحص التباين اضبط لوني النص والخلفية واقرأ النسبة.
4إذا رسب الزوج فاضغط «اقترح لونًا ناجحًا» واستخدم النتيجة.

بطاقة لون عليها قيم HEX وRGB وHSL وشارة نسبة التباين

متى تحتاج هذه الأداة؟

من HEX إلى RGB للكود
الصق قيمة HEX من ملف تصميم وانسخ صيغة rgb() أو hsl() لملف التنسيق.
فحوص إمكانية الوصول
اختبر نص الأزرار والروابط والتعليقات مقابل خلفياتها قبل الإطلاق.
تعديل لون العلامة
استخدم قيمة OKLCH لصنع نسخ أفتح وأغمق تحتفظ بالدرجة اللونية نفسها.
مطابقة لون على الشاشة
استخدم القطّارة لأخذ لون من صورة أو نافذة أخرى.

نصائح وحدود مهمة

يتطلب WCAG AA نسبة 4.5:1 للنص العادي و3:1 للنص الكبير (نحو 24 بكسل، أو 19 بكسل عريضًا). ويتطلب AAA نسبة 7:1 و4.5:1.
تُمزج ألوان النص الشفافة فوق الخلفية قبل قياس النسبة.
واجهة EyeDropper موجودة في المتصفحات المبنية على كروميوم ولم تصل إلى كل المتصفحات بعد، لذا يظهر الزر حيث تعمل فقط.
الألوان الخارجة عن نطاق sRGB، مثل قيم oklch() الزاهية، تُحوَّل إلى أقرب لون يناسب النطاق.

حوّل أي لون وتأكد أن النص مقروء

تعطيك ملفات التصميم HEX، ويريد الكود rgb()، ويمكن لـCSS الحديث استخدام hsl() أو oklch(). اكتب لونًا بأي من هذه الصيغ، أو باسم CSS مثل tomato، فتحصل على كل الصيغ الأخرى فورًا مع معاينة حية وزر نسخ لكل منها. واستخدم منتقي الألوان، أو القطّارة في المتصفحات التي تدعمها، لأخذ لون من أي مكان على شاشتك. والشفافية مدعومة أيضًا: يُقرأ HEX من ثماني خانات وrgba() وhsla() ويُكتب صحيحًا.

ويقارن فاحص التباين لون النص بالخلفية بمعادلة WCAG، ويعرض النسبة ويخبرك هل يجتاز AA وAAA للنص العادي والكبير، مع عينة حية بالعربية والإنجليزية. وإن رسب الزوج فـ«اقترح لونًا ناجحًا» يحرّك إضاءة لون النص بأقل قدر ممكن مع إبقاء درجته اللونية. ابنِ ألوان البداية بـمولّد اللوحات أو خذها من صورة بـألوان الصورة. ويبين دليل اختيار ألوان الموقع موضع التباين في العملية.

شروحات خطوة بخطوة

كيف تختار ألوان موقعك أو مشروعكطريقة عملية لاختيار لوحة ألوان جميلة وتبقى مقروءة.

الأسئلة الشائعة

كيف أحوّل HEX إلى RGB؟

اكتب قيمة HEX أو الصقها مثل ‎#4f46e5‎. وتظهر نسخ RGB وHSL وOKLCH فورًا ويمكن نسخها.

ما صيغ الألوان المدعومة؟

HEX من 3 أو 4 أو 6 أو 8 خانات، وrgb() وrgba()، وhsl() وhsla()، وoklch()، وأسماء ألوان CSS الـ148.

ما نسبة التباين الكافية؟

على الأقل 4.5:1 للنص العادي (AA) و3:1 للنص الكبير. وللمستوى الأعلى (AAA) 7:1 و4.5:1.

ماذا يفعل «اقترح لونًا ناجحًا»؟

يعدّل إضاءة لون نصّك فقط، بأصغر خطوة تبلغ 4.5:1، فتبقى الدرجة والتشبع أقرب ما يمكن.

هل يعمل فاحص التباين مع النص العربي؟

التباين يعتمد على اللونين فقط فينطبق على العربية والإنجليزية سواء. وتعرض العينة الحية كليهما.

محوّل الألوان وفاحص التباين

الصيغ المحوَّلة