ForHosting KIT · تحرير الصور وتحليلها

هل النص مقروء على الخلفية؟

اعرف هل سيكون النص مقروءًا على خلفيته: اللون #111827 على الأبيض بحجم 16 px يبلغ تباينه 17.74 ويجتاز AA وAAA. ويحدد حجم الخط وسماكته ما إذا كان الحد الأدنى للنص الكبير ينطبق. مجاني في متصفحك.

مجاني
يعمل في متصفحك
دون تسجيل
بياناتك لا تغادر جهازك

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

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

مثال محلول

إذا أدخلت

اللون: #111827
الخلفية: #ffffff
الحجم: 16

تحصل على

وحدة الحجم: Px
الحجم (pt): 12
الحجم (px): 16
مقياس النص: normal

يحتاج المصممون والمهندسون كثيرا إلى جواب نعم أو لا عن سؤال يبدو بسيطا: هل لون النص هذا، بهذا الحجم، مقروء حقا على تلك الخلفية؟ نسبة التباين وحدها لا تحسم الأمر، لأن إرشادات إتاحة محتوى الويب تعامل الحرف الكبير برفق أكثر من متن الصفحة. يأخذ هذا الفاحص لون hex للنص ولون hex للخلفية وحجم الخط، ويصنّف العينة normal أو large وفق القاعدة المنشورة: ثمانية عشر نقطة أو أربع عشرة نقطة مع التغليظ، ثم يقارن نسبة التباين الرسمية باللمعان النسبي مع حدّ المستوى الذي طلبتموه. الحكم قيمة منطقية اسمها legible، مع النسبة والعتبة وطبقة المقياس حتى تعرضوا الحساب إلى جانب الجواب.

كيف تُحسم مقروئية WCAG بحسب الحجم

لا تعامل إرشادات إتاحة محتوى الويب كل حرف معاملة واحدة. متن من ستة عشر بكسل عليه واجب تباين أشد من عنوان من أربعة وعشرين بكسل، لأن الأشكال الأكبر تبقى مقروءة بفجوة لمعان أصغر. يحوّل هذا الفاحص تلك القاعدة إلى قيمة منطقية واحدة.

يحلّل لون النص والخلفية كـ hex من sRGB غير شفاف، ويخطّي كل قناة من ثماني بتات بالمنحنى الرسمي المجزأ، ويبني اللمعان النسبي بالأوزان 0.2126 و0.7152 و0.0722. نسبة التباين هي اللمعان الأسطع زائد 0.05 مقسوما على الأغمق زائد 0.05. وفي الوقت نفسه يحوّل الحجم المعطى إلى نقاط CSS، حيث تعادل النقطة أربعة أثلاث البكسل، ويصنّف العينة large متى بلغت ثماني عشرة نقطة على الأقل، أو أربع عشرة نقطة على الأقل وكانت مغلّظة.

يحتاج الحرف الكبير حدا أدنى ثلاثة إلى واحد لـ AA وأربعة فاصلة خمسة إلى واحد لـ AAA؛ والحرف العادي يحتاج أربعة فاصلة خمسة وسبعة. يختار المستوى المطلوب أحد هذه الأرضيات الأربع. تُقارن النسبة غير المستديرة بالأرضية حتى لا يمرّ 4.499 تحت AA بسبب 4.50 معروض.

لا يُستنتج شيء من CSS أو لقطات أو صفحة حيّة: تسمّون الزوج والحجم فتحصلون على حكم قابل للتكرار للتذاكر ورموز التصميم والبوابات الآلية.

عقد الإدخال والوحدات والتحقق

يجب أن يكون كلاهما #RGB أو #RRGGBB مع إشارة المربع الأولى أو بدونها، بلا تمييز لحالة الأحرف، وبلا أكثر من اثنين وثلاثين حرفا. التحويل دقيق: ثماني عشرة نقطة تساوي أربعة وعشرين بكسل، وأربع عشرة نقطة تساوي ثمانية عشر وثلثي بكسل. القيمة الافتراضية لـ bold هي false ويقبل قيمة منطقية أو السلسلتين true وfalse؛ وعند أربع عشرة نقطة أو أكثر ينقل التغليظ العينة إلى طبقة النص الكبير.

