ForHosting KIT · أدوات المطورين

حساب تباين ألوان WCAG

تقارن هذه الحاسبة لون المقدمة بلون الخلفية وفق طريقة النصوع النسبي في WCAG. وهي تعيد نصوع كل لون ونسبة التباين الناتجة ومؤشرات واضحة لاجتياز AA وAAA للنص العادي والكبير.

● Betaمجاني · داخل متصفحك

شغّل الأداة مجانًا اطّلع على الـAPI

استخدمها من الويبAPIالبريدTelegramالتطبيق قريبًا

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

افهموا القيم التي تعيدها الحاسبة

تبدأ النتيجة بتوحيد المدخلين في لونين سداسيين عشريين من ست خانات وبأحرف صغيرة، ولذلك تظهر الصيغة المختصرة مثل #fff دائماً بصيغة #ffffff. ثم تعرض النصوع النسبي للمقدمة والخلفية. تتراوح قيمة النصوع النسبي من صفر للأسود إلى واحد للأبيض، وتُشتق من قنوات sRGB بعد تحويلها إلى قيم خطية وترجيحها بما يعكس اختلاف حساسية العين للضوء الأحمر والأخضر والأزرق. تقارن نسبة التباين النصوع الأفتح بالنصوع الأغمق، وتتراوح من 1:1 للونين المتطابقين إلى 21:1 للأسود والأبيض. تُقرّب النسبة المعروضة إلى منزلتين عشريتين، لكن كل قرار اجتياز يستخدم القيمة الكاملة غير المقربة. يمنع ذلك قيمة معروضة على هيئة 4.50 من الاجتياز إذا ظلت قيمتها الفعلية دون 4.5. تجمع الاستجابة أربع قيم منطقية للنص العادي والكبير، لذا يسهل عرضها على فريق التصميم أو التحقق منها ضمن سياسة في الاختبارات الآلية من دون تفسير نص وصفي.

أدخلوا ألواناً صالحة وافهموا AA وAAA

أدخلوا لون المقدمة والخلفية بصيغة سداسية عشرية من ثلاث أو ست خانات، مع علامة المربع في البداية أو من دونها. تُقبل قيم مثل #123 و123 و#112233 وAABBCC ثم تُوحّد صيغتها. تُرفض أسماء ألوان CSS وتعبيرات rgb() وhsl() والقيم السداسية ذات الأربع أو الثماني خانات التي تحتوي على ألفا والسلاسل الفارغة والقيم غير النصية، لأن العتامة والتركيب يحتاجان إلى سياق إضافي. يتطلب مستوى WCAG AA للنص العادي نسبة 4.5:1 على الأقل، ويتطلب AAA نسبة 7:1. أما النص الكبير فيتطلب 3:1 لمستوى AA و4.5:1 لمستوى AAA. يُقصد بالنص الكبير عادةً نص بحجم 18 نقطة على الأقل بالوزن العادي أو 14 نقطة بالخط العريض، لكن هذه القدرة لا تفحص الطباعة؛ بل تعيد المصفوفتين لتختار منظومتكم المناسبة. اجتياز نسبة اللون جزء واحد فقط من مراجعة إتاحة الوصول، ولا يثبت أن الواجهة بأكملها متاحة.

استخدموا النتائج في مسارات التصميم والتسليم

ابدؤوا برموز المقدمة والخلفية الفعلية التي يستخدمها المكوّن، لا بألوان مأخوذة من لقطة شاشة مضغوطة. في المراجعة اليدوية، قارنوا نص المتن والنص الثانوي والروابط وتسميات الأزرار وإرشادات النماذج ومؤشرات التركيز والحالات المعطلة بكل سطح تظهر عليه. احتفظوا في نظام التصميم بمصفوفة صغيرة من الأزواج المعتمدة، واستدعوا API كلما تغيرت لوحة الألوان. يمكن لفحص التكامل المستمر رفض زوج مقترح إذا كانت قيمة AA للنص العادي غير صحيحة، مع السماح بتركيبة زخرفية أو عنوان كبير وفق قاعدة موثقة. خزّنوا اللونين بعد توحيدهما والنسبة مع نتيجة الاختبار كي يستطيع المراجعون إعادة إنتاج الملاحظة. تبلغ تكلفة كل طلب آلي $0.002، وتعيد المدخلات غير الصالحة خطأً. لا تستخدم الخوارزمية الشبكة أو العشوائية أو الوقت الحالي، ولذلك يعطي الزوج نفسه النتيجة نفسها دائماً. عند وجود شفافية أو تدرج أو صورة أو حالة تفاعل، حددوا الألوان المرئية الفعلية أولاً أو استخدموا تدقيقاً في المتصفح يستطيع فحص سياق الصفحة كاملاً.

حالات الاستخدام

مراجعة رموز التصميم

قارنوا رموز النص والأسطح قبل نشر سمة فاتحة أو داكنة.

حماية طلبات التغيير

اجعلوا الفحص الآلي يفشل عندما يتوقف زوج ألوان معدل عن بلوغ مستوى النص المطلوب.

توثيق ملاحظات إتاحة الوصول

أضيفوا الألوان الموحدة وقيم النصوع والنسبة القابلة لإعادة الإنتاج إلى تذكرة أو تقرير تدقيق.

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

ما صيغ الألوان التي يمكنكم استخدامها؟

استخدموا ألواناً سداسية عشرية من ثلاث أو ست خانات، مع علامة المربع في البداية أو من دونها. لا تُقبل ألفا أو الأسماء أو rgb() أو hsl().

ما حدود WCAG التي تُطبّق؟

يستخدم النص العادي 4.5:1 لمستوى AA و7:1 لمستوى AAA. ويستخدم النص الكبير 3:1 لمستوى AA و4.5:1 لمستوى AAA.

هل يعتمد الاجتياز على النسبة المقربة؟

لا. لا تُقرب النسبة إلا للعرض، بينما تقارن المؤشرات القيمة المحسوبة الكاملة بكل حد.

هل يجعل زوج ناجح الصفحة متوافقة مع WCAG؟

لا. إنه يؤكد تباين اللونين المعتمين المقدمين فقط. تشمل مراجعة إتاحة الوصول الكاملة جوانب أخرى كثيرة.

كم تبلغ تكلفة طلب API؟

تبلغ تكلفة كل طلب API مقدار $0.002. ويمكنكم أيضاً استخدام حاسبة المتصفح للفحوص التفاعلية الفردية.

للمطوّرين — الوصول عبر API

كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.

الـEndpoint

POSThttps://api.kit.forhosting.com/color/contrast-ratio-wcag

صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.

استدعِ الخدمة من بيئتك

curl -X POST https://api.kit.forhosting.com/color/contrast-ratio-wcag \
  -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-ratio-wcag", {
  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-ratio-wcag",
    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-ratio-wcag", 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-ratio-wcag", 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_ratio_wcag",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.

الأسعار

لكل طلب$0.002

السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.

الأخطاء

HTTP	الرمز	المعنى
`401`	`unauthorized`	مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك.
`402`	`insufficient_balance`	رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة.
`404`	`unknown_type`	نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب.
`429`	`rate_limited`	تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة.

اطّلع على توثيق KIT الكامل ←