الخطوة 1
أدخل ألوان النص والخلفية
اختر قيم HEX معتمة أو اكتبها. تعرض القيمة غير الصالحة أو غير المكتملة خطأً بينما يظل آخر لون صالح نشطًا.
اختبر ألوان النص والخلفية وفقًا لـ WCAG 2.2 AA وAAA. اعرض نسبة التباين الدقيقة، وعاين حجم الخط ووزنه المحددين، واعرف ما إذا كان الزوج يجتاز الفحص.
تستخدم النتائج الإضاءة النسبية وفق WCAG 2.2. يعتمد الاجتياز أو الإخفاق على القيمة الكاملة حتى لو قُرّبت النسبة الكبيرة للعرض.
#RGB أو #RRGGBB معتم. اضغط Enter أو اترك الحقل للتطبيق.
#RGB أو #RRGGBB معتم. اضغط Enter أو اترك الحقل للتطبيق.
يساعد النص المقروء الجميع على إنجاز المهمة بجهد أقل.
يحتاج إلى 4.5:1 لمعيار AA و7:1 لمعيار AAA عند هذا الحجم والوزن.
تجتاز العينة النشطة معيار AA. احتفظ بالحجم والوزن المحددين، ثم كرر الفحص لكل حالة تستخدم زوج ألوان مختلفًا.
ينطبق صف الواجهة والرسومات فقط عندما تمثل هذه الألوان العنصر البصري الضروري ولونه المجاور الفعلي. نتيجة زوج واحد ليست تدقيق وصول شاملًا للموقع.
الخطوة 1
اختر قيم HEX معتمة أو اكتبها. تعرض القيمة غير الصالحة أو غير المكتملة خطأً بينما يظل آخر لون صالح نشطًا.
الخطوة 2
طابق سياق CSS المقصود لكي تستخدم النتيجة النشطة عتبة WCAG الصحيحة للنص العادي أو الكبير.
الخطوة 3
اقرأ النسبة ومصفوفة الاجتياز أو الإخفاق، وجرّب اقتراح AA عند الحاجة، ثم انسخ نتيجة موجزة لتسليمها.
تُقارن نسبة محسوبة واحدة بعتبات WCAG 2.2 مختلفة بحسب حجم النص ووزنه ومستوى المطابقة.
تحتاج نسخ النصوص الأساسية والتسميات والتعليقات التوضيحية وغيرها من النصوص التي تقع دون تعريف النص الكبير إلى 4.5:1 على الأقل لـ AA. تقارن الأداة القيمة الكاملة، لذا لا تحوّل نتيجة معروضة ومقربة إخفاقًا إلى اجتياز.
يُعد النص كبيرًا عند 24px بوزن عادي، أو نحو 18.67px عندما يكون عريضًا. لا يصبح عنصر عنوان أو تسمية بارزة بصريًا نصًا كبيرًا تلقائيًا.
يتطلب التباين المحسّن 7:1 للنص العادي و4.5:1 للنص الكبير. تعامل مع هذه النتائج على أنها خاصة بالزوج المحدد، لا ادعاءً بأن الصفحة بأكملها تطابق المستوى AAA.
ينبغي أن تقود النتيجة غير المجتازة إلى خطوة تالية ملموسة، مع ترك مجال لمراجعة العلامة التجارية ونظام التصميم.
ينقل الاقتراح لون المقدمة باتجاه الأسود أو الأبيض حتى يبلغ هدف AA لعينة النص النشطة. إنه تصحيح عملي، وليس ادعاءً بأنه أقرب لون ممكن للعلامة التجارية من حيث الإدراك البصري.
يساعد اختبار الطرفين البسيطين في كشف الاتجاه الذي يحسن الزوج. استخدم هذا الاتجاه لضبط درجة من ألوان العلامة التجارية بعناية بدلًا من تغيير عدة متغيرات في آن واحد.
يمكن لحالات التمرير والتركيز والتحديد والتعطيل والعنصر النائب والزيارة والخطأ أن تقدم أزواجًا جديدة. كرر الفحص كلما تغيرت ألوان المقدمة أو الحد أو الأيقونة أو السطح.
للصور المرئية الأساسية غير النصية متطلب منفصل قدره 3:1 مقابل لونها المجاور ذي الصلة، ولا ينبغي أن يحمل اللون المعنى بمفرده.
استخدم حقلي المقدمة والخلفية لحد حقل الإدخال الفعلي، أو مخطط الزر، أو الأيقونة، أو جزء الرسم البياني، أو مؤشر التركيز، وللسطح الموجود بجانبه مباشرةً.
قد يجتاز مكوّن الفحص في حالة السكون ويفشل بعد التفاعل. اختبر كل حالة مهمة باستخدام الألوان المعروضة فعليًا في تلك الحالة.
أضف نصًا أو أيقونات أو أنماطًا أو أشكالًا أو إشارة مرئية أخرى للحالة والمعنى. لا تجعل النسبة القوية تعليمات تعتمد على اللون وحده مفهومة للجميع.
النتيجة حتمية للونين sRGB معتمين محددين، لكن الواجهات الحقيقية لا تزال تتطلب تقييمًا سياقيًا ويدويًا.
قد تختلف الخلفية الفعلية عبر العنصر. قيّم التصميم المركب النهائي وافحص المناطق ذات أقل تباين بدلًا من اعتبار زوج صلب واحد ممثلًا.
قد تبدو الحواف المضادة للتعرج والمحارف الرفيعة أفتح من لون CSS المحدد. اجتياز الزوج المحسوب ضروري، لكن تظل المراجعة البصرية بالحجم المقصود مهمة.
التباين أحد المتطلبات الكثيرة. تغطي المراجعة الكاملة أيضًا كل مكوّن وحالة، والبنية، واستخدام لوحة المفاتيح، والتكبير وإعادة التدفق، وسلوك التقنيات المساعدة.
يُجرى الحساب في علامة تبويب المتصفح هذه. يدعم هذا المدقّق ألوان sRGB المعتمة بصيغ #RGB و#RRGGBB؛ ولا يفحص التدرجات أو الصور أو الشفافية أو موقعًا إلكترونيًا كاملًا.
نعم. مدقّق تباين الألوان مجاني للاستخدام عبر الإنترنت من دون تسجيل أو تسجيل دخول، ولا تُحجب النتيجة خلف حاجز حساب.
تتطلب WCAG 2.2 AA نسبة لا تقل عن 4.5:1 للنص العادي و3:1 للنص الكبير. وتحتاج المعلومات المرئية الأساسية في مكونات واجهة المستخدم والكائنات الرسومية أيضًا إلى نسبة لا تقل عن 3:1 مقابل اللون المجاور ذي الصلة.
تتطلب WCAG 2.2 AAA نسبة لا تقل عن 7:1 للنص العادي و4.5:1 للنص الكبير. ولا تعني نتيجة AAA على مستوى زوج الألوان أن صفحة أو موقعًا إلكترونيًا كاملًا يطابق المستوى AAA.
النص الكبير هو الذي يبلغ 24 بكسل CSS على الأقل بوزن عادي، أو نحو 18.67 بكسل CSS عندما يكون عريضًا. تعامل هذه الأداة الوزن 700 على أنه عريض، وتستخدم الحجم والوزن المحددين لتصنيف المعاينة النشطة.
لا. تُقرّب النسبة المرئية إلى منزلتين عشريتين لتسهيل القراءة، لكن تحديد الاجتياز أو الإخفاق يستخدم القيمة المحسوبة كاملةً. لا تُقرّب قيمة مثل 4.499:1 إلى الأعلى لاجتياز متطلب 4.5:1.
عندما تفشل عينة النص النشطة في AA، يمكن للأداة اقتراح تعديل عملي للمقدمة باتجاه الأسود أو الأبيض يبلغ العتبة النشطة. راجع الاقتراح مقابل علامتك التجارية ونظام التصميم لديك وكل حالة تفاعلية قبل استخدامه.
نعم، عندما يمثل اللونان المحددان حد المكوّن أو الأيقونة أو العنصر الرسومي الأساسي ولونه المجاور الفعلي. استخدم صف AA لواجهة المستخدم والرسومات، الذي يتحقق من عتبة 3:1، واختبر كل حالة مميزة على حدة.
ليس باستخدام مدقّق الألوان الصلبة هذا. فهو يقبل ألوان sRGB HEX المعتمة لأن التدرجات والصور والشفافية قد تنشئ خلفيات فعلية مختلفة عبر العنصر نفسه، ولذلك تحتاج إلى تقييم سياقي.
لا. تغطي هذه النتيجة زوج ألوان واحدًا محددًا. تحتاج مراجعة إمكانية الوصول الكاملة أيضًا إلى فحص كل الحالات والمكونات، واستخدام لوحة المفاتيح، والدلالات، والتكبير وإعادة التدفق، وبنية المحتوى، وسلوك التقنيات المساعدة.
لا تُستخدم أي خدمة خارجية لإجراء الحساب. تبقى ألوانك ونص العينة وإعداداتك في علامة تبويب المتصفح الحالية وتعود إلى القيم الابتدائية عند إعادة تحميل الصفحة.
تابع باستخدام أداة أخرى تعمل في المتصفح.
اختر لونًا وحوّله
اختر لونًا بصريًا أو أدخل قيمة HEX، ثم اضبط RGB وHSL والتعتيم بدقة. عاين النتيجة وقارن الدرجات القريبة وانسخ رمز اللون الدقيق من دون تسجيل دخول.
أنشئ تدرج CSS
أنشئ تدرجات خطية أو شعاعية أو مخروطية بمحطتي ألوان إلى ست محطات. عاين النتيجة مباشرة، واضبط الاتجاه أو نقطة الأصل ذات الصلة، وانسخ CSS جاهزًا للاستخدام دون تسجيل الدخول.
أنشئ ظل مربع CSS
أنشئ ظلال CSS متعددة الطبقات باستخدام ما يصل إلى أربع طبقات قابلة للتعديل. اضبط الإزاحات والتمويه والانتشار واللون والشفافية ووضع inset، وعاين النتيجة، وانسخ CSS من دون تسجيل الدخول.
حسّن أيقونة SVG
ارفع ترميز SVG أو الصقه، وحسّنه محليًا باستخدام SVGO، وقارن الكود وحجم الملف والنتيجة المرئية قبل التنزيل. لا يلزم تسجيل دخول أو رفع إلى خادم.