محوّل الألوان

حوّل بين HEX و RGB و HSL، وافحص تباين الألوان

calendar_today آخر تحديث: ١٧ سبتمبر ٢٠٢٦

اللون نفسه بثلاث صيغ

HEX
#00609b
RGB
rgb(0, 96, 155)
HSL
hsl(202.8, 100%, 30.4%)

فحص التباين

نص تجريبي بهذين اللونين

نص أصغر، وهو الحالة الأصعب.

نسبة التباين6.67:1
ناجح — AA للنص العادي
ناجح — AA للنص الكبير
راسب — AAA للنص العادي
ناجح — AAA للنص الكبير

النسبة محسوبة وفق معيار WCAG 2.1 بما فيه تصحيح جاما — وهو ما يُخطئ فيه المتوسط التقريبي للقنوات.

lightbulb

محوّل الألوان من «سهل» يحوّل بين HEX و RGB و HSL ويفحص التباين وفق معيار WCAG ليقول إن كان اللونان يصلحان للنص الصغير والكبير، ويعمل داخل متصفحك.

help_outline

كيف تعمل هذه الأداة؟

١

ألصق اللون

رمزاً ست عشرياً أو rgb(...) أو hsl(...).

٢

خذ الصيغة التي تريد

اللون نفسه بثلاث صيغ جاهزة للنسخ.

٣

افحص التباين

أدخل لون الخلفية لترى النسبة وهل تجتاز معايير WCAG.

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

ما فائدة صيغة HSL؟ expand_more
لأنها تصف اللون كما يفكر فيه الإنسان: درجة اللون ثم نقاؤه ثم إضاءته. تفتيح لون أو تغميقه يعني تعديل رقم واحد فيها، بينما يحتاج ذلك في RGB تعديل ثلاثة أرقام معاً.
ما معنى نسبة التباين؟ expand_more
مقارنة بين سطوع اللونين، تبدأ من 1:1 للونين متطابقين وتصل إلى 21:1 للأسود على الأبيض. معيار WCAG يطلب 4.5:1 على الأقل للنص العادي و3:1 للنص الكبير.
لماذا يرسب لون رمادي يبدو مقروءاً؟ expand_more
لأن الحكم لا يعتمد على الانطباع بل على حساب السطوع مع تصحيح جاما. الرمادي المتوسط على الأبيض يبدو مقبولاً لعين سليمة في إضاءة جيدة، ويصبح غير مقروء لضعيف البصر أو تحت الشمس.
هل يكفي اجتياز المعيار ليكون التصميم مقروءاً؟ expand_more
هو حد أدنى لا ضمان. حجم الخط ووزنه والمسافات تؤثر أيضاً، لكن التباين هو أول ما يُختبر وأسهل ما يُصلح.