لماذا يهم التباين

يعاني حوالي 300 مليون شخص حول العالم من شكل من أشكال ضعف رؤية الألوان. التصميم بتباين جيد ليس مجرد جماليات — ففي كثير من المناطق، هو متطلب قانوني. المعيار المرجعي هو WCAG 2.1 الذي يحدد مستويين رئيسيين:

  • المستوى AA: نسبة تباين 4.5:1 للنص العادي و3:1 للنص الكبير (18px أو 14px عريض).
  • المستوى AAA: 7:1 للنص العادي.

الأخطاء الشائعة

أكثرها شيوعاً: الرمادي الفاتح على الأبيض (قد يصل إلى 1.5:1 فقط)، أزرار ملونة بنص أبيض تبدو مقروءة لكنها لا تجتاز AA، وألوان تنجح في الوضع الفاتح لكنها تفشل في الوضع الداكن.

سير عمل عملي

  1. التقط لون الخلفية. افتح Color Picker Camera: HEX RGB، وجّه الكاميرا نحو السطح واضغط مرة واحدة للحصول على قيمة HEX فوراً. يعرض التطبيق أيضاً قيم HSL.
  2. التقط لون النص بالطريقة نفسها.
  3. تحقق من الزوج في أداة فحص التباين — مثل WebAIM Contrast Checker أو لوحة إمكانية الوصول في DevTools أو إضافة Contrast في Figma.
  4. اضبط الإضاءة في HSL حتى تجتاز الحد. احتفظ بـ H و S وقلل L لتعتيم اللون دون تغيير هويته البصرية.

لماذا HSL مثالي لضبط التباين

لا تتيح RGB وHEX تحكماً بديهياً في السطوع. يفصل HSL بين الصبغة والتشبع والإضاءة. يعرض Color Picker Camera: HEX RGB HEX وRGB وHSL وCMYK في آنٍ واحد — دون تحويلات يدوية.

مثال واقعي

زر أزرق متوسط (#4A90E2) بنص أبيض له تباين يبلغ نحو 3.1:1 — لا يجتاز AA. التحول إلى أزرق داكن (#1A3A6B) يرفع النسبة إلى 9.4:1، متخطياً حتى AAA.

ملاحظة حول WCAG 3.0 وAPCA

تُقدّم الإصدارات القادمة من الإرشادات نموذج APCA لتباين الإدراك البصري. WCAG 2.1 AA لا يزال المعيار المعتمد حالياً، لكن اختبار APCA يستحق الاهتمام للمشاريع طويلة الأمد.

حمّل Color Picker Camera: HEX RGB مجانًا لأجهزة iOS أو Android — بلا إعلانات، وبلا تتبّع، ويعمل دون اتصال بالإنترنت تمامًا.