کنتراست و خوانایی: اصول WCAG

کنتراست کمک می‌کند متن و اجزای معنادار از زمینه جدا دیده شوند. این موضوع در خوانایی رابط اهمیت دارد، اما تنها عامل نیست. اندازه و وزن قلم، فاصله خطوط، طول متن، نور محیط و وضعیت بینایی کاربر هم اثر دارند. یک نسبت مناسب نمی‌تواند جمله مبهم یا قلم بسیار دشوار را خوانا کند. بهتر است کنتراست را به عنوان یک شرط قابل سنجش در کنار کیفیت تایپوگرافی و ساختار محتوا ببینیم، نه تضمین خوانایی برای همه افراد.

در WCAG، نسبت کنتراست از روشنایی نسبی رنگ‌ها محاسبه می‌شود و صرفاً اختلاف hue نیست. دو رنگ متفاوت ممکن است روشنایی نزدیک داشته باشند و تمایز کافی نسازند. نگاه کردن به palette برای قضاوت همه ترکیب‌ها کافی نیست؛ باید جفت رنگی را بسنجید که واقعاً کنار هم نمایش داده می‌شود. رنگ متن، زمینه، وضعیت کنترل و حالت‌های رابط را با هم تعریف کنید. یک رنگ به خودی خود «قابل دسترس» یا «غیرقابل دسترس» نیست؛ رابطه و کاربرد آن مهم است.

حداقل کنتراست متن در سطح AA

معیار 1.4.3 در سطح AA برای متن معمولی حداقل 4.5:1 و برای متن بزرگ حداقل 3:1 را تعیین می‌کند. متن بزرگ در این تعریف دست‌کم 18pt، یا دست‌کم 14pt با وزن bold است؛ «بیشتر از هجده پیکسل» تعریف درست آن نیست. در CSS، 18pt برابر 24px و 14pt حدود 18.67px است. اندازه و ویژگی قلم باید در نمایش واقعی محاسبه شوند. این جزئیات در توضیح رسمی Contrast Minimum آمده‌اند.

مقدارها آستانه‌اند، نه عددی که می‌توان با گرد کردن به آن رسید. نسبت 4.499:1 شرط 4.5:1 را برآورده نمی‌کند، حتی اگر نمایش کوتاه ابزار آن را 4.50 بنویسد. برای طراحی بهتر است کمی حاشیه داشته باشید و دقیقاً روی مرز قرار نگیرید. اندازه بزرگ‌تر نیز به معنی بی‌نیازی از بررسی نیست. قلم‌های ظریف یا غیرمعمول می‌توانند با وجود اندازه اسمی بزرگ، تشخیص دشواری داشته باشند. معیار حداقل را با تصمیم درباره کیفیت خواندن اشتباه نگیرید.

سطح AAA و محدوده آن

معیار 1.4.6 در سطح AAA برای متن معمولی حداقل 7:1 و برای متن بزرگ حداقل 4.5:1 را می‌خواهد. توضیح آن در مرجع Contrast Enhanced قابل پیگیری است. عبارت «AAA یعنی بهترین» دقیق نیست؛ سطح بالاتر الزام‌های بیشتری دارد، اما کیفیت کلی محصول را به تنهایی تعریف نمی‌کند. همچنین عبور یک متن از آستانه AAA به معنی انطباق تمام صفحه با AAA نیست. دامنه ادعا را به چیزی که واقعاً بررسی شده محدود کنید.

در یک سیستم طراحی می‌توانید برای متن طولانی هدف بالاتری انتخاب کنید و برای بخش‌های دیگر حداقل متناسب را نگه دارید. این تصمیم را مستند کنید تا تیم بداند تفاوت عمدی است یا خطا. افزایش کنتراست باید با سایر نیازهای خواندن همراه باشد. اگر متن اصلی بسیار ریز است، فقط تیره‌تر کردن آن پاسخ کامل نیست. اگر سلسله‌مراتب تنها با کم‌رنگ کردن توضیح‌های مهم ساخته شده، وزن، فاصله یا اندازه را هم برای ایجاد اولویت بررسی کنید.

کنتراست غیرمتنی

معیار 1.4.11 در سطح AA برای اطلاعات بصری لازم جهت تشخیص کنترل‌ها و وضعیتشان، و بخش‌های معنادار گرافیک، نسبت حداقل 3:1 با رنگ‌های مجاور دارد. این حکم به معنی الزام کنتراست همه خط‌های تزئینی نیست. محدوده و استثناها را در مرجع Non-text Contrast بخوانید. درباره یک ورودی، باید معلوم باشد چه اطلاعاتی حضور یا حالت آن را نشان می‌دهد؛ متن برچسب و مرز کنترل نیز کاربردهای متفاوت دارند.

