تباين WCAG موضّح

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

التباين هو فرق الإضاءة بين النص وخلفيته. إذا قلّ، يصبح النص غير مقروء لضعاف البصر — ومزعجًا للجميع. يضع WCAG حدًا أدنى قابلًا للقياس.

افحص أي زوج مع فاحص التباين.

عتبات WCAG

«كبير» يعني 18 نقطة (24 بكسل) أو 14 نقطة غامق وأكثر. النسب من 1:1 إلى 21:1.

أين يفشل التباين أكثر

• نص رمادي فاتح على أبيض.
• نص placeholder في النماذج.
• نص على صورة أو تدرّج.
• أزرار بنص ملوّن على خلفية ملوّنة.
• حدود تركيز تختفي.

كيف تفحص

1. التقط لوني النص والخلفية (بـ قطّارة الألوان).
2. احسب النسبة مع فاحص تباين WCAG.
3. عدّل حتى تجتاز المستوى.

كيف تصلح

• غمّق النص — الحل المعتاد.
• فاتح الخلفية.
• زد الوزن أو الحجم (قواعد النص الكبير أسمح).
• أضف خلفية معتمة خلف النص على الصور.
• أضف حدودًا/ظلًا للنص على الصور.

لا تعتمد على اللون وحده

قد يفوّت عمى الألوان معنى يُنقل باللون فقط (أخضر/أحمر). أضف أيقونات أو تسميات أو أنماطًا. يسمي WCAG ذلك «استخدام اللون» (1.4.1).

استهدف أعلى من الحد

AA هو الأساس القانوني في سياقات كثيرة؛ وAAA (7:1) أريح. للنص الأساسي استهدف 7:1 على الأقل.

افحص لوحتك

اختبر ألوان علامتك مع فاحص التباين قبل إطلاق نظام التصميم، لا بعده.