نظارة الألوان

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

1. يمكنك اختيار خطوة فوق الأداة: الألوان أو الصورة أو التباين. يمكن البدء بأي خطوة.
2. في «الألوان»: اختيار كل لون بأداة اختيار اللون، أو كتابة رمز اللون، مثل ⁦#2e9e44⁩. يظهر جنبا إلى جنب كيف تبدو الألوان مع الرؤية العادية ومع أربعة أنواع من عمى الألوان، وأي الألوان تصبح متشابهة جدا.
3. في «الصورة»: النظر إلى المثال، أو الضغط على اختيار صورة خاصة بك واختيار صورة أو مطوية أو لقطة شاشة من جهازك.
4. في «التباين»: اختيار لون للنص ولون للخلفية. يظهر التباين، وهل هو كاف. إذا كان قليلا، يظهر لون نص قريب منه وتباينه كاف.
5. مع طباعة، فوق الأداة، تتم طباعة نتيجة الخطوة فقط. يمكنك النظر إليها مع زميل أو مصمم.

أربعة أنواع من عمى الألوان

في العين خلايا للضوء الأحمر والأخضر والأزرق. إذا لم يعمل نوع منها، يصعب التمييز بين بعض الألوان. حوالي 8 من كل 100 رجل، و1 من كل 200 امرأة، يرون الأحمر والأخضر بشكل أقل. أغلبهم لديهم نوع أخف مما يظهر هنا.

• عمى الأحمر (protanopia). تنقص العين خلايا الضوء الأحمر. يصعب التمييز بين الأحمر والأخضر، ويبدو الأحمر أغمق. حوالي 1 من كل 100 رجل لديه هذا.
• عمى الأخضر (deuteranopia). تنقص العين خلايا الضوء الأخضر. هنا أيضا يصعب التمييز بين الأحمر والأخضر. حوالي 1 من كل 100 رجل لديه هذا.
• عمى الأزرق (tritanopia). تنقص العين خلايا الضوء الأزرق. الأزرق والأخضر يتشابهان، وكذلك الأصفر والوردي.
• عمى الألوان الكامل. لا ترى العين أي لون، فقط الضوء والظلام. كل شيء رمادي.

عمى الأزرق والعمى اللوني الكامل نادران جدا: حوالي 1 من كل 30,000 إلى 50,000 شخص.

معلومات مفيدة

• المحاكاة تقريب. كل إنسان يرى بشكل مختلف قليلا، وشاشتك تؤثر أيضا: السطوع، وإعدادات الألوان، والوضع الليلي.
• كثير من الناس لديهم نوع أخف. هم يرون شيئا بين الرؤية العادية والمحاكاة.
• عمى الأزرق هو الأصعب في المحاكاة. هذه المحاكاة هي الأقل دقة.
• «متشابهة جدا» حد وضعناه نحن، وليس معيارا رسميا. لذلك يبقى نظرك أنت مهما، ومن الأفضل إن أمكن طلب رأي شخص لديه عمى الألوان.
• اللون وحده لا يكفي لتوضيح شيء. هذا من متطلبات WCAG (معيار النجاح 1.4.1). المزيد في قابل للإدراك: لا أحد تفوته المعلومات.

ما تطلبه القواعد عن التباين

التباين هو الفرق في الفاتح والداكن بين النص والخلفية. كلما كان الرقم أعلى، كان النص أوضح. القيمة 1:1 تعني: لا فرق. والقيمة 21:1 هي الأعلى: الأسود على الأبيض. هناك ثلاثة متطلبات في WCAG عن التباين (المزيد في ما هو WCAG):

• 1.4.3، المستوى AA. النص العادي تباينه 4.5:1 على الأقل. والنص الكبير 3:1 على الأقل.
• 1.4.11، المستوى AA. ما يلزم لرؤية شيء أو استخدامه تباينه 3:1 على الأقل مع اللون المجاور. مثل حافة حقل إدخال، أو أيقونة، أو خط في رسم بياني.
• 1.4.6، المستوى AAA. النص العادي 7:1 على الأقل، والنص الكبير 4.5:1 على الأقل.

