appstoryoAppStoryolapnito.cz s.r.o.blog/check-text-contrast-picked-color-ui/arكيفية التحقق من تباين النص للون المختار قبل استخدامه في واجهة المستخدمLubor Šimůnek29082026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0تعلم كيفية التحقق من نسبة تباين WCAG وضبط الألوان في HSL لجعل واجهتك دائماً قابلة للوصول وسهلة القراءة.
التصميمarticleAppStoryoلماذا يهم التباينيعاني حوالي 300 مليون شخص حول العالم من شكل من أشكال ضعف رؤية الألوان. التصميم بتباين جيد ليس مجرد جماليات — ففي كثير من المناطق، هو متطلب قانوني. المعيار المرجعي هو WCAG 2.1 الذي يحدد مستويين رئيسيين:
المستوى AA: نسبة تباين 4.5:1 للنص العادي و3:1 للنص الكبير (18px أو 14px عريض).
المستوى AAA: 7:1 للنص العادي.
الأخطاء الشائعةأكثرها شيوعاً: الرمادي الفاتح على الأبيض (قد يصل إلى 1.5:1 فقط)، أزرار ملونة بنص أبيض تبدو مقروءة لكنها لا تجتاز AA، وألوان تنجح في الوضع الفاتح لكنها تفشل في الوضع الداكن.
سير عمل عمليالتقط لون الخلفية. افتح Color Picker Camera: HEX RGB، وجّه الكاميرا نحو السطح واضغط مرة واحدة للحصول على قيمة HEX فوراً. يعرض التطبيق أيضاً قيم HSL.
التقط لون النص بالطريقة نفسها.
تحقق من الزوج في أداة فحص التباين — مثل WebAIM Contrast Checker أو لوحة إمكانية الوصول في DevTools أو إضافة Contrast في Figma.
اضبط الإضاءة في 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 — بلا إعلانات، وبلا تتبّع، ويعمل دون اتصال بالإنترنت تمامًا.