ForHosting KIT · قراءة المواقع ومراقبتها

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

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

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

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

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

اقرؤوا نتيجة التباين قراءة صحيحة

تصف النسبة المعادة الفرق في السطوع النسبي بين اللون الأفتح واللون الأغمق. تعني 1:1 أن السطوع متساو، أما 21:1 فهي النسبة القصوى بين الأسود والأبيض. تضع WCAG حدودا مختلفة لأن النص الكبير أو السميك يظل مقروءا عند تباين أقل. يتطلب AA نسبة 4.5:1 للنص العادي و3:1 للنص الكبير، بينما يتطلب AAA نسبتي 7:1 و4.5:1. تعرض الاستجابة حكم كل معيار بصورة مستقلة. وتعد WCAG النص كبيرا إذا بلغ 18 نقطة، أو 14 نقطة عندما يكون عريضا. لا تقربوا النتيجة إلى الأعلى عند تقرير المطابقة؛ فالنسبة تعرض بمنزلتين عشريتين لتسهيل قراءتها، لكن أحكام النجاح تستخدم القيمة الكاملة قبل التقريب. لذلك لا تنجح تركيبة تقل قليلا عن الحد بسبب طريقة العرض وحدها.

اختاروا لوني المقدمة والخلفية الفعليين

اختبروا الألوان التي يراها الشخص فعلا، لا مجرد عينتين متجاورتين في لوحة التصميم. في الفقرات يكون لون المقدمة هو لون النص بعد التصيير، وتكون الخلفية هي اللون المصمت النهائي الواقع خلفه مباشرة. افحصوا الروابط في حالات الوضع الافتراضي والزيارة والتمرير والتركيز والتعطيل عندما تظل ناقلة للمعلومات. وأدرجوا الأزرار والشارات والتنبيهات والنماذج والرسوم والتنقل. تقبل الأداة الألوان المعتمة بصيغتي #RGB و#RRGGBB. إذا استخدمت الواجهة شفافية أو تدرجا أو صورة أو ظلا أو مزجا، فحددوا أولا اللون النهائي عند موضع الفحص. وفي الخلفيات المتغيرة اختبروا المنطقة الأقل تباينا لا المتوسط. كما يلزم فحص ظهور التركيز وتباين العناصر غير النصية وعدم الاعتماد على اللون وحده بصورة منفصلة.

ادمجوا الفحص في سير عمل موثوق

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

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

مراجعة تسليم التصميم

تحققوا قبل التنفيذ من أن ألوان النص والأسطح المقترحة تحقق مستوى WCAG المقصود.

تدقيق رموز ألوان التصميم

اختبروا كل رمز دلالي للمقدمة مقابل جميع الخلفيات التي يسمح بها نظام المكونات.

حماية عملية الإصدار

استدعوا الفحص الحتمي من الاختبارات الآلية وامنعوا التغييرات التي تخفض التباين المطلوب.

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

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

استخدموا الترميز السداسي المعتم #RGB أو #RRGGBB. ترفض أسماء CSS وقنوات الشفافية ودوال rgb() والتدرجات والقيم غير الصحيحة.

ما حدود WCAG AA؟

يتطلب AA نسبة 4.5:1 على الأقل للنص العادي و3:1 للنص الكبير.

ما حدود WCAG AAA؟

يتطلب AAA نسبة 7:1 على الأقل للنص العادي و4.5:1 للنص الكبير.

لماذا قد تخفق نسبة معروضة عند الحد؟

يستخدم العرض منزلتين عشريتين، لكن القرار يحتفظ بالدقة الكاملة ولا يرفع قيمة تقل قليلا عن الحد.

هل يغير تبديل المقدمة والخلفية النسبة؟

لا. تقارن المعادلة السطوعين الأفتح والأغمق، لذلك يحافظ تبديل لونين معتمين على النسبة والنتائج.

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

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

الـEndpoint

POSThttps://api.kit.forhosting.com/web/color-contrast-check

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

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

curl -X POST https://api.kit.forhosting.com/web/color-contrast-check \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"foreground":"#1a1a1a","background":"#ffffff"}'

const res = await fetch("https://api.kit.forhosting.com/web/color-contrast-check", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "foreground": "#1a1a1a",
    "background": "#ffffff"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/color-contrast-check",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "foreground": "#1a1a1a",
    "background": "#ffffff"
},
)
task_id = res.json()["task_id"]

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

body := bytes.NewBufferString(`{"foreground":"#1a1a1a","background":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/color-contrast-check", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

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

{
  "foreground": "#1a1a1a",
  "background": "#ffffff"
}

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

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

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

الأسعار

لكل طلب$0.002

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

الحدود

`timeout_sec`	30
`max_crawl_pages`	25

الأخطاء

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

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