محوِّل الألوان ومدقق التباين

يحوِّل المحوِّل لونًا واحدًا بين HEX (#rrggbb) وRGB (rgb(r, g, b)) وHSL (hsl(h, s%, l%)) لحظيًا، فمهما كان تنسيق نظام تصميمك تحصل على الصيغتين الأخريين. يأخذ مدقق التباين المقدمة والخلفية، ويطبّق منحنى غاما sRGB لتخطيطهما خطيًا، ثم يعرض نسبة التباين وفق WCAG 2.x إلى جانب نتائج AA / AAA للنص العادي والكبير.

مثال

المُدخَل — أزرق علامة تجارية نموذجي:

HEX  #2563eb
RGB  rgb(37, 99, 235)
HSL  hsl(221, 83%, 53%)

مع خلفية بيضاء (#ffffff):

Contrast ratio   5.17:1
WCAG AA normal   Pass
WCAG AA large    Pass
WCAG AAA normal  Fail (needs 7:1)
WCAG AAA large   Pass

لماذا تفشل هذه الجوزة من الألوان في WCAG AAA؟

هذه أكثر أخطاء التباين والتحويل شيوعًا وتستحق الانتباه:

• الخلط بين AA كبير وAA عادي. يحتاج النص الكبير إلى 3:1 فقط، لذا قد يُقرأ رابط جيدًا داخل H1 ثم يفشل بحجم الجسم. جوزة عند 3.5:1 تنجح في العناوين وتفشل في الفقرات.
• استخدام إضاءة HSL بديلًا عن التباين. لكلٍّ من hsl(0, 100%, 50%) (أحمر) وhsl(240, 100%, 50%) (أزرق) L=50% لكن الإضاءة مختلفة كثيرًا. احسب التباين دومًا من قيم RGB وليس من إضاءة HSL.
• نسيان تركيب الألفا. نص rgba(0, 0, 0, 0.6) فوق أبيض يُعادل فعليًا #666666. افحص HEX المسطَّح لا القيمة شبه الشفافة.
• طول HEX خاطئ. #fff يتمدد إلى #ffffff، أما #ffff فهو الصيغة المختصرة ذات 4 خانات ببايت ألفا. راجع عدد الخانات عندما يرفض حقل HEX بصمت.
• مزج display-P3 مع sRGB. قد تكون الألوان المأخوذة من أدوات مثل Figma في وضع الطيف الواسع خارج نطاق sRGB، وتقصّها المتصفحات. حوِّل إلى sRGB في الأداة المصدر قبل نسخ HEX.
• اختبار التباين مقابل الأبيض الصافي فقط. إذا وُضع النص فعلًا فوق #f3f4f6 أو فوق صورة، فسيكون التباين المرئي أقل. اختبر بالخلفية الحقيقية.

ما نسبة التباين المطلوبة لاجتياز WCAG AA؟

يتطلب WCAG 2.1 AA 4.5:1 لنص الجسم العادي و3:1 للنص الكبير، والنص الكبير هو على الأقل 18 pt (24 px) عادي أو 14 pt (18.66 px) عريض. تحتاج مكوّنات الواجهة والعناصر الرسومية إلى 3:1 مقابل خلفيتها. يرفع AAA السقف إلى 7:1 للنص العادي و4.5:1 للنص الكبير.

لماذا تعطيني HSL التي أعيد كتابتها قيم RGB مختلفة قليلًا؟

تخزّن معظم الأدوات HSL كنسب صحيحة، فيمكن لرحلة RGB → HSL → RGB أن تزيح كل قناة بوحدة. يبقى هذا الانحراف ضمن JND وغير مرئي على الشاشة؛ وإن احتجت تطابقًا كاملًا اعتمد HEX أو RGB كمصدر الحقيقة واعتبر HSL عرضًا فقط.

هل تستخدم هذه الأداة تصحيح غاما sRGB في التباين؟

نعم. يتبع الحساب معادلة WCAG 2.x: تخطيط خطي لكل قناة sRGB عبر منحنى غاما، حساب الإضاءة النسبية، ثم (L1 + 0.05) / (L2 + 0.05). تعطي وسائل مبسّطة كمتوسط القنوات أو إضاءة HSL أرقامًا مضللة لا تطابق WCAG.

كيف أتعامل مع الألوان الشفافة أو بالألفا؟

يُعرّف تباين WCAG مقابل خلفية صلبة، لذا سطِّح أي ألفا بتركيب المقدمة فوق الخلفية الحقيقية أولًا. فكتلة نص سوداء بـ50% فوق صفحة بيضاء تعادل #808080 فوق #ffffff. مرِّر هذا HEX المسطَّح إلى المدقق بدل القيمة شبه الشفافة.

هل HEX #rgb يساوي #rrggbb؟

نعم. تمدد الصيغة القصيرة ذات الثلاث خانات كل نصف بايت بتكراره، فيصبح #f0c مساويًا #ff00cc. تُضيف الصيغتان ذات 4 وذات 8 خانات قناة ألفا. تقبل الأداة HEX بثلاث وست وثماني خانات، ولأن WCAG يشترط لونًا صلبًا مركَّبًا تُعامَل بايت الألفا كمعلومة فقط في حساب التباين.

هل تحفظون الألوان التي أكتبها أو أنتقيها؟

لا. لا نحتفظ بأي سجل للألوان التي تختبرها أو تحوّلها أو تتحقق من تباينها. كل ما تكتبه أو تجرّه إلى المنتقي يُهمَل عند إغلاق علامة التبويب — لا سجلات ولا تحليلات لقيم الألوان. انظر في أدوات مطوري المتصفح لتتأكد بنفسك.