برای نمونه، یک جداکننده تزئینی ممکن است برای فهم صفحه ضروری نباشد، ولی علامت انتخاب‌شدن یک گزینه اطلاعات واقعی دارد. اگر مرز یک کنترل تنها راه تشخیص آن است، کم‌رنگ بودن آن مسئله ایجاد می‌کند. از طرف دیگر، هر دکمه الزاماً به خط دور مستقل نیاز ندارد اگر اطلاعات لازم با ترکیب دیگری روشن است. اجزا را در بافت مصرف بررسی کنید. نسبت یک border روی زمینه سفید، نتیجه همان border روی یک بخش رنگی را نشان نمی‌دهد.

حالت‌های رابط را فراموش نکنید

Palette معمولاً رنگ پایه را نشان می‌دهد، اما رابط hover، focus، selected، error و disabled هم دارد. رنگ متن در هر حالت باید با زمینه همان حالت سنجیده شود. اگر در hover زمینه تیره‌تر می‌شود ولی متن ثابت می‌ماند، نسبت تغییر می‌کند. نشان focus نیز باید قابل تشخیص باشد و در ترکیب با مرز یا سایه گم نشود. وضعیت‌های مختلف را کنار هم مستند کنید تا بررسی فقط به تصویری از حالت عادی محدود نشود.

کنترل غیرفعال در بعضی معیارهای کنتراست استثنا دارد، اما استثنا دعوت به نامرئی کردن آن نیست. کاربر ممکن است لازم باشد وجود کنترل و دلیل غیرفعال بودن را بفهمد. متن توضیحی ضروری را فقط به رنگ بسیار کم‌رنگ وابسته نکنید. اگر پیام خطا آمده، آن را با متن و ارتباط روشن به فیلد معرفی کنید. درباره نقش این بازخوردها، راهنمای Microinteraction به رفتار کنترل نزدیک‌تر است.

زمینه ثابت، تصویر و شفافیت

محاسبه دو رنگ solid ساده‌تر از متن روی عکس است. اگر پشت متن بخش‌های روشن و تیره وجود دارد، یک میانگین رنگ تصویر کفایت نمی‌کند. ناحیه‌ای را بسنجید که واقعاً پشت حروف قرار می‌گیرد و تغییر crop در اندازه‌های مختلف را در نظر بگیرید. یک لایه زمینه مشخص می‌تواند رابطه را قابل کنترل کند. سایه ظریف دور حروف ممکن است در بعضی بخش‌ها کافی نباشد و نباید بدون بررسی به آن تکیه کرد.

Opacity نیز رنگ نهایی را تغییر می‌دهد. مقدار رنگ متن پیش از ترکیب با زمینه، الزاماً همان چیزی نیست که کاربر می‌بیند. در gradient یا لایه‌های نیمه‌شفاف، ابتدا رنگ حاصل را به دست آورید و سپس نسبت را محاسبه کنید. تغییر theme می‌تواند این نتیجه را عوض کند. Dark Mode را مجموعه‌ای از جفت رنگ‌های تازه ببینید، نه معکوس کردن بی‌قاعده palette. هر token باید نقش و زمینه‌های مجاز مشخصی داشته باشد.

نمونه محاسبه برای رنگ‌های solid

فایل زیر یک ابزار آموزشی مستقل برای دو رنگ شش‌رقمی sRGB و بدون شفافیت است. آن را با نام contrast.html ذخیره و در مرورگر باز کنید؛ وابستگی، نصب یا فایل دیگری لازم ندارد. ابزار نسبت را نمایش می‌دهد و حداقل AA متن معمولی را بررسی می‌کند. متن نتیجه با مقدار گردنشده تصمیم می‌گیرد. این نمونه نه کنتراست تصاویر را تحلیل می‌کند و نه کل WCAG صفحه را ارزیابی می‌کند؛ محدودیت ابزار در خود صفحه نیز نوشته شده است.

