نص أبيض على زر أخضر: قِس التباين قبل الاختيار

أدخل الألوان الفعلية

ابدأ بـ #22c55e لسطح الزر و#ffffff للنص. هذه أمثلة؛ في مشروعك استخدم الأنماط المحسوبة في المتصفح. اللون الأمامي هو النص والخلفية هي الزر نفسه، لا خلفية الصفحة. ابدأ بلونين معتمين.

قارن نصًا داكنًا

أبقِ السطح كما هو وغيّر النص إلى #111827. يحدد W3C AA نسبة 4.5:1 للنص العادي و3:1 للنص الكبير. اقرأ نتيجة الاجتياز أيضًا ولا تعتمد على الرقم المقرب وحده. اختيار النص الكبير لا يجعل تسمية صغيرة كبيرة بالفعل.

• W3C · WCAG 2.2 · Contrast (Minimum)

افحص حالات الزر الأخرى

إذا تغير السطح عند مرور المؤشر، قِس هذا الزوج منفصلًا. انتقل إلى الزر بلوحة المفاتيح وافحص النص. كرر في الوضع الداكن إذا تغيرت الألوان. قد تختلف قيم ملف التصميم عن CSS الفعلي في الصفحة.

أكمل الاختبار في الصفحة الحقيقية

تقارن الأداة لونين HEX معتمين ولا تدقق الصفحة كاملة. الصور والتدرجات والطبقات الشفافة تحتاج فحصًا إضافيًا. جرّب الزر على هاتف وبلوحة المفاتيح. دوّن الألوان والحالات المختبرة لتعيد الفحص عند تغيير القالب.