QuickATools

أدوات المطوّرين · Free browser tool

فاحص تباين الألوان وفق WCAG

تحقق من نسب تباين لون النص إلى الخلفية في الوقت الفعلي. تحقق من امتثال WCAG 2.1 AA و AAA فورًا لتصميم ويب قابل للوصول.

Colors

Pick or type hex values for text and background.

#
#

Live preview

Sample heading

The quick brown fox jumps over the lazy dog. Body text should stay readable at this size for AA compliance (4.5:1).

Smaller supporting copy — check Normal Text AA/AAA below.

Contrast ratio

17.74:1

Range is 1:1 (identical) to 21:1 (black on white).

Text luminance
0.0092
rgb(17, 24, 39)
Background luminance
1.0000
rgb(255, 255, 255)

WCAG 2.1 compliance

Large text means at least 18pt (24px) regular or 14pt (18.66px) bold.

  • Normal text · AA

    Body copy under ~18pt / 14pt bold · ≥ 4.5:1

    Pass

  • Normal text · AAA

    Enhanced contrast for body copy · ≥ 7:1

    Pass

  • Large text · AA

    ≥18pt regular or ≥14pt bold · ≥ 3:1

    Pass

  • Large text · AAA

    Enhanced contrast for large text · ≥ 4.5:1

    Pass

Frequently Asked Questions

ما نسب التباين التي يتطلبها WCAG 2.1 فعليًا؟

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

ما الفرق العملي بين AA و AAA؟

AA هو هدف الامتثال الأكثر شيوعًا للمواقع العامة والخدمات الحكومية والمنتجات التجارية — يوازن القابلية للقراءة مع مرونة التصميم. AAA مستوى معزّز أصرم يُستخدم عندما تحتاج أقصى قابلية للقراءة (مثل تجارب القراءة طويلة الشكل أو جماهير ذات ضعف بصر كبير). غالبًا ما يكون تحقيق AAA لكل عنصر واجهة غير عملي، لذا تهدف فرق كثيرة إلى AA عالميًا و AAA للنص الجسمي الحرج.

ما الذي يُعد «نصًا كبيرًا» وفق WCAG؟

يُعرَّف النص الكبير بأنه على الأقل 18 نقطة (عادةً ~24px) بوزن عادي، أو على الأقل 14 نقطة (عادةً ~18.66px) بخط عريض. غالبًا ما تتأهل العناوين ونسخ البطل؛ عادةً لا تتأهل فقرات الجسم. يحصل النص الكبير على عتبة تباين أدنى لأن الحروف الأكبر تبقى مقروءة بتباين أضعف — لكن يجب أن تتحقق من الحجم المعروض فعليًا في CSS الخاص بك، وليس فقط ملف التصميم.

لماذا يهم تباين الألوان بهذا القدر لإمكانية الوصول؟

التباين المنخفض من أكثر إخفاقات إمكانية الوصول شيوعًا. يعتمد المستخدمون ضعاف البصر وكبار السن والأشخاص على شاشات خافتة أو مغسولة بالشمس وكثير ممن لديهم نقص رؤية الألوان على فرق إضاءة كافٍ — وليس فقط درجة اللون — لقراءة النص. فحص التباين مبكرًا يمنع شحن واجهات تبدو مصقولة في ظروف مثالية لكنها تصبح غير قابلة للاستخدام لحصة كبيرة من الزوار الحقيقيين.

أدوات قد تحتاجها أيضًا

استكشف أدوات مجانية أخرى في المتصفح للبائعين وصنّاع المحتوى والمحترفين.

لماذا تباين الألوان غير قابل للتفاوض للواجهات القابلة للوصول

التصميم بلا حواجز ليس خطوة تلميع اختيارية — إنه كيف يقرأ الأشخاص ضعاف البصر أو ناقصو رؤية الألوان أو تحت وهج خارجي قاسٍ واجهتك. يحدد WCAG 2.1 نسب تباين دنيا بين النص وخلفيته حتى يبقى المحتوى مقروءًا لنطاق أوسع بكثير من المستخدمين. الفشل في تلك العتبات يستبعد الناس بهدوء من النماذج والمستندات ولوحات المعلومات وصفحات التسويق التي تبدو سليمة للمصممين على شاشات معايرة.

يُتوقَّع من المواقع الحكومية ومنتجات المؤسسات وكثير من تطبيقات المستهلك العالمية أن تحقق على الأقل WCAG AA. فحص التباين في المتصفح — بنفس معادلة الإضاءة النسبية التي تستخدمها المواصفة — يتيح لك التحقق من قرارات اللوحة قبل الشحن، دون رفع ألوان العلامة إلى خدمة طرف ثالث. بدّل النص والخلفية، وعاين النص الكبير مقابل العادي، وشارك رابط لوحة مع فريقك عندما يمر تركيبة.

يتطلب AA 4.5:1 للنص العادي و 3:1 للنص الكبير؛ يرفع AAA تلك الأشرطة إلى 7:1 و 4.5:1. يعني النص الكبير عمومًا 18pt (حوالي 24px) عادي أو 14pt (حوالي 18.66px) عريض. استخدم هذه الأداة كبوابة سريعة في مراجعات التصميم، ثم أكد الواجهة النهائية في السياق — الأيقونات والتدرجات والطبقات يمكن أن تغيّر التباين الفعّال حتى عندما تمر قيمتان hex مسطحتان.

المزيد من أدوات المطورين على هذا الموقع: تحقق من أنماط النماذج بمختبر Regex، وافحص رموز المصادقة في مفكك JWT، ورتّب رموز التصميم كـ JSON بمنسّق ومحقق JSON، أو رمّز الأصول عبر ترميز/فك ترميز Base64. لصور منتجات الأسواق، يعيد فاحص خلفية صور المنتجات استخدام نفس حساب الإضاءة مقابل صور حقيقية.