ForHosting KIT · التحقق من البيانات: بريد، آيبان، هواتف

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

قد يبدو لون النص واضحًا فوق خلفيته على شاشة معينة، لكنه لا يحقق التباين المطلوب للقراءة الميسرة. أدخل لون المقدمة والخلفية لتحصل على النسبة الدقيقة ونتائج WCAG المنفصلة حسب حجم النص.

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

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

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

قياس ثابت بدل الانطباع البصري

يتغير إحساسنا بوضوح اللون مع سطوع الشاشة وسماكة الخط وإضاءة المكان والألوان المحيطة. لذلك لا يكفي أن تبدو العبارة مقروءة على جهاز المصمم حتى نعتمدها للجميع. تحوّل الأداة اللونين إلى فضاء sRGB، وتحسب الإضاءة النسبية لكل لون، ثم تطبق معادلة WCAG بين القيمة الأفتح والقيمة الأغمق. تعرض النتيجة نسبة رقمية وأربعة أحكام مستقلة: AA وAAA للنص العادي، ثم AA وAAA للنص الكبير. قد ينجح العنوان الكبير بينما يفشل النص الصغير باللونين نفسيهما، ولهذا تظهر الحالات منفصلة بدل كلمة عامة مثل «ناجح».

ألصق القيمة كما تظهر في ملف التصميم

تقبل الأداة HEX من ثلاثة أو ستة أرقام، ودالة rgb() بثلاث قنوات، ودالة hsl() مع التشبع والإضاءة كنسب مئوية. تعيد كل قيمة بعد توحيدها بصيغة HEX من ستة أرقام وصيغة RGB، فيسهل مقارنة متغير CSS برمز لون في نظام التصميم أو حفظ نتيجة قابلة لإعادة الفحص. لا تقبل الشفافية عمدًا، لأن اللون المرئي للطبقة شبه الشفافة يعتمد على كل الطبقات الواقعة تحتها. ادمج الشفافية أولًا مع الخلفية النهائية، ثم افحص اللونين المعتمين اللذين يراهما المستخدم فعلًا على الشاشة.

استخدم النتيجة ضمن حدودها الصحيحة

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

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

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

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

ضبط حالات المكوّن

اختبر الحالة العادية والمحددة وحالة الخطأ والتركيز دون الاعتماد على مظهر شاشة واحدة.

قاعدة آلية قبل النشر

استدع واجهة API من التكامل المستمر لرفض أي زوج ألوان يقل عن حد WCAG الذي يطلبه المنتج.

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

ما صيغ الألوان المقبولة؟

HEX من ثلاثة أو ستة أرقام، وrgb() بثلاث قنوات، وhsl() مع التشبع والإضاءة كنسب مئوية. لا تقبل أسماء الألوان أو قناة الشفافية.

ماذا يعني AA وAAA في النتيجة؟

هما مستويان من مطابقة WCAG. يظهران منفصلين للنص العادي والكبير لأن مقدار التباين المطلوب يختلف بينهما.

هل فحص تباين الألوان مجاني؟

تعمل أداة هذه الصفحة مجانًا داخل متصفح الحاسوب أو الهاتف. عبر واجهة API تكلف كل عملية ناجحة $0.002 وتستخدم رصيد KIT المدفوع مقدمًا.

هل يشغل تطبيق الهاتف الأصلي أداة المتصفح المجانية؟

لا. يستدعي التطبيق الأصلي واجهة API ويعرض سعر المهمة داخله. افتح هذه الصفحة في متصفح الهاتف عندما تريد الحساب المحلي.

هل تثبت النتيجة أن صفحتي كلها تطابق WCAG؟

لا. هي تفحص زوجًا واحدًا من الألوان المعتمة. المراجعة الكاملة تشمل الخطوط ولوحة المفاتيح والتسميات والصور والحالات ومتطلبات أخرى.

لماذا ترفض الألوان الشفافة؟

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

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

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

الـEndpoint

POSThttps://api.kit.forhosting.com/verify/color-contrast

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

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

curl -X POST https://api.kit.forhosting.com/verify/color-contrast \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d &#39;{"items":["valor-1","valor-2"]}'

const res = await fetch("https://api.kit.forhosting.com/verify/color-contrast", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "items": [
      "valor-1",
      "valor-2"
    ]
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/verify/color-contrast",
    headers={"Authorization": f"Bearer {os.environ[&#39;KIT_KEY']}"},
    json={
    "items": [
        "valor-1",
        "valor-2"
    ]
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/verify/color-contrast", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => &#39;{"items":["valor-1","valor-2"]}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"items":["valor-1","valor-2"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/verify/color-contrast", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

مثال على الطلب

{
  "items": [
    "valor-1",
    "valor-2"
  ]
}

مثال على الاستجابة

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "verify.color_contrast",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

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

الأسعار

لكل طلب$0.002

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

الحدود

max_color_chars 100

الأخطاء

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

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

شغّل الأداة مجانًا