القيمة الافتراضية لـ level هي aa ويجب أن تكون aa أو aaa. التحقق الفاشل لا يُحاسب.

أين ينفع فحص نعم أو لا بحسب الحجم

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

يربط المهندسون العقد بفحوص طلب الدمج التي توقف رمز المتن عندما يهبط النوع العادي من ستة عشر بكسل دون 4.5 إلى 1، ويسمحون لعنوان بطل من ثماني عشرة نقطة بأرضية النص الكبير 3 إلى 1. يرفق اختصاصيو الجودة والإتاحة النسبة العددية والمقياس المصنّف والقيمة المنطقية بالتذاكر حتى يستهدف الإصلاح الزوج والحجم الحقيقيين لا تخمينا من لقطة. تتحقق فرق التسويق من ألوان hex للحملة مقابل خلفية الموقع بحجم التعليق الفعلي لا بحجم عنوان مفترض.

في هذه الصفحة يجري العمل كله في متصفحكم. اقرنوا هذا الحكم بماسح إتاحة لصفحة كاملة عندما يجب تتبع الوسم الحي، وبمصفوفة نسب تباين عندما تريدون كل أعلام AA وAAA لكلا المقياسين معا. استعملوا هذه الصفحة عندما تكون نية البحث تحديدا: هل ذلك النص، بذلك الحجم، آمن على تلك الخلفية.

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

المتن مقابل العنوان بنفس زوج hex

تحققوا مما إذا كان رمز رمادي على أبيض يسقط عند 16px متنا لا يزال يجتاز نصا كبيرا عند 24px قبل إعادة استعماله على بطل.

بوابات CI تعرف مقياس الحروف

ارفضوا طلب دمج عندما يهبط لون متن أساسي عند 16px عادي دون AA 4.5:1، بينما تستعمل العناوين أرضية النص الكبير.

دليل في التذكرة بحكم نعم أو لا

أرفقوا القيمة المنطقية والنسبة والمقياس المصنّف بخلل إتاحة حتى يستهدف الإصلاح الحجم الحقيقي لا تخمين لقطة.

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

ما الذي يُعد نصا كبيرا؟

النص الكبير وفق WCAG لا يقل عن 18 point، أو لا يقل عن 14 point مع التغليظ. يحوّل هذا الأداة بكسل CSS بـ 1pt = 4/3 px، لذا 24px عادي و18.67px مغلّظ هما large.

ما حد التباين المستعمل؟

النص العادي: AA 4.5:1 وAAA 7:1. النص الكبير: AA 3:1 وAAA 4.5:1. يختار المستوى المطلوب (aa افتراضيا) أرضية واحدة؛ وتستعمل الأعلام النسبة غير المستديرة.

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

hex فقط: #RGB أو #RRGGBB مع إشارة المربع أو بدونها.

لماذا ينجح العنوان بينما تفشل الألوان نفسها في نص الفقرات؟

للنص الكبير حد أدنى أقل: 3 إلى 1 في AA بدل 4.5 إلى 1. فالعنوان بحجم 24 بكسل يُعد كبيرًا لأنه 18 نقطة، أما نص الفقرات بحجم 16 بكسل فعادي ويجب أن يبلغ الحد الأشد.

هل يكفي تباين معروض بقيمة 4.50 لاجتياز AA؟

فقط إذا بلغت القيمة غير المقرّبة 4.5. فالفحص يقارن التباين الدقيق بالحد الأدنى، لذا فإن 4.499 المعروضة على أنها 4.50 تبقى راسبة في AA للنص العادي.

أدوات ذات صلة

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

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

الـEndpoint

POSThttps://api.kit.forhosting.com/color/safe-on-background

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

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

