أداة فحص تباين الألوان

ما هي أداة فحص تباين الألوان؟

أداة فحص تباين الألوان هي أداة مجانية على الإنترنت لفحص نسبة تباين WCAG، مخصّصة للمصممين والمطورين ومختبري إمكانية الوصول. تأخذ لونًا أماميًا (للنص) ولون خلفية، وتحسب اللمعان النسبي لكل منهما، وتعرض نسبة التباين كقيمة تتراوح من 1:1 إلى 21:1. ثم تخبرك بما إذا كانت تلك النسبة تستوفي المستوى AA من WCAG 2.1 (4.5:1 للعادي، 3:1 للكبير) والمستوى AAA (7:1 للعادي، 4.5:1 للكبير)، وتعرض اللونين في معاينة مباشرة بنص تجريبي لتقييم سهولة القراءة في لمحة. استخدمها للتحقق من أن نص المتن والأزرار والروابط والتسميات قابلة للقراءة قبل إطلاق التصميم.

كيفية استخدام أداة فحص تباين الألوان

1. اكتب أو الصق اللون الأمامي (للنص) كقيمة HEX، أو انقر على منتقي الألوان الأصلي لاختياره بصريًا.
2. افعل الشيء نفسه مع لون الخلفية الذي يستقر عليه النص.
3. اقرأ ناتج نسبة التباين، المعروض كقيمة مثل 4.5:1 (1:1 يعني لونين متطابقين، و21:1 يعني أسود خالص على أبيض).
4. تحقق من شارتي AA وAAA للنص العادي وللنص الكبير (18pt / 14pt عريض فأكثر) لمعرفة المستويات التي تجتازها.
5. انظر إلى المعاينة بالنص التجريبي المعروضة بلونيك للتأكد من أن النص قابل للقراءة بشكل مريح.
6. اضبط أيًا من اللونين حتى تصل إلى مستوى التباين الذي يحتاجه تصميمك.

أمثلة

الأمامي #595959، الخلفية #ffffff

النسبة 7.00:1 — تجتاز AA وAAA للنص العادي والكبير

الأمامي #999999، الخلفية #ffffff

النسبة 2.85:1 — تخفق في AA العادي وAAA، ولا تجتاز أيًا مما هو مطلوب لنص المتن

الأمامي #767676، الخلفية #ffffff

النسبة 4.54:1 — تجتاز AA العادي وAA الكبير، لكنها تخفق في AAA العادي

الأسئلة الشائعة

ما نسب التباين التي يتطلبها WCAG؟

يتطلب المستوى AA من WCAG 2.1 ما لا يقل عن 4.5:1 للنص العادي و3:1 للنص الكبير. والمستوى AAA أكثر صرامة: 7:1 للنص العادي و4.5:1 للنص الكبير. تعرض هذه الأداة شارة نجاح/إخفاق لكل عتبة من هذه العتبات الأربع.

ما الذي يُعدّ نصًا كبيرًا؟

يعرّف WCAG النص الكبير بأنه 18pt (نحو 24px) فأكثر، أو 14pt (نحو 18.66px) فأكثر عند استخدام العريض. للنص الكبير متطلب تباين أقل لأن المحارف الأكبر أسهل في القراءة، ولهذا قد تنجح شارات النص الكبير بينما تخفق شارات النص العادي.

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

تستخدم صيغة WCAG الرسمية: يُحسب اللمعان النسبي لكل لون من قنوات sRGB المُخطَّطة خطيًا، والنسبة هي (الأفتح + 0.05) / (الأغمق + 0.05). يتراوح الناتج من 1:1 (لونان متطابقان) إلى 21:1 (أسود على أبيض).

هل تدعم الألفا أو RGB أو الألوان المسمّاة؟

الإدخال بصيغة HEX فقط (#rgb المختصر أو #rrggbb)، مع منتقي ألوان أصلي لكل حقل. لا تأخذ في الحسبان الألفا/الشفافية ولا الشفافية الجزئية — ادمج الطبقات شبه الشفافة في لون صلب أولًا، ثم افحص ذلك.

هل تُرسل ألواني إلى خادم؟

لا. تجري حسابات اللمعان والنسبة بالكامل في متصفحك باستخدام JavaScript — لا تُرفع أي ألوان ولا يُرسل أي شيء إلى خادم، لذا تعمل بخصوصية وحتى دون اتصال بمجرد تحميل الصفحة.