المستوى AA هو المعيار العادي. أما AAA فأشد. النص الكبير هو نص بحجم 18 نقطة على الأقل، أو 14 نقطة إذا كان عريضا. على الشاشة هذا حوالي 24 بكسل، أو حوالي 18.5 بكسل بخط عريض.

• لا نقرب الأرقام. إذا كان التباين 4.499:1، فهو لا يحقق 4.5:1. لذلك الرقم على شاشتك مقطوع إلى الأسفل: يظهر 4.49:1.
• الشعارات والنصوص التي هي للزينة فقط لا يلزم أن تحقق هذه المتطلبات. ولا الزر المعطل أيضا.
• هل نصك على صورة أو على تدرج لوني؟ عندها يمكنك فحص المكان الذي تكون فيه الخلفية أقرب إلى لون نصك.
• لا يمكن إدخال لون شفاف هنا. يمكنك استخدام اللون كما يظهر على الشاشة، مع ما تحته.

طريقة الحساب

لعمى الأحمر والأخضر والأزرق نستخدم نموذج Machado و Oliveira و Fernandes من عام 2009. ويستخدم Chrome و Edge هذا النموذج أيضا في أدوات المطورين. في العمى اللوني الكامل يبقى السطوع فقط، محسوبا كما في WCAG.

نقيس الفرق بين لونين في OKLab، وهي طريقة لوصف الألوان من معيار الألوان للمواقع (CSS). إذا كان الفرق أقل من 0.07، نسمي اللونين «متشابهين جدا». الفرق بين الأسود والأبيض 1.

نحسب التباين بمعادلة W3C، المؤسسة التي تقف وراء WCAG. بهذه الطريقة يمكنك القيام بالحساب بنفسك أيضا.

حساب التباين بنفسك

1. كتابة رمز اللون كثلاثة أرقام من 0 إلى 255: الأحمر والأخضر والأزرق. كل حرفين معا رقم واحد. الحروف من a إلى f هي من 10 إلى 15. الحرف الأول مضروبا في 16، ثم إضافة الحرف الثاني. في ⁦#1a2b3c⁩ الأحمر هو: 1 × 16 + 10 = 26.
2. قسمة كل رقم على 255. هل النتيجة 0.04045 أو أقل؟ عندها القسمة على 12.92. هل هي أعلى؟ عندها إضافة 0.055، والقسمة على 1.055، ورفع النتيجة إلى القوة 2.4.
3. حساب السطوع: 0.2126 × الأحمر + 0.7152 × الأخضر + 0.0722 × الأزرق. النتيجة رقم من 0 (أسود) إلى 1 (أبيض).
4. الشيء نفسه للون الآخر.
5. التباين هو: السطوع الأعلى زائد 0.05، مقسوما على السطوع الأدنى زائد 0.05. الأسود على الأبيض يعطي (1 + 0.05) / (0 + 0.05) = 21، أي 21:1.

ألوانك وصورتك

كل شيء يحدث في متصفحك. تتم قراءة صورتك على جهازك ولا تذهب إلى أي مكان. لا نحفظ شيئا: إذا أغلقت الصفحة، يضيع كل شيء.

المصادر

تمت القراءة في 28 و 29 أيلول 2026.

• Machado, Oliveira & Fernandes (2009): A Physiologically-based Model for Simulation of Color Vision Deficiency ↗ (موقع خارجي)
• Chrome for Developers: Simulating color vision deficiencies in the Blink Renderer ↗ (موقع خارجي)
• Colour Blind Awareness: Types of colour blindness ↗ (موقع خارجي)
• National Eye Institute: Types of Color Vision Deficiency ↗ (موقع خارجي)
• W3C: Web Content Accessibility Guidelines (WCAG) 2.2 ↗ (موقع خارجي)
• W3C: Understanding Success Criterion 1.4.1: Use of Color ↗ (موقع خارجي)
• W3C: Understanding Success Criterion 1.4.3: Contrast (Minimum) ↗ (موقع خارجي)
• W3C: Understanding Success Criterion 1.4.6: Contrast (Enhanced) ↗ (موقع خارجي)
• W3C: Understanding Success Criterion 1.4.11: Non-text Contrast ↗ (موقع خارجي)
• W3C: CSS Color Module Level 4 (OKLab و ΔEOK) ↗ (موقع خارجي)