curl -X POST https://api.kit.forhosting.com/color/safe-on-background \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"color":"#111827","background":"#ffffff","size":16}'

const res = await fetch("https://api.kit.forhosting.com/color/safe-on-background", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "color": "#111827",
    "background": "#ffffff",
    "size": 16
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/safe-on-background",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "color": "#111827",
    "background": "#ffffff",
    "size": 16
},
)
task_id = res.json()["task_id"]

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

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

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

{
  "color": "#111827",
  "background": "#ffffff",
  "size": 16
}

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

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

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

الأسعار

لكل طلب$0.002

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

الحدود

`max_color_chars`	32
`max_size`	500

الأخطاء

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

ملاحظات تقنية

الدالة الخالصة نفسها تعمل مجانا في المتصفح وعلى API بسعر $0.002 لكل نداء ناجح. يفشل hex غير صالح أو حجم غائب أو حجم غير موجب بـ invalid_input ولا يُحاسب.

كيف تُحسم مقروئية WCAG بحسب الحجم

ثم يبلّغ الحمل legible والنسبة المستديرة إلى منزلتين والحدّ المطبق وما إذا كان المقياس المصنّف سيجتاز AA وAAA ووسم الطريقة wcag_relative_luminance.

عقد الإدخال والوحدات والتحقق

أرسلوا كائن JSON بثلاثة حقول لازمة. color هو hex النص، ويُقبل أيضا باسم text_color أو foreground أو fg أو text. background هو hex السطح، ويُقبل أيضا باسم background_color أو bg. تُرفض لواحق ألفا ودوال rgb() ودوال hsl() وألوان CSS المسماة بـ invalid_input يسمّي الحقل. size عدد منتهٍ موجب لا يزيد على خمس مئة؛ وfont_size اسم بديل. القيمة الافتراضية لـ size_unit هي px (بكسل CSS) ويجوز تعيينها إلى pt (نقاط CSS). عند النجاح تعيد الاستجابة ألوان hex الصغيرة المعيارية والحجم الذي أرسلتموه وsize_pt وsize_px وbold وtext_scale بقيمة normal أو large والمستوى المطلوب وminimum_ratio وcontrast_ratio وpasses_aa وpasses_aaa والقيمة المنطقية legible. لا نداء شبكة ولا ساعة ولا عيّنة عشوائية: الثلاثي نفسه من color وbackground وsize ينتج الحكم ذاته دائما في أداة المتصفح المجانية وعلى API.

أين ينفع فحص نعم أو لا بحسب الحجم

عبر API تكلف كل مراجعة ناجحة $0.002؛ ولا تُحاسب المدخلات غير الصالحة؛ ولا يُحفظ شيء بعد إعادة الاستجابة.

أسئلة تقنية

كيف أعرف إن كان النص مقروءا على خلفية؟

أرسلوا hex النص وhex الخلفية وحجم الخط. تصنّف API الحجم normal أو large، وتقارن نسبة تباين WCAG بحد AA أو AAA، وتعيد القيمة المنطقية legible.

كم يكلف فحص أمان النص على الخلفية؟

هو مجاني في متصفحكم على هذه الصفحة. عبر API يكلف كل طلب ناجح $0.002؛ ولا تُحاسب المدخلات غير الصالحة.

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

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

مثال محلول

كيف تُحسم مقروئية WCAG بحسب الحجم

عقد الإدخال والوحدات والتحقق

أين ينفع فحص نعم أو لا بحسب الحجم

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

المتن مقابل العنوان بنفس زوج hex

بوابات CI تعرف مقياس الحروف

دليل في التذكرة بحكم نعم أو لا

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

أدوات ذات صلة

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

الـEndpoint

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

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

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

الأسعار

الحدود

الأخطاء

ملاحظات تقنية

كيف تُحسم مقروئية WCAG بحسب الحجم

عقد الإدخال والوحدات والتحقق

أين ينفع فحص نعم أو لا بحسب الحجم

أسئلة تقنية

شكرًا