فاحص نسبة تباين WCAG
اعرف هل يبقى النص مقروءاً فوق خلفيته وفق معايير WCAG: يصل #111827 على الأبيض إلى 17.74 مقابل 1، فينجح في AA وAAA للنص العادي والكبير. رقم يمكن الاستشهاد به في بلاغات إمكانية الوصول. مجاناً في متصفحك.
- مجاني
- يعمل في متصفحك
- دون تسجيل
- بياناتك لا تغادر جهازك
شغّل الأداة مجانًا
مثال محلول
- اللون الأمامي
- #111827
- لون الخلفية
- #ffffff
- نسبة التباين
- 17.74
يأخذ فاحص نسبة تباين WCAG هذا لونَي هكس — أمامي وخلفي — ويُعيد نسبة التباين الرسمية التي تستخدمها إرشادات إتاحة المحتوى على الويب Web Content Accessibility Guidelines، إلى جانب علامات واضحة لاجتياز أو رسوب AA وAAA للنص العادي والنص الكبير. يستخدم المصممون والمطورون والمراجعون تلك النسبة لتقرير ما إذا كان نص المتن والأزرار والتسميات وعناصر الواجهة تبقى مقروءة لذوي ضعف البصر أو اختلافات إدراك الألوان. تتّبع الأداة صيغة السطوع النسبي WCAG 2.x: يُخطَّى كل قناة هكس sRGB خطيًا، ويُرجَّح السطوع بالمعاملات المعيارية 0.2126 و0.7152 و0.0722، وتكون نسبة التباين (L الأفتح زائد 0.05) مقسومة على (L الأغمق زائد 0.05). العتبات غير مقرَّبة: يحتاج النص العادي إلى 4.5 على الأقل ل AA و7 ل AAA؛ ويحتاج النص الكبير إلى 3 على الأقل ل AA و4.5 ل AAA. النتائج حتمية دون أي اتصال بالشبكة أو عيّنات عشوائية أو اختصارات مرتبطة بالتاريخ.
ما الذي تقيسه نسبة تباين WCAG وما الذي تحتويه الاستجابة
نسبة التباين هي الرقم الوحيد الذي تستخدمه WCAG لوصف مدى بروز النص عن خلفيته بعد مراعاة الإدراك البشري للسطوع بدلًا من مجرد مسافة RGB البسيطة. يبلغ زوج أسود نقي على أبيض نقي واحدًا وعشرين إلى واحد، وهو الحد الأقصى النظري لألوان sRGB المعتمة، بينما تعطي الألوان المتطابقة واحدًا إلى واحد وترسب في كل معيار نصي.
النص الكبير في مصطلحات WCAG يعني على الأقل ثمانية عشر نقطة عادية أو ما يعادل أربع عشرة نقطة عريضة؛ ولا تقيس الأداة حجم الخط نفسه — تطبّق فقط عتبات النص الكبير حتى تربط المصفوفة بمقياس أنواعك. لا يوجد زحف صفحات، ولا تحليل CSS، ولا مزج شفافية، ولا أخذ عيّنات من تدرّج: تُدخل لونَي هكس صريحين وتحصل على مصفوفة قابلة لإعادة الإنتاج تناسب CI لرموز التصميم، وخوادم إضافات Figma، وتعليقات التذاكر التي يجب أن تستشهد بنسبة عددية لا رأي لقطة شاشة.
كيف تُقرأ مدخلات الهكس وكيف يبقى AA وAAA قابلَين لإعادة الإنتاج
يجب أن تكون كلتا القيمتين هكس: هاش بادئ اختياري، ثم إما ثلاثة أرقام تتوسع إلى ستة (#abc تصبح #aabbcc) أو ستة أرقام كاملة، دون حساسية لحالة الأحرف. تُرفض لواحق ألفا، ودوال rgb()، ودوال hsl()، وأسماء ألوان CSS، والأعداد الصحيحة المجردة برسالة تسمّي الحقل وتُظهر ما وُرد، حتى لا يتحول رمز خاطئ إلى رسوب صامت. كل لون محدود باثنين وثلاثين حرفًا حتى يبقى التحقق رخيصًا ويمنع حوادث اللصق.
بعد التحليل، تُخطَّط القنوات خطيًا بمنحنى sRGB القطعي في WCAG — قسمة على 12.92 دون عتبة 0.04045، وإلا رفع ((c زائد 0.055) على 1.055) إلى الأس 2.4 — ثم تُجمَع في السطوع النسبي. تستخدم النسبة السطوع الأفتح في البسط؛ وتقارن علامات الاجتياز النسبة العشرية غير المقرَّبة بالأرقام 4.5 و7.0 و3.0 حتى لا تخفي نسبة معروضة 4.50 قيمة حقيقية 4.499 يجب أن ترسب في AA.
أين تندرج فحوص التباين في أنظمة التصميم ومراجعات الواجهة وCI
تواجه فرق المنتجات متطلبات التباين حين تبدو لوحة ألوان علامة تجارية أنيقة على شريحة تسويقية لكنها ترسب في نص المتن على بطاقة بيضاء، أو حين يُولَّد سمة الوضع الداكن من رموز فاتحة، أو حين يطلب أصحاب المصلحة القانونيون والامتثال دليل AA موثَّقًا قبل الإطلاق. يربط المهندسون العقد نفسه بفحوص طلبات السحب التي تمنع تغيير رمز إذا انخفض AA للنص العادي دون 4.5 لألوان المتن الأساسية، أو يسجّلون حالة AAA للنص الكبير للعناوين الرئيسية التي تقترب عمدًا من السطح.
يستخدم فريقا الجودة والإتاحة النسبة العددية في تقارير الأعطال حتى يصحّح المطورون الزوج الدقيق بدلًا من التخمين من لقطة شاشة. تتحقق فرق المحتوى والتسويق أن رموز هكس الحملة لا تزال تجتاز عند وضعها على خلفيات فاتحة أو داكنة. اقرنها بأدوات تحويل الألوان حين تحتاج إلى صيغ RGB أو HSL وسيطة، وبتدقيقات إتاحة كاملة الصفحة حين يجب فحص ترميز حي بدلًا من قيمتَي هكس صريحتين.
حالات الاستخدام
مراجعة رموز التصميم واللوحات
افحص كل زوج لون أمامي/خلفي في لوحة العلامة التجارية مقابل AA وAAA قبل تثبيت الرموز للسمتين الفاتحة والداكنة.
تقارير أعطال الإتاحة
أرفق نسبة تباين عددية ومصفوفة AA/AAA بالتذاكر حتى يصحّح المطورون زوج الهكس الدقيق، لا لقطة شاشة غامضة.
الأسئلة الشائعة
ما تنسيقات الألوان المقبولة؟
الهكس فقط: #RGB أو #RRGGBB، بهاش بادئ أو دونه، دون حساسية لحالة الأحرف.
ما عتبات AA وAAA المستخدمة هنا؟
النص العادي: AA ≥ 4.5 وAAA ≥ 7. النص الكبير: AA ≥ 3 وAAA ≥ 4.5. تستخدم العلامات النسبة غير المقرَّبة؛ والنسبة المعروضة مقرَّبة إلى منزلتين عشريتين.
لماذا رسب زوج في AA رغم أنه يبدو جيدًا لي؟
يتفاوت الإدراك البشري ويختلف الضوء المحيط. تستخدم WCAG السطوع النسبي على sRGB الخطي لا الحيوية المدرَكة. اعتمد على النسبة العددية للفحوص الامتثالية، ثم عدّل قيم الهكس حتى تجتاز المصفوفة.
هل تفحص هذه الأداة موقعي بحثاً عن مشكلات التباين؟
لا. لا تزور الأداة صفحاتك ولا تقرأ أنماطها؛ أنت تحدد لوني النص والخلفية صراحةً، فتحصل على نسبة التباين ونتائج AA وAAA لهذا الزوج فقط.
ما أعلى نسبة تباين ممكنة؟
الأسود الصافي على الأبيض الصافي يبلغ واحداً وعشرين إلى واحد، وهو الحد الأقصى للألوان المعتمة على الشاشة. أما لونان متطابقان فيعطيان واحداً إلى واحد ويرسبان في كل معايير النص.
أدوات ذات صلة
للمطوّرين — الوصول عبر API
كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.
الـEndpoint
صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.
استدعِ الخدمة من بيئتك
curl -X POST https://api.kit.forhosting.com/color/contrast \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"foreground":"#111827","background":"#ffffff"}'const res = await fetch("https://api.kit.forhosting.com/color/contrast", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"foreground": "#111827",
"background": "#ffffff"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/contrast",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"foreground": "#111827",
"background": "#ffffff"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/contrast", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"foreground":"#111827","background":"#ffffff"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"foreground":"#111827","background":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/contrast", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)مثال على الطلب
{
"foreground": "#111827",
"background": "#ffffff"
}مثال على الاستجابة
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.contrast",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.
الأسعار
السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.
الحدود
max_color_chars | 32 |
الأخطاء
| HTTP | الرمز | المعنى |
|---|---|---|
401 | unauthorized | مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك. |
402 | insufficient_balance | رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة. |
404 | unknown_type | نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب. |
429 | rate_limited | تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة. |
ملاحظات تقنية
استخدمها مجانًا في المتصفح لمراجعات لوحة الألوان ورموز التصميم، أو استدعِ الواجهة البرمجية API بسعر $0.002 لكل طلب ناجح عندما تحتاج إلى المصفوفة نفسها في CI أو أنظمة التصميم أو بوابات الإتاحة الآلية.
ما الذي تقيسه نسبة تباين WCAG وما الذي تحتويه الاستجابة
يوحّد هذا الفاحص كل مُدخل هكس إلى صيغة قانونية بأحرف صغيرة #rrggbb وصدى rgb(r, g, b)، ثم يُعيد contrast_ratio مقرَّبة إلى منزلتين عشريتين للعرض، إضافة إلى كائن wcag بفرعين normal_text وlarge_text يحمل كل منهما حقلي aa وaaa منطقيَّين. وسم الطريقة wcag_relative_luminance يوثّق أن المسار هو صيغة السطوع النسبي المنشورة، لا تجربة delta-E إدراكية أو APCA. تُرفض رموز الهكس غير الصالحة والحقول المفقودة والقيم غير النصية والسلاسل الطويلة جدًا ب invalid_input ولا تُفرض عليها رسوم أبدًا. إذا احتجت إلى تدقيق موقع كامل، اقرن نقطة النهاية هذه بماسح إتاحة أوسع؛ تجيب هذه الصفحة فقط عن سؤال اللونين بصيغة JSON ثابتة للبشر والآلات على حدّ سواء.
كيف تُقرأ مدخلات الهكس وكيف يبقى AA وAAA قابلَين لإعادة الإنتاج
الحقلان المفضَّلان هما foreground للون النص أو الأيقونة وbackground للسطح خلفه، لكن تُقبل أيضًا الأسماء البديلة fg وcolor1 وtext وhex1 للون الأول، وbg وcolor2 وhex2 للون الثاني، حتى تتمكن النماذج وسلاسل الاستعلام وجداول البيانات من إعادة استخدام العقد نفسه دون إعادة تسمية الأعمدة. اقرن الفحص المجاني في المتصفح على هذه الصفحة بالواجهة البرمجية المدفوعة حين تحتاج خطوط أنابيب أنظمة التصميم إلى النتيجة الرياضية نفسها دون إعادة تنفيذ رياضيات السطوع في كل لغة.
أين تندرج فحوص التباين في أنظمة التصميم ومراجعات الواجهة وCI
يمكن للمصممين لصق أزواج هكس من Figma أو ملف JSON للرموز وقراءة مصفوفة AA وAAA قبل اعتماد سلّم ألوان. في هذه الصفحة يجري العمل بالكامل في متصفحك؛ وعبر الواجهة البرمجية API يكلّف كل استعلام ناجح $0.002، ولا يُفرض رسم على التحقق الفاشل، ولا يُخزَّن شيء بعد إعادة الاستجابة. هذا الفصل — الاستكشاف التفاعلي المجاني والواجهة البرمجية المدفوعة والمطابقة — يتماشى مع بقية فئة tier A من كتالوج KIT، ويتيح لك الانتقال من ورشة لوحة ألوان إلى خط أنابيب آلي دون تغيير النتيجة الرياضية.
حالات التكامل
بوابات CI لألوان الواجهة
استدعِ الواجهة البرمجية من طلبات السحب لإفشال البناء حين تنخفض أزواج هكس المتن أو الزر دون AA للنص العادي (4.5:1).
أسئلة تقنية
كم يكلف فاحص نسبة تباين WCAG؟
هو مجاني في متصفحك على هذه الصفحة. وعبر الواجهة البرمجية API يكلّف الطلب الناجح $0.002؛ ولا تُفرض رسوم على المُدخلات غير الصالحة.
هل تفحص هذه الأداة موقعي بحثًا عن مشكلات التباين؟
لا. تقارن فقط لونَي هكس تقدّمهما أنت. لتدقيقات الصفحات الحية استخدم ماسح إتاحة مخصصًا؛ تجيب نقطة النهاية هذه عن سؤال نسبة WCAG بين لونين فقط.