Color Contrast نسبت روشنایی دو رنگی است که کنار هم دیده می‌شوند؛ برای متن معمولاً رنگ نوشته و پس‌زمینه پشت آن بررسی می‌شود. انتخاب رنگ جذاب در پالت، خوانایی همان رنگ در اندازه کوچک را تضمین نمی‌کند. یک خاکستری ممکن است برای سطح تزئینی مناسب باشد و برای توضیح فرم روی سفید ضعیف عمل کند. تصمیم رنگ باید با نقش عنصر، اندازه نوشته و حالت رابط همراه باشد، نه فقط با نمونه‌های رنگی کنار هم در فایل طراحی.
عدد Contrast به ارزیابی یک رابطه مشخص کمک می‌کند. این عدد درباره همه جنبه‌های خواندن، کیفیت فونت یا قابل فهم بودن متن حکم نمی‌دهد. متنی با نسبت مناسب هم ممکن است بیش از حد ریز، متراکم یا مبهم باشد. بهتر است بررسی رنگ را کنار تایپوگرافی و ساختار محتوا انجام دهید. هدف، پیدا کردن ترکیب‌هایی است که اطلاعات لازم را در شرایط واقعی صفحه منتقل کنند و هنگام تغییر حالت یا زمینه ناگهان خوانایی خود را از دست ندهند.
حدود WCAG را با نقش درست بخوانید
در معیار Contrast Minimum در WCAG، سطح AA برای متن عادی حداقل 4.5:1 و برای متن بزرگ حداقل 3:1 می‌خواهد. متن بزرگ در این معیار تعریف مشخص دارد: دست‌کم 18 پوینت، یا 14 پوینت با وزن Bold، با معادل مناسب برای زبان و فونت مورد استفاده. نام‌گذاری یک Token به صورت «large» در سیستم طراحی، به تنهایی آن را مشمول حد متن بزرگ نمی‌کند.
سطح AAA برای متن عادی 7:1 و برای متن بزرگ 4.5:1 است. استثناهایی مانند متن تزئینی، بعضی اجزای غیرفعال و لوگوتایپ در معیار وجود دارند و نباید به همه متن‌های کم‌رنگ تعمیم داده شوند. به طور خاص، Placeholder یک فرم فعال را صرفاً چون موقت است تزئینی فرض نکنید. سطح انطباق مورد نیاز پروژه باید مشخص باشد؛ عبارت «AA برای همه سایت‌ها قانوناً الزامی است» بدون تعیین مقررات و حوزه کاربرد ادعای دقیقی نیست.
متن و کنترل را جدا بررسی کنید
دکمه ممکن است دو رابطه رنگی داشته باشد: نوشته روی سطح دکمه و بخش لازم برای تشخیص خود کنترل در زمینه صفحه. آیکون مهم، مرز فیلد و نشانه حالت نیز نیازمند بررسی متناسب هستند. معیار Non-text Contrast برای اطلاعات بصری لازم جهت تشخیص اجزای رابط و اشیای گرافیکی به نسبت 3:1 در برابر رنگ مجاور می‌پردازد. همه خطوط تزئینی صفحه الزام یکسانی ندارند؛ نقش خط باید معلوم باشد.
برای مثال فرضی، فیلدی که فقط با خط بسیار کم‌رنگ از پس‌زمینه جدا می‌شود ممکن است محل ورود را مبهم کند. افزایش Contrast نوشته Label این مشکل مرز را به تنهایی حل نمی‌کند. برعکس، مرز واضح با متن راهنمای ناخوانا هنوز تجربه ناقص دارد. هر جزء را به عناصر حامل اطلاعات تقسیم کنید. این روش کمک می‌کند به جای تیره کردن همه صفحه، همان روابطی اصلاح شوند که در تشخیص و انجام کار نقش دارند.
رنگ تنها نشانه معنی نباشد
سبز و قرمز برای موفقیت و خطا انتخاب رایجی هستند، اما کاربر باید بدون تشخیص آن دو رنگ هم وضعیت را بفهمد. متن روشن «پرداخت ناموفق بود» و راه اقدام، معنی را منتقل می‌کنند. در جدول، وضعیت سفارش را فقط با نقطه رنگی نمایش ندهید؛ نام وضعیت کنار آن بیاید. معیار Use of Color این محدودیت را توضیح می‌دهد. اضافه کردن نام یا شکل معنادار بهتر از اتکا به حافظه کاربر درباره معنی رنگ‌ها است.
لینک داخل پاراگراف نیز باید از متن پیرامون قابل تشخیص باشد. زیرخط در بسیاری از موقعیت‌ها نشانه آشنایی است، به‌ویژه وقتی تفاوت رنگ کافی نیست. نمودار با چند سری نزدیک به هم می‌تواند برچسب مستقیم یا الگوی خط متفاوت داشته باشد. اطلاعات اصلی نمودار را در متن هم توضیح دهید. تغییر رنگ روی Hover نباید تنها راه فهم کلیک‌پذیر بودن عنصر باشد، چون کاربر صفحه‌کلید یا صفحه لمسی ممکن است آن حالت را تجربه نکند.
پس‌زمینه واقعی را اندازه بگیرید
رنگ ثابت روی سطح ثابت ساده‌ترین حالت اندازه‌گیری است. متن روی تصویر، Gradient یا لایه نیمه‌شفاف یک پس‌زمینه یکنواخت ندارد. قسمت روشن‌تر تصویر ممکن است نوشته را کم‌رنگ کند، حتی اگر روی قسمت دیگری مناسب به نظر برسد. اضافه کردن Overlay باید با ترکیب نهایی بررسی شود؛ انتخاب یک مقدار Opacity بدون دیدن نتیجه برای همه تصاویر کافی نیست. برای محتوایی که مرتب تغییر می‌کند، سطح ثابت پشت متن راه قابل پیش‌بینی‌تری فراهم می‌کند.
در پروژه چندزبانه، طول متن و محل شکست سطر هم تغییر می‌کند. تیتر فارسی ممکن است روی بخش دیگری از تصویر قرار گیرد و رابطه رنگ تازه‌ای بسازد. Zoom و تغییر اندازه صفحه نیز همین مسئله را ایجاد می‌کنند. بررسی یک Screenshot بزرگ، وضعیت همه دستگاه‌ها را توضیح نمی‌دهد. اگر طراحی به هم‌زمانی دقیق نوشته و عکس وابسته است، آن وابستگی را کاهش دهید؛ خوانایی اطلاعات ضروری نباید با بارگذاری تصویر یا برش متفاوت آن از بین برود.
رنگ‌های معنایی و حالت‌ها را تعریف کنید
به جای استفاده پراکنده از کد رنگ، Tokenهایی مانند text-primary، text-muted، surface و border-control را تعریف کنید و ترکیب‌های مجاز را مستند نگه دارید. نام muted نباید مجوز ناخوانا کردن توضیح ضروری باشد. نقش متن را تعیین کنید: توضیح هزینه و محدودیت خدمت برای تصمیم کاربر مهم است، حتی اگر در سلسله‌مراتب بصری درجه دوم باشد. مقاله Atomic Design برای حفظ رابطه جزء و صفحه به این بحث کمک می‌کند.
حالت‌های Default، Hover، Focus، Error و Selected باید رابطه رنگ خود را داشته باشند. ممکن است متن دکمه در حالت عادی خوانا باشد و روی Hover با تغییر سطح Contrast را از دست بدهد. Focus واضح برای حرکت صفحه‌کلید لازم است و نباید هنگام حذف Outline پیش‌فرض ناپدید شود. وضعیت Disabled را هم از Loading جدا کنید؛ اولی در دسترس نیست و دومی ممکن است فقط موقتاً در حال انجام کار باشد. ظاهر یکسان این دو حالت، معنی تعامل را مبهم می‌کند.
نمونه کامل برای بررسی رابطه رنگ
نمونه زیر یک کارت وضعیت با عنوان، توضیح، لینک و دکمه دارد. آن را در فایل contrast-demo.html ذخیره و مستقیم در مرورگر باز کنید؛ وابستگی خارجی ندارد. نمونه برای مشاهده ساختار و حالت Focus است و گزارش انطباق کامل یک محصول محسوب نمی‌شود. با تغییر متغیرهای رنگ می‌توانید رابطه نوشته و سطح را در ابزار Contrast Checker بررسی کنید. هیچ مقدار نسبت اندازه‌گیری‌نشده‌ای برای رنگ‌های نمونه اعلام نشده است.
<!doctype html>
<html lang="fa" dir="rtl">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>نمونه رابطه رنگ</title>
<style>
:root{--ink:#111;--surface:#fff;--accent:#111}
body{font-family:Tahoma,sans-serif;background:#eee;color:var(--ink);margin:0;padding:2rem;line-height:1.8}
.card{max-width:32rem;margin:auto;background:var(--surface);border:2px solid #111;border-radius:1rem;padding:1.5rem}
a{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
button{font:inherit;background:var(--accent);color:#fff;border:2px solid var(--accent);padding:.5rem 1rem;cursor:pointer}
a:focus-visible,button:focus-visible{outline:3px solid #111;outline-offset:4px}
.status{font-weight:bold}
</style></head>
<body><main class="card"><h1>درخواست شما</h1><p class="status">وضعیت: آماده بررسی</p><p>پیش از ارسال، اطلاعات درخواست را مرور کنید.</p><p><a href="#details">مشاهده جزئیات</a></p><details id="details"><summary>جزئیات درخواست</summary><p>این داده آموزشی است و به سرور ارسال نمی‌شود.</p></details><p><button type="button" onclick="document.getElementById('result').textContent='بررسی نمونه انجام شد؛ داده‌ای ارسال نشد.'">بررسی نمونه</button></p><p id="result" role="status"></p></main></body></html>
در این فایل، رنگ نوشته اصلی از متغیر ink و سطح کارت از surface می‌آید. لینک علاوه بر رنگ، زیرخط دارد. دکمه با متن روشن از سطح تیره استفاده می‌کند و هنگام Focus یک Outline مشخص می‌گیرد. پیام وضعیت هم واژه «آماده بررسی» دارد؛ معنی آن به رنگ وابسته نیست. برای آزمایش طراحی تازه، ابتدا همین متغیرها را تغییر دهید و نام کلاس‌های HTML را حفظ کنید. تغییر Selector بدون تغییر عنصر متناظر، نمونه متفاوتی می‌سازد که توضیح حاضر دیگر درباره آن صدق نمی‌کند.
ابزار را با محدودیتش استفاده کنید
ابزارهای مرورگر و Contrast Checker می‌توانند نسبت رنگ‌های انتخاب‌شده را محاسبه کنند. نتیجه را همراه نام جزء، حالت و رنگ زمینه ثبت کنید تا تیم بداند کدام ترکیب تأیید شده است. برخی ابزارها در متن روی تصویر یا شفافیت پیچیده اطلاعات کامل ندارند و نیازمند بررسی دستی هستند. افزونه طراحی هم جای مرور خروجی پیاده‌سازی را نمی‌گیرد؛ فونت، رنگ نهایی و لایه‌ها ممکن است با فایل طراحی متفاوت باشند. از یک علامت سبز برای ادعای دسترسی‌پذیری کامل صفحه استفاده نکنید.
شبیه‌سازی اختلال دید رنگ برای پیدا کردن وابستگی به رنگ کمک می‌کند، اما تجربه همه افراد را بازسازی نمی‌کند. خاموش کردن رنگ یا دیدن صفحه خاکستری هم به تنهایی آزمون همه معیارها نیست. بهتر است نتیجه ابزار را با پرسش‌های مشخص ترکیب کنید: آیا متن خوانده می‌شود، وضعیت بدون رنگ قابل تشخیص است و Focus دیده می‌شود؟ مقاله دسترسی‌پذیری وب دامنه گسترده‌تری از موانع را بررسی می‌کند که عدد Contrast فقط بخشی از آن است.
اصلاح رنگ را در سطح سیستم نگه دارید
اگر رنگ مشترک چند جزء مشکل دارد، اصلاح Token می‌تواند از وصله‌های پراکنده جلوگیری کند؛ اما همه کاربردهای آن Token را دوباره مرور کنید. رنگ تیره‌تر ممکن است روی سطح سفید مناسب‌تر شود و روی زمینه تیره مشکل تازه بسازد. برای Dark Mode پالت را صرفاً وارونه نکنید. نقش سطح، مرز و نوشته را در هر تم مشخص کنید. تغییر رنگ برند نیز نباید به حذف نشانه‌های خطا یا تفاوت وضعیت‌ها منجر شود؛ معنا و هویت باید با هم کار کنند.
در تحویل، جدول کوتاهی از ترکیب‌های مجاز، سطح هدف و حالت‌های بررسی‌شده نگه دارید. اگر استثنایی وجود دارد، دلیل آن روشن باشد. سپس مسئول بازبینی تغییرات آینده را تعیین کنید تا انتخاب رنگ جدید بدون توجه به روابط قبلی وارد محصول نشود. مقاله انتخاب پالت رنگ درباره تمایز روند و تصمیم کاربردی توضیح دارد. شروع عملی، انتخاب یک فرم یا کارت واقعی و بررسی همه نوشته‌ها و کنترل‌های ضروری همان جزء است؛ بعد دامنه را به صفحات دیگر گسترش دهید.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر می‌دهد!