دليل لوحات الألوان الملائمة لضعاف رؤية الألوان — قواعد عملية للمصممين والمطورين

مقارنة لوحتَي Okabe-Ito وPaul Tol مع محاكاة الأنواع الأول والثاني والثالث، وقواعد تصميم لا تعتمد على اللون وحده، مثل تباين السطوع والترميز المزدوج ومعايير WCAG.

إذا كان نحو واحد من كل 12 رجلًا (بين ذوي الأصول الأوروبية) يعاني قصور الأحمر-الأخضر، فإن بين من يطالعون رسومك البيانية وخرائطك ولوحات معلوماتك دائمًا أشخاصًا ضعاف رؤية الألوان. والخبر الجيد أن الالتزام ببضع قواعد يزيل معظم المشكلات.

القاعدة 1 — لا تنقل المعلومة باللون وحده

ينص معيار النجاح 1.4.1 «استخدام اللون» في إرشادات إمكانية الوصول إلى الويب WCAG على ألا يكون اللون الوسيلة البصرية الوحيدة لنقل المعلومة. فحقل الإدخال الخاطئ يُعلَّم بإطار أحمر مع أيقونة ونص، وخطوط الرسم البياني تُميَّز باللون مع الشكل والتنقيط والتسميات المباشرة.

القاعدة 2 — اضمن فرقًا في السطوع

يرى أصحاب قصور رؤية الألوان فروق السطوع جيدًا. فاختر الألوان التي يجب التمييز بينها بحيث يختلف سطوعها بوضوح. وأسهل طريقة للتحقق أن ترى هل تبقى متمايزة عند الطباعة بالأبيض والأسود.

القاعدة 3 — تجنّب زوج الأحمر-الأخضر واستخدم الأزرق-البرتقالي

«جيد = أخضر، سيئ = أحمر» هو الخطأ الأكثر شيوعًا؛ إذ يبدو اللونان لأصحاب النوعين الأول والثاني بلون مغرة متشابه. وإذا احتجت إلى تباين بين فئتين فإن الأزرق ↔ البرتقالي هو الخيار الأكثر أمانًا.

لوحات ألوان مجرَّبة

لوحة «التصميم اللوني الشامل» التي اقترحها Okabe وIto مؤلفة من 8 ألوان اختيرت لتبقى متمايزة حتى مع قصور الأحمر-الأخضر. ويعرض الجدول أدناه الألوان نفسها بعد تحويلها بمحاكاة ثنائية الألوان (Machado 2009، بشدة 100%).

لوحة ألوان Okabe–Ito (8 ألوان) — كل صف يحاكي اللون نفسه لدى كل نوع
رؤية ألوان طبيعية	`#000000`	`#E69F00`	`#56B4E9`	`#009E73`	`#F0E442`	`#0072B2`	`#D55E00`	`#CC79A7`
ثنائية الألوان من النوع الأول	`#000000`	`#B9A200`	`#9BB3EC`	`#9A9271`	`#F8DC23`	`#5375B5`	`#817100`	`#808BA9`
ثنائية الألوان من النوع الثاني	`#000000`	`#CAB411`	`#87A4E8`	`#8A8676`	`#FCE34E`	`#3B67B1`	`#9E8C00`	`#9498A5`
ثنائية الألوان من النوع الثالث	`#000000`	`#FB8C87`	`#00C2C6`	`#009E92`	`#FFD4C5`	`#008289`	`#EB4050`	`#D6788A`

ولوحة «bright» التي وضعها Paul Tol مصممة هي الأخرى مع مراعاة قصور رؤية الألوان والطباعة بالأبيض والأسود معًا.

لوحة ألوان Paul Tol bright (7 ألوان)
رؤية ألوان طبيعية	`#4477AA`	`#EE6677`	`#228833`	`#CCBB44`	`#66CCEE`	`#AA3377`	`#BBBBBB`
ثنائية الألوان من النوع الأول	`#6179AC`	`#848177`	`#8A7B2A`	`#CCB634`	`#B8C8F0`	`#445579`	`#BBBBBB`
ثنائية الألوان من النوع الثاني	`#546FA9`	`#A79D74`	`#7E733A`	`#D1BD4B`	`#A4B9EE`	`#666A74`	`#BBBBBB`
ثنائية الألوان من النوع الثالث	`#008389`	`#FF526D`	`#008576`	`#DBAEA3`	`#00D7D7`	`#B62D50`	`#BBBBBB`

في المقابل، تتداخل التركيبة الشائعة من الأحمر والأخضر والبرتقالي شديدة التشبّع لدى أصحاب النوعين الأول والثاني.

مثال يجب تجنّبه — تركيبة تقوم على أحمر وأخضر شديدي التشبّع
رؤية ألوان طبيعية	`#E41A1C`	`#4DAF4A`	`#FF7F00`	`#984EA3`	`#A65628`	`#F781BF`
ثنائية الألوان من النوع الأول	`#645817`	`#B3A040`	`#A59100`	`#4166A6`	`#6D6122`	`#8D9CC1`
ثنائية الألوان من النوع الثاني	`#938208`	`#A69852`	`#C4AE00`	`#586EA1`	`#807327`	`#ACB0BC`
ثنائية الألوان من النوع الثالث	`#FC0020`	`#3EAA99`	`#FF616D`	`#9A5971`	`#B6454C`	`#FF7E98`

للقيم المتصلة: تدرّج منتظم في السطوع

للقيم المتصلة كالحرارة والكثافة استخدم خرائط ألوان تسلسلية يتغير فيها السطوع بانتظام في اتجاه واحد (مثل viridis وcividis). وقد صُمّمت cividis مع مراعاة قصور رؤية الألوان.
خريطة ألوان قوس قزح (jet) يتذبذب فيها السطوع صعودًا وهبوطًا، فتسبب سوء الفهم حتى لمن لا يعاني أي قصور، وتضيع فيها المعلومات في مقطع الأحمر-الأخضر.
للقيم المتباعدة في اتجاهين (زيادة ونقصان) تكون خرائط الألوان المتباعدة أزرق-أبيض-برتقالي (أو أحمر) أكثر أمانًا من خرائط الأحمر-الأخضر.

النص والتباين

يُوصى بأن يبلغ تباين السطوع بين نص المتن والخلفية 4.5:1 على الأقل وفق معيار WCAG 1.4.3. وكتابة النص بالأحمر على خلفية سوداء تقلل التباين كثيرًا لأصحاب النوع الأول.
لا تكتفِ بتغيير لون الروابط، بل أبقِ الخط السفلي.

ترتيب التحقق

1. هل تبقى العناصر متمايزة عند عرضها بالأبيض والأسود (بتدرّج الرمادي)؟
2. هل تبقى متمايزة في المحاكي عند النوعين الأول والثاني بشدة 100%؟
3. هل توجد إلى جانب اللون دلائل أخرى من الشكل والتسمية والنمط؟
4. هل يمكن وضع التسميات مباشرة على الرسم البياني دون الحاجة إلى مفتاح ألوان؟

إذا اجتازت موادك هذه النقاط الأربع، صارت أسهل قراءةً لا لأصحاب قصور رؤية الألوان وحدهم، بل أيضًا لمن يطالعونها على شاشة باهتة أو مطبوعة بالأبيض والأسود أو في الهواء الطلق تحت ضوء ساطع.

شاهد في المحاكي →