تأكد من أن الجميع قادرون على قراءة نصوصك
قد يبدو النص الرمادي الفاتح على خلفية بيضاء، أو النص الأبيض على زر بألوان الباستيل، أو الروابط الزرقاء على خلفية داكنة أنيقاً في ملف التصميم، ولكنه قد يكون غير مقروء للمستخدمين الفعليين. تقيس أداة فحص تباين الألوان هذه نسبة التباين بين أي نص ولون خلفية، وتخبرك فوراً بما إذا كانت تلبي إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) للمستويين AA و AAA — وإذا لم تكن كذلك، فإنها تقترح عليك أقرب لون يلبي هذه المعايير.
الميزات
- نسبة التباين من 1:1 إلى 21:1.
- نتائج WCAG 2 AA و AAA للنصوص العادية، والنصوص الكبيرة، وعناصر واجهة المستخدم.
- أي تنسيق للألوان: HEX أو RGB أو HSL أو أسماء ألوان CSS.
- معاينة مباشرة مع العناوين، والنص الأساسي، والنصوص الصغيرة.
- اقتراحات ألوان متوافقة مع معايير إمكانية الوصول تحافظ على درجة لونك الأصلية.
- زر التبديل للتحقق من إصدارات الألوان الفاتحة على خلفيات داكنة.
نظرة سريعة على متطلبات WCAG
| المحتوى | AA | AAA |
|---|---|---|
| النص العادي | 4.5:1 | 7:1 |
| النص الكبير (≥ 24 px، أو ≥ 19 px عريض) | 3:1 | 4.5:1 |
| عناصر واجهة المستخدم والرسومات | 3:1 | — |
| الشعارات والنصوص الزخرفية | لا توجد متطلبات | لا توجد متطلبات |
تركيبات ألوان شائعة
| النص | الخلفية | النسبة | نص عادي AA |
|---|---|---|---|
| #000000 | #FFFFFF | 21:1 | اجتياز |
| #767676 | #FFFFFF | 4.54:1 | اجتياز (أفتح درجة رمادي تجتاز الاختبار) |
| #999999 | #FFFFFF | 2.85:1 | فشل |
| #FFFFFF | #0EA5E9 | 2.77:1 | فشل |
| #FFFFFF | #0369A1 | 5.93:1 | اجتياز |
أدوات ذات صلة
حوّل الألوان بين الصيغ باستخدام محول الألوان، وأنشئ لوحة ألوان كاملة باستخدام مولد لوحة الألوان، أو التقط الألوان بدقة من لقطة شاشة باستخدام منتقي الألوان من الصور.