تباين ألوان WCAG للمصممين

إذا فشل نصك في تحقيق تباين AA وفقًا لـ WCAG، فإن ما يقدر بـ 285 مليون شخص ضعيف البصر لا يمكنهم قراءته. بالإضافة إلى أنك على أرض قانونية مهتزة بشكل متزايد في الاتحاد الأوروبي والولايات المتحدة. الخبر السار: القاعدة بسيطة.

قاعدة 4.5:1

يجب أن يكون لنص الجسم نسبة تباين لا تقل عن 4.5:1 مقابل خلفيته لاجتياز WCAG AA. النص الكبير (24 بكسل+ عادي أو 18 بكسل+ غامق) له حد أدنى أقل وهو 3:1.

للامتثال لـ AAA: 7:1 للنص العادي، 4.5:1 للنص الكبير.

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

يستخدم WCAG الإضاءة النسبية — قم بتحويل كل لون إلى قيمة إضاءة (0 = أسود، 1 = أبيض) باستخدام صيغة محددة، ثم احسب (L1 + 0.05) / (L2 + 0.05)، حيث L1 هو اللون الأفتح.

لست بحاجة لإجراء الحساب — استخدم أداة فحص التباين المجانية لإدخال أي لونين ورؤية النسبة.

حالات الفشل الشائعة

• رمادي فاتح على أبيض — #999 على #fff = 2.85 (يفشل). #767676 على #fff = 4.54 (ينجح).
• أبيض على أصفر — يفشل دائمًا تقريبًا. استخدم نصًا داكنًا على الأصفر.
• روابط ملونة في نص الجسم — معظم الروابط الزرقاء تنجح على الأبيض لكنها تفشل على الرمادي الفاتح. اختبر الخلفية الفعلية المحيطة.
• ألوان العلامة التجارية التي تبدو رائعة — غالبًا ما تفشل. أضف خلفية بيضاء مائلة أو قم بتغميق النص.

اختيار أزواج ألوان قابلة للوصول

ثلاثة أنماط موثوقة:

1. داكن على فاتح — #1f2937 على #fff = 14:1 (مثالي).
2. أبيض على داكن — #fff على #1f2937 = 14:1 (مثالي).
3. داكن على مميز — #1f2937 على #fbbf24 = 9:1 (مثالي للأزرار).

ما وراء النص

يتطلب WCAG 2.1 أيضًا 3:1 للعناصر غير النصية (الأزرار، حلقات التركيز، حدود النماذج). أداة الفحص تتعامل مع كليهما.

خلفيات لا تتعارض مع أدواتك

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

جرب أدواتنا المجانية

معظم هذه الأدلة تقترن بأداة عملية يمكنك استخدامها الآن — لا حاجة للتسجيل للتشغيل الأول:

• أداة تغيير حجم الصورة — تصغير وتكبير بدقة البكسل.
• تحويل إلى WebP — ملفات أصغر بنسبة 30-50% من JPG.
• إزالة الخلفية — قص بنقرة واحدة، PNG شفاف.
• مولد الأيقونة المفضلة — كل أحجام المتصفح من مصدر واحد.
• أداة تغيير حجم وسائل التواصل الاجتماعي — الأبعاد الدقيقة لكل منصة.
• المعالجة المجمعة — تطبيق أي أداة على ما يصل إلى 200 صورة دفعة واحدة.

تصفح كتالوج الأدوات الكامل.