<!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>body{max-width:42rem;margin:2rem auto;padding:1rem;font:1rem/1.9 system-ui;color:#17324d;background:#fff}label{display:block;margin-top:1rem}input,button{font:inherit;padding:.5rem}input{direction:ltr;width:10rem;border:2px solid #46657d}button{margin-top:1rem}input:focus-visible,button:focus-visible{outline:3px solid #084c8d;outline-offset:3px}#preview{padding:1rem;margin-top:1rem;border:2px solid #46657d}</style></head>
<body><h1>کنتراست دو رنگ solid</h1><p>فقط رنگ شش‌رقمی sRGB، بدون شفافیت. نتیجه، انطباق کل صفحه با WCAG را مشخص نمی‌کند.</p>
<form id="form" novalidate>
<label for="foreground">رنگ متن</label><input id="foreground" value="#17324d" spellcheck="false" autocomplete="off" aria-describedby="format">
<label for="background">رنگ زمینه</label><input id="background" value="#ffffff" spellcheck="false" autocomplete="off" aria-describedby="format">
<p id="format">قالب مجاز: علامت # و شش رقم hexadecimal، مانند #17324d.</p>
<button type="submit">محاسبه نسبت</button></form>
<p id="result" role="status"></p><div id="preview">این کادر پیش‌نمایش رنگ‌های واردشده است.</div>
<script>
const form=document.querySelector('#form');
const foreground=document.querySelector('#foreground');
const background=document.querySelector('#background');
const result=document.querySelector('#result');
const preview=document.querySelector('#preview');
function luminance(hex){
 const channels=[1,3,5].map(start=>parseInt(hex.slice(start,start+2),16)/255);
 const linear=channels.map(value=>value<=0.04045?value/12.92:((value+0.055)/1.055)**2.4);
 return linear[0]*0.2126+linear[1]*0.7152+linear[2]*0.0722;
}
function calculate(){
 const values=[foreground.value.trim(),background.value.trim()];
 const valid=values.map(value=>/^#[0-9a-f]{6}$/i.test(value));
 foreground.setAttribute('aria-invalid',String(!valid[0]));
 background.setAttribute('aria-invalid',String(!valid[1]));
 if(valid.includes(false)){result.textContent='هر دو رنگ را با قالب # و شش رقم معتبر وارد کنید.';return;}
 const a=luminance(values[0]);const b=luminance(values[1]);
 const ratio=(Math.max(a,b)+0.05)/(Math.min(a,b)+0.05);
 result.textContent=`نسبت نمایش‌داده‌شده: ${ratio.toFixed(3)} به ۱. حداقل AA متن معمولی ${ratio>=4.5?'برآورده می‌شود.':'برآورده نمی‌شود.'} تصمیم با مقدار گردنشده گرفته شده است.`;
 preview.style.color=values[0];preview.style.backgroundColor=values[1];
}
form.addEventListener('submit',event=>{event.preventDefault();calculate();});
calculate();
</script></body></html>

نمایش نمونه برای درک رابطه رنگ‌هاست و اندازه متن آن معیار عمومی بزرگ بودن محسوب نمی‌شود. اگر رنگ‌های واردشده کم‌کنتراست باشند، فقط کادر پیش‌نمایش به آن‌ها تغییر می‌کند و متن نتیجه با رنگ ثابت خوانا می‌ماند. ورودی نامعتبر نیز پیام روشن دارد. در یک ابزار حرفه‌ای، حمایت از رنگ‌های دیگر، شفافیت و زمینه‌های پیچیده به منطق بیشتر نیاز دارد. تبدیل یک محاسبه محدود به ادعای «صفحه قابل دسترس است» نتیجه‌ای فراتر از توان آن می‌سازد.

رنگ تنها راه انتقال معنا نباشد

یک رنگ قرمز ممکن است با زمینه کنتراست کافی داشته باشد، اما اگر تنها علامت خطاست، کاربر همچنان ممکن است معنی را از دست بدهد. متن، آیکون معنادار یا ساختار می‌توانند رابطه را روشن کنند. در نمودار نیز خط‌ها را فقط با چند رنگ نزدیک از هم جدا نکنید؛ برچسب مستقیم یا الگوی خط می‌تواند کمک کند. کنتراست و عدم وابستگی به رنگ دو مسئله مرتبط ولی متفاوت هستند. حل یکی، بررسی دیگری را غیرضروری نمی‌کند.

لینک داخل متن باید به شکلی قابل تشخیص باشد. انتخاب رنگ برند برای لینک کافی نیست اگر آن رنگ با متن اطراف تفاوت قابل فهم ندارد. زیرخط یا نشانه بصری مناسب می‌تواند رابطه را تقویت کند. راهنمای آیکونوگرافی نیز بر معنی کنترل و برچسب تأکید دارد. یک آیکون با نسبت مناسب هنوز ممکن است برای مخاطب نامفهوم باشد؛ شکل، نام و بافت مصرف باید با یکدیگر کار کنند.

کنتراست در سیستم طراحی

رنگ‌ها را بر اساس نقش نام‌گذاری کنید: متن اصلی، متن ثانویه، سطح، مرز ضروری و وضعیت. فهرست جفت‌های مجاز را ثبت کنید تا استفاده از یک token روی زمینه نامناسب اتفاق نیفتد. تغییر رنگ برند باید با بازبینی این رابطه‌ها همراه باشد. در راهنمای رنگ و هارمونی رابطه هماهنگی و کاربرد توضیح داده شده است. palette زیبا وقتی به رابط می‌رسد به قواعد مصرف نیاز دارد؛ همه ترکیب‌های درون آن الزاماً مناسب متن نیستند.

بازبینی را با نمونه واقعی متن و کنترل انجام دهید. فونت، اندازه، وضعیت و زمینه را همراه مقدار نسبت ثبت کنید تا نتیجه قابل تکرار باشد. ابزار محاسبه کمک می‌کند خطاهای رنگی مشخص شوند، ولی خواندن واقعی و ساختار صفحه همچنان نیازمند بررسی هستند. کنتراست مناسب بخشی از مسیر دسترس‌پذیری است. هدف این است که اطلاعات با هزینه کمتر قابل تشخیص و دنبال کردن باشد، و ادعای کیفیت به همان محدوده‌ای محدود بماند که واقعاً طراحی و ارزیابی شده است.