لا تعتمد على اللون وحده
اقرن اللون بأيقونات أو نص أو شكل للتعبير عن المعنى.
لا تعتمد على اللون وحده درس مجاني في Web Accessibility Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Web Accessibility Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
Color Can Be Invisible
To many users, the red and green you chose look nearly the same. Using color alone to carry meaning leaves them guessing.
Color Blindness Is Common
Roughly 1 in 12 men experience some form of color blindness. That is a huge slice of your audience, not a rare edge case.
The Red-Green Trap
The classic mistake is a red error and a green success that look identical to many users. Red-green confusion is the most common type by far.
The Core Rule
WCAG criterion 1.4.1 says color must never be the only way to convey information. Always back it up with a second signal.
Add Text Labels
The simplest fix is words. Pair a red field with the label Error, so the meaning survives even when the color does not.
Add Icons and Shapes
A check mark, a warning triangle, or an X gives meaning through shape. Now success and error differ even in grayscale.
Links Need More Than Hue
A blue link in a gray paragraph can vanish for some users. Add an underline so links are obvious without relying on color.
Charts Are a Big Offender
Graphs that tell series apart by color only are a trap. Add patterns, direct labels, or distinct shapes to each line or slice.
Form Validation Done Right
Do not flag a bad field with a red border alone. Add an error message in text and an icon so everyone knows what failed.
The Grayscale Test
Quick gut check: view your design in grayscale. If you can still tell states and links apart, you are not leaning on color alone.
A Link That Adds Underline
Keeping the underline means links read clearly even for users who cannot perceive the color difference.
a {
color: #0b5fff;
text-decoration: underline;
}Quick Check
Decide the safest way to show a form error.
Recap: Beyond Color
You learned to never let color be the only signal: add text, icons, shapes, or underlines so meaning reaches everyone. Next: checking contrast with tools. 🌈
الأسئلة الشائعة
هل درس «لا تعتمد على اللون وحده» مجاني؟
نعم — نص درس «لا تعتمد على اللون وحده» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Web Accessibility Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.
ماذا ستتعلم في «لا تعتمد على اللون وحده»؟
اقرن اللون بأيقونات أو نص أو شكل للتعبير عن المعنى. تتمرن على Web Accessibility Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Web Accessibility Academy؟
لا تُشترط خبرة سابقة. Web Accessibility Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «لا تعتمد على اللون وحده»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Web Accessibility Academy هذا؟
نعم. كل درس في Web Accessibility Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- لماذا توجد نسب التباين
- تحقيق مستوى AA: عتبات النص والنص الكبير
- لا تعتمد على اللون وحده
- فحص التباين باستخدام أدوات مجانية