مقترح لون نص ميسّر
صحّح نصًا ضعيف التباين دون أن يفقد لونه: الرمادي #888888 على الأبيض لا يبلغ إلا 3.54 إلى 1، فيُغمَّق إلى #767676 ليصل إلى 4.54 إلى 1، فوق الهدف 4.5 بقليل. تتغير الإضاءة وحدها. مجاني في متصفحك.
- مجاني
- يعمل في متصفحك
- دون تسجيل
- بياناتك لا تغادر جهازك
شغّل الأداة مجانًا
مثال محلول
- الخلفية
- #ffffff
- النص
- #888888
- النسبة المستهدفة
- 4.5
- النسبة الأصلية
- 3.54
- النسبة المقترحة
- 4.54
- الاتجاه
- darken
- الإضاءة قبل
- 53.33
يأخذ مقترح لون النص الميسّر لون خلفية ست عشري ولون نص ابتدائي ست عشري ونسبة تباين WCAG مستهدفة، ثم يعيد لون نص مقترحًا يفي بتلك النسبة عبر تحريك إضاءة HSL وحدها. يبقى الأصل والتشبع ثابتين، فيظل أزرق العلامة أزرقًا بينما يغمق أو يفتح بما يكفي لاجتياز AA أو AAA على السطح المعطى. إذا كان اللون الابتدائي يفي بالهدف أصلًا، يُعاد بلا تغيير ويُوسَم بأنه غير معدَّل. يستخدمه المصممون ومؤلفو رموز التصميم ومهام CI عندما لا يكفي فاحص التباين: يحتاجون إلى ست عشري بديل حتمي، لا مجرد علامة نجاح أو رسوب. لا توجد استدعاءات شبكة ولا بذور عشوائية ولا قراءة ساعة.
كيف يبلغ بحث الإضاءة هدف تباين WCAG
التباين على الويب ليس مسألة ذوق. تعرّف إرشادات إتاحة محتوى الويب نسبة تباين واحدة من السطوع النسبي كي يبقى متن النص والأزرار والتسميات مقروءة لذوي ضعف البصر. يبدأ هذا المقترح من ست عشري الخلفية وست عشري النص الابتدائي، ثم يغيّر إضاءة لون النص في HSL فقط حتى تبلغ نسبة WCAG 2.x مقابل الخلفية الهدف الذي طلبتموه.
يبقى الأصل والتشبع في مكانهما، فيظل كحلي العلامة كحليًا وأحمر العلامة أحمر؛ لا يتحرك إلا مقدار إضاءة الحبر أو عتمته. يخطّئ المحرك كل قناة sRGB بالمنحنى الرسمي المجزأ، ويبني السطوع بالأوزان 0.2126 و0.7152 و0.0722، ويحسب السطوع الأفتح زائد 0.05 مقسومًا على الأغمق زائد 0.05. ثم يسير إضاءة HSL بأعشار بالمئة حتمية نحو الأسود ونحو الأبيض، ويعيد كل خطوة إلى RGB بثماني بتات، ويحتفظ بأول ست عشري مكمّم في كل اتجاه يفي بالهدف غير المقرَّب.
يفوز المرشح ذو أصغر تغيّر في الإضاءة؛ وعند التعادل يُفضَّل التغميق، وهو الإصلاح المعتاد لنص رمادي على بطاقة فاتحة. إذا كان اللون الابتدائي يفي بالهدف أصلًا، يُعاد بلا تغيير حتى لا تُعاد كتابة الرموز بلا سبب. لا اهتزاز عشوائي ولا استعلام شبكة ولا اختصار مرتبط بالتاريخ: المدخلات الثلاث نفسها تنتج دائمًا الست العشري المقترح نفسه وأعلام التحقق نفسها.
أين يستحق مقترح لون النص الميسّر مكانه
تصل فرق المنتج إلى هذه الصفحة عندما يبدو رمادي العلامة أنيقًا على شريحة تسويق لكنه يسقط كنص متن على بطاقة بيضاء، أو عندما يُولَّد سمة الوضع الداكن من رموز فاتحة، أو عندما تطلب الأطراف القانونية ست عشري بديلًا لا رأي لقطة شاشة. يلصق المصممون سطحًا وحبرًا ابتدائيًا من Figma أو ملف رموز ويعيدون الست العشري المقترح إلى اللوحة بدل دفع شريط الإضاءة بالعين. يرفق اختصاصيو QA والإتاحة النسبة الأصلية والنسبة المقترحة والست العشري المقترح بالتذاكر حتى يصحح المطوّرون الزوج الدقيق.
تتحقق فرق المحتوى والتسويق من أن ألوان الحملات ما زالت تملك رفيق نص قانوني عند وضعها على خلفيات فاتحة أو داكنة للموقع. إذا احتجتم فقط إلى قياس زوج اخترتموه سلفًا فاستخدموا صفحة فاحص تباين؛ هذه الصفحة تملك نية اقتراح لون نص يجتاز.
حالات الاستخدام
إصلاح رموز متن تسقط في التحقق
أمام رمادي علامة يفوّت AA على بطاقة بيضاء، احصلوا على أقرب ست عشري أغمق يجتاز 4.5:1 دون تغيير الأصل.
حبر للوضع الداكن والوضع الفاتح
من لون نص ابتدائي واحد اشتقوا رفيقًا يجتاز على سطح فاتح ورفيقًا يجتاز على سطح داكن.
الأسئلة الشائعة
كيف يختار مقترح لون النص الميسّر ست عشري؟
يحافظ على الأصل والتشبع الابتدائيين، ويسير إضاءة HSL نحو الأسود ونحو الأبيض، ويعيد أقرب ست عشري مكمّم يفي تباينه WCAG 2.x بالهدف. التعادل يفضّل التغميق.
أي نسب هدف يمكنكم طلبها؟
أي عدد منتهٍ من 1 إلى 21 ضمنًا. الافتراضي 4.5 (AA للنص العادي). استخدموا 3 لـ AA للنص الكبير و7 لـ AAA للنص العادي.
ماذا إن لم يبلغ أي لون نص لهذا الأصل الهدف؟
يحدث ذلك على بعض خلفيات الرمادي المتوسط عندما تطلبون 7:1.
ما صيغ الألوان المقبولة؟
الست عشري فقط: #RGB أو #RRGGBB، مع علامة المربع الأولى أو دونها، دون تمييز حالة الأحرف.
ماذا لو لم تبلغ أي درجة من لوني الهدف؟
تحصل مع ذلك على الطرف الأفضل، الأسود أو الأبيض، مع إشارة واضحة إلى أنه لا يحقق الهدف. ويحدث هذا مثلًا عند طلب AAA بنسبة 7 إلى 1 على بطاقة رمادية متوسطة.
أدوات ذات صلة
للمطوّرين — الوصول عبر API
كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.
الـEndpoint
صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.
استدعِ الخدمة من بيئتك
curl -X POST https://api.kit.forhosting.com/color/suggest-accessible-text \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"background":"#ffffff","text":"#888888"}'const res = await fetch("https://api.kit.forhosting.com/color/suggest-accessible-text", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"background": "#ffffff",
"text": "#888888"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/suggest-accessible-text",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"background": "#ffffff",
"text": "#888888"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/suggest-accessible-text", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"background":"#ffffff","text":"#888888"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"background":"#ffffff","text":"#888888"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/suggest-accessible-text", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)مثال على الطلب
{
"background": "#ffffff",
"text": "#888888"
}مثال على الاستجابة
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.suggest_accessible_text",
"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 | تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة. |
ملاحظات تقنية
إذا لم تبلغ أي إضاءة لذلك الأصل الهدف — مثل AAA 7:1 على بطاقة رمادي متوسط — فإن المحرك يعيد مع ذلك الطرف الأفضل، الأسود أو الأبيض، ويضع meets_target على false حتى يستطيع خط التشغيل أن يفشل مغلقًا. تشترك الأداة المجانية في المتصفح وواجهة API في دالة تماثلية واحدة، فلا يختلف ورشة لوحة الألوان عن بوابة آلية. تُفوتر استدعاءات API الناجحة بسعر $0.002 لكل عنصر؛ ولا تُحسب المدخلات غير الصالحة.
ما ترسلونه وما تستقبلونه وكيف يعمل التحقق
أرسلوا ست عشري خلفية وست عشري نص ابتدائي. الأهداف الشائعة 3 لـ AA للنص الكبير، و4.5 لـ AA العادي، و7 لـ AAA العادي؛ ويُقبل أي عدد منتهٍ من 1 إلى 21 ضمنًا لأن ذلك نطاق WCAG من الألوان المتطابقة إلى الأسود على الأبيض. عند النجاح تعيد الاستجابة عينات مطبّعة من ست خانات للخلفية والنص والمقترح مع سلاسل rgb قابلة للطباعة. يبيّن adjusted إن تحرك الست العشري فعلًا؛ وdirection هي none أو darken أو lighten. توثّق سلسلة formula قصيرة القاعدة. القيمة الاختيارية target_ratio تساوي 4.5 افتراضيًا، وهي عتبة AA للنص العادي. تقبل الخلفية أيضًا الاسم البديل bg؛ ويقبل النص foreground وfg وcolor؛ وتقبل target_ratio الاسمين ratio وtarget. الحقول الناقصة والرموز غير الست عشرية وصيغ ألفا والأطوال الخاطئة وNaN وInfinity وهدف خارج الفترة المغلقة تفشل بـ invalid_input ولا تُفوتر. تُقرَّب original_ratio وsuggested_ratio إلى منزلتين عشريتين للعرض، بينما يقارن meets_target النسبة المقترحة غير المقرَّبة بالهدف حتى لا يخفي 4.50 المطبوع قيمة حقيقية 4.499. تجعل lightness_before وlightness_after خطوة HSL قابلة للتدقيق. يبلّغ كائن wcag عن normal_aa وnormal_aaa وlarge_aa وlarge_aaa للزوج المقترح حتى يرى المراجع المصفوفة كاملة لا الهدف الواحد المطلوب. اقرنوا النموذج المجاني في المتصفح بواجهة API المطابقة بسعر $0.002 لكل عنصر ناجح عندما يحتاج خط رموز التصميم إلى الست العشري نفسه في التكامل المستمر.
أين يستحق مقترح لون النص الميسّر مكانه
يوصل المهندسون العقد نفسه إلى فحوص طلب الدمج التي تعيد كتابة رمز أو ترفضه إذا هبط AA للنص العادي دون 4.5، ويقرأون meets_target حتى لا ينشر طلب AAA مستحيل على رمادي متوسط اللون الأسود في صمت كأنه نجح. يستطيع مؤلفو المناهج الذين يدرّسون WCAG أن يبيّنوا أن رفع L أو خفضه يختلف عن المزج نحو الأسود في RGB، ويريدون JSON نفسه في ودجة المتصفح وفي API. ولأن هذه القدرة محرك parse خالص، فإن تسعير API هو القاعدة المنشورة $0.002 لكل عنصر ناجح، والتحقق الفاشل لا يستهلك الرصيد.
حالات التكامل
بوابات CI تحتاج إلى ست عشري بديل
استدعوا API من طلبات الدمج لإعادة كتابة الرموز أو رفضها عندما يعجز الزوج المقترح بعد عن بلوغ هدف WCAG المطلوب.
أسئلة تقنية
كم يكلف مقترح لون النص الميسّر؟
أداة المتصفح مجانية وتعمل محليًا. تستخدم طلبات API رصيد KIT المدفوع مسبقًا بسعر $0.002 لكل عنصر ناجح؛ ولا تُحسب المدخلات غير الصالحة.