کنتراست رنگ دسترسپذیر: WCAG بدون خاکستری کسالتبار
چطور برای WCAG 2.2 طراحی کنیم بدون اینکه برند را به خاکستری تبدیل کنیم. نسبتها، APCA، مثالهای واقعی از سیستمهای طراحی، و یک گردش کار آزمایش توکنمحور.
دسترسپذیری و شخصیت طراحی در تضاد نیستند. این همان افسانهای است که اغلب تیمهای برند وقتی از مواجهه با بحث کنتراست فرار میکنند به خود میگویند، و همین دلیل است که بسیاری از ریبرندهای «دسترسپذیر» در نهایت مثل تابلوهای فرودگاه به نظر میرسند.
کنتراست رنگ دسترسپذیر یک مسئله اندازهگیری است. سیستمهای طراحی مدرن این مشکل را در لایه توکن حل کردهاند، یعنی دیگر مجبور نیستید بین رسیدن به WCAG و جذاب نگه داشتن برند یکی را انتخاب کنید. فقط باید قوانین را بدانید، بدانید کجا این قوانین اشتباه هستند، و بدانید کار واقعی کجا اتفاق میافتد.
چرا کنتراست تنها قانونی است که نمیتوانید نادیده بگیرید
حدود ۳۰۰ میلیون نفر رنگ را متفاوت از پالت پایه شما میبینند، و افراد بیشتری در نور کم، روی صفحههای ضعیف، یا با کاهش بینایی جزئی که هیچکس برایش تیکت نزده از رابطهای کاربری استفاده میکنند.
کنتراست پایین رایجترین نقص دسترسپذیری در وب است. و درعینحال سادهترین چیزی است که میتوان آن را درست کرد. نقاط کور، کمبودهای رنگی، تابش نور، چشمهای پیر، مانیتورهای ارزان، نور مستقیم آفتاب روی صفحه موبایل. همه اینها به یک راهحل ختم میشوند: کنتراست کافی بین متن و پسزمینه، به اندازهای که پیام در سختترین شرایط هم دیده شود، نه فقط روی نمایشگر Retina طراح.
هزینه اشتباه در این زمینه فقط طرد کردن نیست. معرضیت در برابر انطباق قانونی هم هست. قانون دسترسپذیری اروپا، بخش ۵۰۸ در ایالات متحده، AODA در انتاریو، و فهرست روبهرشد قوانین ملی همه از WCAG به عنوان مرجع قانونی استفاده میکنند. کنتراست یکی از اولین چیزهایی است که یک ممیزی بررسی میکند، چون یکی از اولین چیزهایی است که خراب منتشر میشود.
قوانین کنتراست WCAG 2.2 به زبان ساده
WCAG سه عدد به شما میدهد: ۴.۵:۱، ۳:۱، و ۳:۱، و هر کدام برای نوع خاصی از عنصر رابط کاربری کاربرد دارند.
| عنصر | حداقل AA | حداقل AAA | یادداشتها |
|---|---|---|---|
| متن بدنه | ۴.۵:۱ | ۷:۱ | هر متنی کوچکتر از ۱۸pt معمولی یا ۱۴pt بولد |
| متن بزرگ | ۳:۱ | ۴.۵:۱ | ۱۸pt+ معمولی یا ۱۴pt+ بولد |
| اجزای رابط کاربری و گرافیکها | ۳:۱ | مشخص نشده | دکمهها، آیکونها، حاشیه فرم، حلقههای فوکوس |
| متن در لوگو یا تصاویر تزئینی | معاف | معاف | عناصر برند و متن تصادفی محاسبه نمیشوند |
AA سطحی است که اغلب محصولات تجاری هدف آن هستند و اغلب قوانین دسترسپذیری آن را الزامی میکنند. AAA هدف سختگیرانهتری است که بیشتر در کارهای دولتی، بهداشتی و آموزشی استفاده میشود. مگر اینکه کسی مستند انطباقی به شما بدهد که AAA را بخواهد، AA کف است.
دامی که اغلب طراحان در آن میافتند فراموش کردن قانون ۳:۱ برای غیر متن است. حاشیه یک فرم با نسبت ۲:۱ در برابر پسزمینه صفحه ناموفق است، حتی اگر برچسب داخل آن قبول شود.
یک حلقه فوکوس با کنتراست ناکافی ناموفق است. یک آیکون که معنایش به رنگ با نسبت ۲.۵:۱ وابسته است ناموفق است. کنتراست غیر متن اختیاری نیست.
چرا ریاضی WCAG اغلب اشتباه است
نسبتهای کنتراست WCAG یک فرمول ۳۰ ساله است که بینش ادراکی را نادیده میگیرد، به همین دلیل گاهی رنگهایی را قبول میکند که افتضاح به نظر میرسند و رنگهایی را رد میکند که خوب به نظر میرسند.
فرمول WCAG 2 فقط بر اساس لومینانس است. متن روی پسزمینه را به عنوان یک رابطه خطی بین روشنایی نسبی دو رنگ در نظر میگیرد. این طریقه واقعی کار سیستم بینایی انسان برای خواندن کنتراست نیست.
کنتراست ادراکی واقعی به وزن فونت، اندازه فونت، دمای رنگ، و اینکه چشم یک ثانیه قبل به چه چیزی نگاه کرده بستگی دارد. WCAG 2 هیچکدام از اینها را مدیریت نمیکند. نتیجه نسبتی است که متن خاکستری روشن روی سفید را مثل متن مشکی روی خاکستری روشن تلقی میکند، حتی اگر یکی خوانا باشد و دیگری دردناک.
چطور APCA مشکل ادراکی را حل میکند
APCA، یعنی الگوریتم کنتراست ادراکی دسترسپذیر، کنتراست را به روشی اندازه میگیرد که بینایی انسان واقعاً کار میکند، به همین دلیل پیشنویس WCAG 3 آن را به عنوان جایگزین پیشنهاد میدهد.
امتیازهای APCA از ۰ (بدون کنتراست) تا حدود ۱۰۸ (کنتراست شدید) است. برخلاف WCAG 2، وزن متن، اندازه متن و قطبیت را در نظر میگیرد (روشن روی تاریک در مقابل تاریک روی روشن برای چشم متفاوت رفتار میکنند).
آستانههای تقریبی APCA برای متن معمول:
- متن بدنه (۱۶px معمولی): ۷۵+ (الزامی)، ۹۰+ (ایدهآل)
- بدنه کوچک (۱۴px معمولی): ۹۰+ (الزامی)
- متن بزرگ (۲۴px+): ۶۰+ (الزامی)
- رابط کاربری غیر متنی: ۴۵+ حداقل
APCA هنوز در هیچجا الزام قانونی ندارد. اما محصولات در حال انتشار قبلاً از آن به عنوان یک استاندارد داخلی استفاده میکنند، چون بهتر با آنچه واقعاً خوب خوانده میشود همبستگی دارد. حرکت هوشمندانه این است که برای انطباق به WCAG 2 AA برسید و برای کیفیت واقعی به APCA برسید. رسیدن به هر دو هدف به طور همزمان اگر توکنهای رنگی شما برای آن طراحی شده باشند سخت نیست.
چهار سیستم طراحی که کنتراست را توکنسازی کردهاند
این سیستمها قبلاً دسترسپذیری را در لایه توکن رمزگذاری کردهاند، پس طراحان یک نقش انتخاب میکنند نه اینکه نسبتی محاسبه کنند.
Radix Colors
Radix Colors مقیاسهای ۱۲ مرحلهای را با هر مرحله از پیش تعیین شده به یک نقش ارائه میدهد. مراحل ۱۱ و ۱۲ مراحل متن با کنتراست بالا هستند که تضمین میکنند در برابر مراحل پایینتر از WCAG AA بگذرند. توکنهای نقش (text، textContrast، solid، solidHover) به این معنا هستند که طراحان هرگز نسبتی محاسبه نمیکنند. آنها یک نقش انتخاب میکنند.
چه چیزی بدزدید: مدل کنتراست-بر-اساس-نقش شمارهگذاری شده. هر طراحی که به مرحله ۱۱ میرسد میداند که در برابر مراحل روشنتر همان مقیاس میگذرد. نسبت در خود شماره مرحله رمزگذاری شده است.
Material Design 3
Material 3 هر نقش رنگ را با یک همتای on- (on-primary، on-surface، on-error) جفت میکند که تضمین میکند ۴.۵:۱ را در برابر والدش برآورده کند. توکنهای جفت شده لایه دسترسپذیری هستند که مستقیماً در سیستم ساخته شدهاند.
چه چیزی بدزدید: الگوی on-. وقتی یک طراح برای متن به on-primary میرسد، دسترسپذیری خودکار است. هیچ تصمیمی برای اشتباه کردن وجود ندارد.
دو مورد دیگر: نسبتها و سیستمهای ادراکی
Radix و Material کنتراست را از طریق جفتسازی نقش حل میکنند. دو تای بعدی آن را از طریق نسبتهای مستند شده و مقیاسهای یکنواخت ادراکی حل میکنند. هر دو روش کار میکنند. هر دو ارزش الگوگیری دارند.
GitHub Primer
Primer توکنهای پیشزمینه، پسزمینه و حاشیه را به سطوح صریح با نسبتهای کنتراست مستند شده جدا میکند. fg.default و bg.default آنها با نسبتهای دقیق منتشر شدهاند و هر توکن معنایی مبتنی بر نقش همان رفتار را دارد.
چه چیزی بدزدید: انتشار نسبتها در کنار توکنها. وقتی کنتراست هر توکن در برابر هر پسزمینه مرتبط مستند شده باشد، طراحان و توسعهدهندگان میتوانند از بررسی دستی صرف نظر کنند.
Adobe Spectrum
Spectrum از مقیاسهای رنگ یکنواخت ادراکی استفاده میکند تا دو توکن با شماره مرحله یکسان وزن بصری یکسانی در هیوهای مختلف داشته باشند. این به این معنا است که تعویض هیوها درون یک تم روابط کنتراست را حفظ میکند. دیگر "در آبی قبول شد اما در نارنجی ناموفق بود" نخواهید داشت.
چه چیزی بدزدید: یکنواختی ادراکی. مقیاسهایی که بر اساس مدلهای ادراکی ساخته شدهاند (مثل HSLuv، OKLCH، یا رویکرد سفارشی Spectrum) دسترسپذیری را در تمهای برند قابل انتقال میکنند.
چطور بدون از دست دادن شخصیت دسترسپذیر بمانید
دسترسپذیری یعنی متن مشکی روی سفید و یک برند کمرنگ نیست، و تیمهایی که فراگیرترین محصولات را منتشر میکنند همانهایی هستند که این را فهمیدهاند.
ترفند این است که دسترسپذیری کجا در پشته قرار میگیرد. اگر در لایه توکن باشد، برند میتواند پرجنبوجوش باشد و طراحان هنوز خروجیهای دسترسپذیر بگیرند. اگر به عنوان یک بررسی نهایی باشد، هر رنگ برند یک بدهی است که منتظر است در یک ممیزی ناموفق شود.
سه تکنیک شخصیت و دسترسپذیری را در یک اتاق نگه میدارند:
- سطح accent را به یک رنگ برند و یک رنگ عمل دسترسپذیر تقسیم کنید. Linear از یک بنفش خاص برای لحظات برند و یک بنفش کمی متفاوت برای عناصر تعاملی استفاده میکند. هر دو به وضوح برند هستند. فقط یکی در برابر هر سطحی تضمین شده است.
- از مقیاسهای یکنواخت ادراکی استفاده کنید. OKLCH و HSLuv مقادیر رنگ را به روشنایی درک شده نگاشت میکنند، پس میتوانید بدون شکستن کنتراست بین هیوها بچرخید. Radix، Spectrum، و Material 3 همه انواعی از این را انجام میدهند.
- حالت تاریک را به عنوان یک مجموعه توکن موازی، نه یک فکر بعدی، منتشر کنید. توکنی که در حالت تاریک ناموفق است آماده حالت تاریک نیست. اگر سیستم شما
text-defaultرا در روشن به یک رنگ و در تاریک به رنگ دیگری حل میکند، هر دو مقدار باید در برابر سطح جفت شدهشان بگذرند.
بدترین نتیجه مصالحهای است که هیچکس نخواسته: یک برند کمرنگ که هنوز دسترسپذیر نیست. این اتفاق وقتی میافتد که تیمها به بازخورد کنتراست با کماشباع کردن هر رنگ به جای درست کردن جفتسازیها واکنش نشان میدهند. کماشباعسازی همان دسترسپذیری نیست. روابط هستند.
گردش کار آزمایش دسترسپذیری
آزمایش کنتراست ارزان، خودکار، و اگر تا بررسی طراحی صبر کنید کاملاً بیفایده است.
گردش کاری که جواب میدهد بررسیهای کنتراست را در چهار نقطه، نه یک، اجرا میکند.
- در تعریف توکن. وقتی یک توکن ایجاد میشود، سطوح مجاز آن هم تعریف میشوند.
text-defaultفقط رویbg-default،bg-subtle، وbg-raisedمجاز است. کنتراست توکن در برابر هر کدام یک بار بررسی و قفل میشود. - در commit کامپوننت. Storybook به علاوه یک یکپارچهسازی axe-core یا pa11y بررسی دسترسپذیری را روی هر variant کامپوننت به عنوان بخشی از CI اجرا میکند. هر variant جدیدی که ناموفق باشد قبل از merge مسدود میشود.
- در تحویل فایل طراحی. پلاگینهای Figma مثل Stark یا بررسگر WCAG داخلی مشکلات را درون ابزار طراحی علامت میزنند. در زمان طراحی بگیرید، نه زمان بررسی.
- در سطح صفحه. Lighthouse، axe DevTools، یا pa11y روی صفحات زنده در staging یا production اجرا میشوند. این شکستهای دنیای واقعی (جاسازیهای شخص ثالث، محتوای تولید شده توسط کاربر، تمهای پویا) را که آزمونهای کامپوننت از دست میدهند میگیرد.
نکته اجرای ابزارهای بیشتر نیست. نکته جلو بردن بررسی است. یک شکست کنتراست پیدا شده توسط یک pipeline CI یک رفع پنج دقیقهای است. همین شکست اگر در یک ممیزی قبل از راهاندازی پیدا شود یک هفته برای تیم هزینه میبرد.
برای دلیل ساختاری که این رویکرد لایهای کار میکند، راهنمای سیستمهای طراحی توضیح میدهد چرا تفکر لایه توکن برنده میشود. و مقاله قانون ۶۰-۳۰-۱۰ شکسته است توضیح میدهد چرا رنگ مبتنی بر نقش (که دسترسپذیری به آن بستگی دارد) جایگزین تفکر مبتنی بر نسبت شده است.
سوالات متداول
آیا WCAG AA کافی است یا به AAA نیاز دارم؟
AA استاندارد برای اغلب محصولات تجاری و اغلب قوانین دسترسپذیری است. AAA فقط در زمینههای خاص (دولتی، بهداشتی، آموزشی) الزام قانونی دارد و بدون صاف کردن پالت گران است. AA را به عنوان کف، APCA-ideal را به عنوان سقف هدف قرار دهید.
آیا هر عنصر غیر متنی باید به نسبتهای کنتراست برسد؟
اجزای رابط کاربری غیر متنی که معنا منتقل میکنند تحت WCAG 2.2 به حداقل ۳:۱ نیاز دارند. این دکمهها، حاشیه فرم، حلقههای فوکوس، آیکونهای با معنا، و عناصر گرافیکی را پوشش میدهد. تزئین خالص (الگوهای پسزمینه، گرادیانتهای محیطی) معاف است. متن تصادفی (یک logotype، یک پوشش زیرنویس عکس) هم معاف است.
تفاوت بین WCAG و APCA چیست؟
WCAG 2 استاندارد قانونی فعلی است که بر اساس یک فرمول لومینانس ۳۰ ساله است. APCA جایگزین پیشنهادی در پیشنویس WCAG 3 است که بر اساس نحوه واقعی کار ادراک انسان است. امتیازهای APCA بهتر با خوانایی واقعی همبستگی دارند اما هنوز الزام قانونی ندارند. محصولات در حال انتشار از هر دو استفاده میکنند: WCAG 2 برای انطباق، APCA برای کیفیت.
دسترسپذیری را در توکنها بپزید
کنتراست رنگ دسترسپذیر یک انتخاب سبک نیست. یک ویژگی سیستم است.
تیمهایی که فراگیرترین، برند-محورترین محصولات را منتشر میکنند همانهایی هستند که دیگر دسترسپذیری را یک فکر بعدی تلقی نمیکنند و آن را به عنوان یک ویژگی خود پالت رنگ در نظر میگیرند.
توکنها نسبتها را رمزگذاری میکنند. مقیاسها جفتسازیها را رمزگذاری میکنند. آزمایش در چهار نقطه از گردش کار اتفاق میافتد. هیچکس قبل از راهاندازی یک بررسگر کنتراست را جلوی صفحه نگه نمیدارد.
اگر فرآیند فعلی شما شامل یک طراح است که یک پالت را برای «به نظر خوانا» میسنجد، در یک ممیزی ناموفق خواهید شد. اگر فرآیند شما شامل یک ابزار بررسی به علاوه بررسیهای دستی است، در مقیاس ناموفق خواهید شد. اگر فرآیند شما شامل توکنهای مبتنی بر نقشی است که دسترسپذیری را در لایه تعریف رمزگذاری میکنند، منتشر خواهید کرد.
توکنها را بسازید. نسبتها را منتشر کنید. بررسیها را خودکار کنید. برند پرجنبوجوش میماند، رابط خوانا میماند، و ممیزی به یک فرمالیته تبدیل میشود نه یک بازسازی.
Need a color system that hits WCAG without flattening the brand? Brainy builds token-layer accessibility into every palette.
Get Started
