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