وقتی در مورد دسترسی پذیری (accessibility) صحبت می کنیم، تضاد رنگ (contrast ratio) یکی از مهم ترین مواردی است که به ذهن می رسد و لازم است که در همه سایت ها به آن اهمیت داده شود. طبق گزارش سایت WebAIM، میزان 83.6 درصد هوم پیج سایت ها در سال 2023 دارای ایراد کانترست ریشیو بودند. این بررسی بر اساس استانداردهای Web Content Accessibility Guidelines (WCAG) انجام شده است.
دسترسی پذیری یکی از ارکان مهم در on-page SEO است که توجهی کمتری نسبت به مواردی مانند پرفورمنس به آن شده است. دسترسی پذیری شامل مواردی مانند سایز فونت، لیبل ها، دکمه ها، فاصله ها و موارد متعدد دیگر است. در این مقاله در خصوص مطالب زیر توضیح داده شده است:
- تاریخچه تضاد رنگ
- چرا تضاد رنگ مهم است؟
- تضاد رنگ چگونه محاسبه می شود؟
- تضاد رنگ با استاندارد AA/AAA
- تضاد رنگ با استاندارد APCA
- شناسایی متن های با تضاد رنگ کم
- شبیه سازی کور رنگی در DevTools گوگل کروم
- پرسش های متداول در مورد contrast ratio
- جمع بندی
تاریخچه تضاد رنگ
جالب است بدانید برای اولین بار، آقای اسحاق نیوتن در سال 1704 تضاد بین 7 رنگ را محاسبه کرد و برای آن یک color circle طراحی کرد. دایره رنگ نیوتن به این صورت بود که رنگ هایی که دقیقا روبروی هم قرار داشتند، بیشترین تضاد رنگ را نسبت به یکدیگر داشتند.
بعدها در سال 1708 نیز آقای یوهان گوته (نویسنده نامی آلمانی) نیز دایره رنگ را عرضه کرد که 6 رنگ را تحت پوشش قرار می داد ولی مانند دایره نیوتن، از ریاضی و محاسبات در آن استفاده نکرده بود.
چرا تضاد رنگ مهم است؟
حدود 320 میلیون نفر در سراسر جهان، شامل 1 نفر از هر 20 مرد و 1 نفر از هر 200 زن که در مجموع برابر با 5% درصد از جمعیت جهان را شامل می شود، دارای مشکل دیدن رنگ و کوررنگی هستند. به همین دلیل لازم است که در صفحات سایت و حتی در چاپ نیز به contrast ratio رنگ متن و رنگ پس زمینه دقت کرد که همه کاربران بتوانند به راحتی متن ها را مطالعه کنند. در همین راستا، گوگل نیز توصیه می کند که به استاندارد WCAG در مورد دسترسی پذیری که شامل راهنمای تضاد رنگ نیز هست، توجه شود تا تجربه کاربری خوبی برای همه کاربران سایت فراهم شود.
تضاد رنگ چگونه محاسبه می شود؟
همان طور که گفته شد، یکی از معتبر ترین استاندارد های تضاد رنگ، توسط World Wide Web Consortium (W3C) تحت راهنماهای WCAG عرضه شده است. محاسبه تضاد رنگ بر اساس نسبت میزان درخشندگی رنگ های پس زمینه و پیش زمینه انجام می شود. به عنوان نمونه، رنگ سفید دارای میزان درخشندگی 100% و رنگ مشکی دارای میزان درخشندگی 0% است.
contrast ratio = (L1 + 0.05) / (L2 + 0.05)
# L1 = Luminance 1 = میزان درخشندگی نسبی رنگ روشن
# L2 = Luminance 2 = میزان درخشندگی نسبی رنگ تیرهمیزان contrast ratio می تواند عددی بین 1 و 21 باشد که به عنوان 1:1 و 1:21 (یا 21:1 با توجه به تیره و روشن بودن پس زمینه و پیش زمینه) نیز نمایش داده می شوند.
تضاد رنگ با استاندارد AA/AAA
طبق استاندارد WCAG، کانترست ریشیو دست کم باید عدد 4.5 باشد که به AA شناخته می شود و اگر بتواند به عدد 7 برسد، ایده آل خواهد بود و با AAA شناخته می شود. البته در صورتی که اندازه فونت به میزان 120% تا 150% درصد بزرگتر از اندازه فونت پیش فرض متن باشد، میزان تضاد رنگ AA به 3 و میزان تضاد رنگ AAA به 4.5 کاهش پیدا می کند.
میزان تضاد رنگ 4.5:1 برای افراد دارای محدودیت در تشخیص رنگ و همچنین افراد 80 ساله مناسب است. در صورتی که یک فرد دچار کوررنگی باشد، تضاد رنگ دست کم 7:1 توصیه می شود.
| نوع متن | AA | AAA |
|---|---|---|
| متن صفحه (< 24px) | 4.5 | 7 |
| متن بزرگ (> 24px) | 3 | 4.5 |
| UI (icons, graphs, etc.) | 3 | تعریف نشده |
بررسی تضاد رنگ با استاندارد AA/AAA توسط گوگل کروم
در DevTools مرورگر گوگل کروم، امکان بررسی تضاد رنگ و مشخص کردن متن هایی که دارای مشکل تضاد رنگ هستند وجود دارد. در تب Elements در DevTools، در بخش Styles روی یک رنگ کلیک کرده تا color picker باز شود.
در صورتی که مرورگر توانسته باشد با توجه به CSS موجود در صفحه، رنگ پس زمینه متن مورد نظرتان را متوجه شده باشد، میزان کانترست ریشیو را به شما نمایش می دهد و هر کدام از کانترست ریشیو های AA یا AAA که پاس شده بود را با تیک سبز و کانترست ریشیو هایی که پاس نشده اند را با علامت ممنوع قرمز مشخص می کند. با توجه به تضاد رنگ المنت در حال بررسی، ممکن است یک یا دو نمودار روی color picker ظاهر شود و شما می توانید با تغییر طیف رنگ و انتخاب رنگ مناسب، استاندارد AA یا AAA را پاس کنید.
ابزار بررسی تضاد رنگ در صفحه طبق استاندارد AA/AAA
ابزارهای آنلاین و آفلاین متعددی برای بررسی contrast ratio وجود دارد. ابزار زیر توسط آقای Alvaro Montoro تهیه شده و با کمی ویرایش در اختیار شما قرار گرفته است. با تغییر رنگ پس زمینه و رنگ پیش زمینه می توانید از پاس شدن یا مردود شدن تست تضاد رنگ برای فونت های با اندازه 24 پیکسل یا معادل آن به بالا و فونت های کوچک تر از 24 پیکسل مطلع شوید. در صورت پاس شدن تست، خانمی که در بالای ابزار وجود دارد، لبخند می زند و در غیر اینصورت، کم کم لبخند آن محو خواهد شد 🙂
تضاد رنگ با استاندارد APCA
به غیر از استاندارد AA/AAA، استاندارد دیگری به نام APCA که مخفف Accessible Perceptual Contrast Algorithm است نیز وجود دارد. استاندارد APCA از AA/AAA دقیق تر است و علاوه بر font-size و font-weight، کاربرد متن در صفحه را نیز مد نظر قرار می دهد.
| Font weight | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| Font Size | |||||||||
| 10px | ⊘ | ⊘ | ⊘ | ©§™ | ©§™ | ©§™ | ©§™ | ⊘ | ⊘ |
| 11px | ⊘ | ⊘ | ⊘ | ©§™ | ©§™ | ©§™ | ©§™ | ⊘ | ⊘ |
| 12px | ⊘ | ⊘ | ©§™ | ©§™ | x100 | x90 | x80 | ⊘ | ⊘ |
| 14px | ⊘ | ⊘ | ©§™ | 100 | 90 | 80 | 60 | x60 | ⊘ |
| 16px | ⊘ | ⊘ | 100 | 90 | 80 | 60 | 55 | x50 | x50 |
| 18px | ⊘ | ⊘ | 90 | 80 | 60 | 55 | 50 | x40 | x40 |
| 24px | ⊘ | 100 | 80 | 60 | 55 | 50 | 40 | 38 | x35 |
| 30px | ⊘ | 90 | 70 | 55 | 50 | 40 | 38 | 35 | 30 |
| 36px | ⊘ | 80 | 60 | 50 | 40 | 38 | 35 | 30 | 25 |
| 48px | 100 | 70 | 55 | 40 | 38 | 35 | 30 | 25 | >20 |
| 60px | 90 | 60 | 50 | 38 | 35 | 30 | 25 | >20 | >20 |
| 72px | 80 | 55 | 40 | 35 | 30 | 25 | >20 | >20 | >20 |
| 96px | 70 | 50 | 35 | 30 | 25 | >20 | >20 | >20 | >20 |
| 120px | 60 | 40 | 30 | 25 | >20 | >20 | >20 | >20 | >20 |
⊘ به معنای این است که نباید متنی با این مشخصات در صفحه باشد مگر اینکه متن decorative باشد.
©§™ به معنی این است که متن با ابعاد/وزن مذکور نباید در محتوا استفاده شود ولی می تواند در موارد غیر محتوایی مانند کپی رایت استفاده شود.
x مواردی که با x شروع می شوند نباید در محتوای صفحه استفاده شوند.
>20 بهتر است متن با ابعاد/وزن مذکور در محتوا استفاده نشود
بررسی تضاد رنگ با استاندارد APCA توسط گوگل کروم
استاندارد APCA به صورت experimental در DevTools گوگل کروم وجود دارد. برای تغییر استاندارد تضاد رنگ AA/AAA به APCA در DevTools به روش زیر عمل کنید:
- با فشار دادن دکمه های Control+Shift+C یا دکمه F12 در ویندوز، لینوکس و کروم OS، یا با فشار دادن دکمه های Command+Option+C در سیستم عامل مک، DevTools گوگل کروم را باز کنید.
- روی آیکن چرخ دنده در سمت راست DevTools کلیک کرده و وارد تنظیمات DevTools شوید
- در سایدبار سمت چپ، روی Experimnets کلیک کنید.
- گزینه APCA که در تصویر زیر نمایش داده شده را فعال کنید.
پس از اینکه تنظیم بالا را انجام دادید، لازم است که DevTools یا مرورگر خود را ریلود کنید تا تغییری که انجام دادید، اعمال شود.
حال می توانید در تب Elements در DevTools گوگل کروم، در بخش Styles روی یک رنگ کلیک کرده تا color picker باز شود.
در صورتی که مرورگر توانسته باشد با توجه به CSS موجود در صفحه، رنگ پس زمینه متن مورد نظرتان را متوجه شده باشد، میزان کانترست ریشیو را بر اساس استاندارد APCA به شما نمایش می دهد و با استفاده از منحنی که روی color picker وجود دارد می توانید نسبت به انتخاب رنگ مناسب اقدام کنید.
شناسایی متن های با تضاد رنگ کم
همان طور که در بالا گفته شد، جهت شناسایی متن های با تضاد رنگ کمتر از AA و AAA یا متن هایی که استاندارد APCA را پاس نکرده باشند، می توان از ابزارهای گوناگون مانند گوگل کروم و ابزار لایت هاوس گوگل استفاده کرد.
برای بررسی کل محتوای صفحه از نظر تضاد رنگ توسط مرورگر گوگل کروم و لایت هاوس به روش زیر عمل کنید.
بررسی تضاد رنگ با CSS Overview گوگل کروم
DevTools گوگل کروم یک امکان به نام CSS Overview دارد که اگر در مرورگر شما فعال نیست، می توانید به صورت زیر آن را فعال نمایید:
- با فشار دادن دکمه های Control+Shift+C یا دکمه F12 در ویندوز، لینوکس و کروم OS، یا با فشار دادن دکمه های Command+Option+C در سیستم عامل مک، DevTools گوگل کروم را باز کنید.
- با فشردن Control+Shift+P در سیستم عامل ویندوز و اوبنتو و Command+Shift+P در سیستم عامل مک، Command Pallete را باز کنید.
- کلمه CSS را تایپ کرده و روی گزینه Show CSS Overview کلیک کنید.
- روی تب CSS Overview به DevTools اضافه شده کلیک کنید.
- روی دکمه Capture overview کلیک کنید. با توجه به نوع استاندارد AA/AAA یا APCA که در تنظیمات DevTools انتخاب کرده اید، نتیجه بررسی به صورت زیر خواهد بود.
گزارش automatic contrast issue در DevTools گوگل کروم
DevTools گوگل کروم این امکان را دارد که علاوه بر گزارش CSS Overview که در قسمت قبل در مورد آن توضیح داده شد، به صورت خودکار، گزارش مشکلات تضاد رنگ را در کنسول DevTools نمایش دهد. برای فعال کردن این امکان، ابتدا وارد تنظیمات DevTools شوید و با توجه به تصویر زیر، پس از کلیک بر روی Experiments در ساید بار، گزینه Enable automatic contrast ratio reporting via the Issues panel را فعال کنید.
سپس DevTools را ریلود کنید. در صورتی که صفحه ای که در آن هستید دارای مشکل تضاد رنگ باشد، تعداد مشکلات در لبه بالا در سمت راست DevTools نمایش داده خواهد شد و با کلیک بر روی هر مشکل می توانید با توجه به تصویر زیر، مشکل تضاد رنگ آن را در پنل Issues مشاهده کرده و با کلیک بر روی هر المنت، جزئیات را در تب Elements رویت کنید.
بررسی تضاد رنگ با ابزار لایت هاوس
گوگل ابزار لایت هاوس را به صورت متن باز جهت بررسی صفحات از دیدگاه های پرفورمنس، دسترسی پذیری، best practices (بهترین روش)، سئو و PWA ارائه کرده است. مشکلات contrast ratio احتمالی، در گزارش دسترسی پذیری یا همان Accessibility لایت هاوس، نمایش داده می شوند. با توجه به تصویر زیر، نام المنت هایی که دارای مشکل تضاد رنگ هستند، در قسمت Failing Elements نمایش داده می شوند.
مقاله آموزش نحوه نصب و استفاده از Lighthouse CLI می تواند برای شما مفید باشد.
شبیه سازی کور رنگی در DevTools گوگل کروم
همان طور که در مقدمه نوشته شد، حدود 5 درصد از مردم دارای مشکلات کور رنگی هستند. برخی از افراد به طور کامل هیچ رنگی را نمی توانند ببینند و برخی دیگر نیز ممکن است فقط یک طیف رنگ مانند آبی، قرمز یا سبز را نتوانند ببینند. خوشبختانه مرورگر گوگل کروم، امکان شبیه سازی انواع کور رنگی را در DevTools خود قرار داده است. برای شبیه سازی کور رنگی، به روش زیر عمل کنید.
- با فشار دادن دکمه های Control+Shift+C یا دکمه F12 در ویندوز، لینوکس و کروم OS، یا با فشار دادن دکمه های Command+Option+C در سیستم عامل مک، DevTools گوگل کروم را باز کنید.
- با فشردن Control+Shift+P در سیستم عامل ویندوز و اوبنتو و Command+Shift+P در سیستم عامل مک، Command Pallete را باز کنید.
- کلمه render را تایپ کرده و روی گزینه Show Rendering کلیک کنید.
- روی تب Rendering کلیک کنید.
- در قسمت Emulate vision deficiencies گزینه مورد نظرتان را انتخاب کنید.
جمع بندی
انتخاب رنگ برای المان های مختلف در صفحات سایت، یکی از نکات مهمی است که در متخصصان UI/UX باید به آن توجه داشته باشد. برای انتخاب رنگ های مناسب در صفحات، علاوه بر دانستن روانشانسی رنگ ها، لازم است که استانداردهایی مانند موضوع تضاد رنگ که برای بهبود تجربه کاربری در نظر گرفته شده اند نیز رعایت شوند.
خواندن راهنمای Material 3 color roles و Material 2 Color system گوگل می تواند برای شما مفید باشد.
پرسش های متداول در مورد contrast ratio
طبق استاندارد WCAG، تضاد رنگ 1:4.5 برای فونت های با سایز تا 24 پیکسل و تضاد رنگ 1:3 برای فونت های با سایز بزرگ تر از 24 پیکسل مناسب است.
خیر. پایین بودن تضاد رنگ منجر به جریمه گوگل نخواهد شد. کانترست ریشیو تاثیر مستقیم در تجربه کاربری دارد و تجربه کاربری بر روی رنکینگ صفحات و سایت تاثیرگذار است.
الزامی در رسیدن به استاندارد AAA نیست، ولی اگر بتوانید انتخاب رنگ پس زمینه و پیش زمینه را به نحوی انتخاب کنید که همیشه استاندارد AAA را پاس کنید، تاثیر مثبتی در تجربه کاربری خواهد داشت.
بهتر است با مشورت گرفتن از یک متخصص UI/UX، نسبت به بازنگری در رنگ سازمانی اقدام کنید.
می توانید از ابزارهای گوناگون آنلاین و آفلاین برای بررسی contrast ratio استفاده کنید. پلاگین های متعددی نیز مانند این پلاگین برای بررسی contrast ratio وجود دارد که می توانید از آن در طراحی design system استفاده کنید.
هزاران سیگنال مختلف برای محاسبه رنک وجود دارد. این طور نیست که اگر کسی استاندارد تضاد رنگ را پاس کرد، نتواند رنک خوبی داشته باشد. به هر حال، توصیه می شود برای بهبود تجربه کاربری، استانداردهای تضاد رنگ را در نظر داشته باشید.
🔗 منبع: web.dev
بسیار مطلب جالبی بود استاد جعفری.
در عجبم که نیوتن سیصد سال پیش به تضاد رنگ فکر کرده و آن را محاسبه هم کرده! بعد از خواندن این مقاله، سایتم را یکبار از نظر کانترست ریشیو بررسی کردم و تلاش کردم تا حد امکان استاندارد APCA را پیاده کنم.
باز هم ممنون استاد از این مقاله کاربردی و جامع. افتخار می کنم که در محضر شما سئو را یاد گرفتم.
درود آقای ریاحی.
خواهش می کنم. سلامت باشید.
بله، نیوتن کلا خیلی کارش درست بوده است و دانشمند بزرگی بوده و کارهای بزرگی انجام داده است.
خواهش می کنم. سایت شما را دیدم. به جز یک مورد در فوتر، کانترست ریشیو همه المنت ها استاندارد APCA را پاس می کنند. شما زحمت زیادی برای سایتتان کشیدید و به همین دلیل است که با شیب مناسبی همیشه در حال پیشرفت هستید. من هم از پیشرفت شما لذت می برم.
موفق باشید
جناب مهندس بابت انتشار این مطلب مفید و کاربردی از شما متشکرم.
سپاسگزارم خانم سروی. خوشحالم که مورد رضایت شما واقع شد.
خیلی ممنون از مطالب فوق العادتون
سلامت باشید آقای حسینی گرامی.