به طراح وب خوش آمدید.
بهینه سازی وب سایت تنها مربوط به زمان بارگذاری نیست. یک وب سایت سریع مردم را خوشحال می کند، اما تنها در صورتی که تجربه کاربری عالی را در عین حال ارائه دهد. اگر وب سایت شما در دسترس نباشد، ممکن است هشدارهایی مانند “رنگ های پس زمینه و پیش زمینه کنتراست کافی ندارند.” این خطای خاص به این معنی است که کاربران ممکن است به سختی بین عناصر خاصی در صفحه تمایز قائل شوند.
خوشبختانه، رفع این مشکل بسیار آسان است. به علاوه، اگر وبسایت خود را با PageSpeed Insights آزمایش کنید، حتی دستورالعملهای اساسی در مورد نحوه رفع خطا و بهبود دسترسی سایت خود دریافت خواهید کرد. 😎
پیام “رنگ های پس زمینه و پیش زمینه کنتراست کافی ندارند” به چه معناست؟
اگر شما از آمار PageSpeed استفاده کنید برای تست عملکرد وب سایت خود، متوجه خواهید شد که گزارشی حاوی پیشنهاداتی برای بهینه سازی محتوای شما برمی گرداند. اینها شامل نکاتی برای بهبود دسترسی در سایت شما هستند:
دسترسی برای موفقیت هر وب سایت ضروری است. اگر سایت شما در دسترس نباشد یا استفاده از آن ناخوشایند باشد، بازدیدکنندگانی را که برای به دست آوردن آنها زحمت کشیده اید از دست خواهید داد.
عوامل زیادی وجود دارند که بر دسترسی یک وب سایت تأثیر می گذارند. به عنوان مثال، میتوانید از فونتهای خوانا استفاده کنید، پیوندها را به درستی برچسب بزنید و پیمایش صفحهکلید را فعال کنید.
همچنین مهم است که از کنتراست کافی در سایت خود استفاده کنید. این به معنای انتخاب رنگهای پسزمینه است که به کاربران اجازه میدهد عناصر کلیدی صفحه را ببینند.
خطای “رنگ های پس زمینه و پیش زمینه نسبت کنتراست کافی ندارند” به این معنی است که نسبت کنتراست بین دو عنصر مطابق با استانداردهای توصیه شده نیست. به عنوان مثال، می توانید از همان سایه خاکستری هم برای پس زمینه و هم برای متن استفاده کنید.
این استانداردها توسط دستورالعمل های دسترسی به محتوای وب (WCAG) تنظیم شده است. [۱]. این مجموعه ای از دستورالعمل های شناخته شده بین المللی برای دسترسی بیشتر به محتوای وب است. WCAG حداقل نسبت کنتراست ۴٫۵:۱ را برای متن معمولی و ۳:۱ برای متن بزرگ برای اطمینان از خوانایی بهینه ارائه می دهد.
اگر نمی دانید این شانس ها چگونه کار می کنند، نگران نباشید. در درس با جزئیات بیشتری به آنها نگاه خواهیم کرد.
اهمیت کنتراست در دسترسی به وب
کنتراست نقش مهمی در دسترسی به صفحات وب دارد. این کار باعث میشود تا کاربران بتوانند مهمترین عناصر را در صفحه پیدا کنند.
برای مثال، یک فراخوان برای اقدام (CTA) را در نظر بگیرید. این عناصر تمایل دارند از رنگهایی استفاده کنند که از پسزمینه متمایز باشند تا راحتتر دیده شوند.
از آنجایی که این موارد پررنگ توجه شما را به خود جلب می کند، به احتمال زیاد روی آنها کلیک کنید:
با این حال، نسبت کنتراست خوب بیشتر از تبدیل یا تعامل سودمند است. همچنین زندگی را برای کاربران کم بینا کمی آسان تر می کند.
در بیشتر موارد، از خطای “رنگ های پس زمینه و پیش زمینه کنتراست کافی ندارند” به راحتی جلوگیری می شود. به عنوان مثال، برخی از سازندگان صفحه شامل انتخابگرهای رنگ بصری هستند تا به شما در پیگیری کنتراست کمک کنند.
نحوه رفع خطای دسترسی “رنگ های پس زمینه و پیش زمینه نسبت کنتراست کافی ندارند”
کنتراست ضعیف می تواند برخی از بازدیدکنندگان را خاموش کند. علاوه بر این، عدم دسترسی به کسب و کار شما بازتاب بدی خواهد داشت. پس بیایید ببینیم چگونه آن را تعمیر کنیم.
مرحله ۱: تعیین کنید کدام عناصر کنتراست پایینی دارند
PageSpeed Insights می تواند به شما کمک کند تا عناصری را در صفحه خود که فاقد کنتراست هستند مشخص کنید. ابتدا باید یک گزارش برای صفحه ای که می خواهید آزمایش کنید ایجاد کنید. سپس به پایین اسکرول کنید دسترسی بخش برای دستورالعمل
اگر پیام «رنگهای پسزمینه و پیشزمینه کنتراست کافی ندارند» را مشاهده کردید، میتوانید روی آن کلیک کنید تا فهرستی از عناصر مورد نظر، از جمله کلاس CSS آنها را ببینید:
از آنجایی که PageSpeed Insights فقط به شما امکان میدهد هر بار یک صفحه را آزمایش کنید، شناسایی این عناصر باید آسان باشد. با این حال، اگر مطمئن نیستید، می توانید از ابزار بازرسی مرورگر خود برای یافتن کد این عنصر در صفحه خود استفاده کنید.
مرحله ۲: نسبت کنتراست عناصر خود را تعیین کنید
اینجاست که همه چیز سرگرم کننده می شود. هنگامی که می دانید کدام عناصر را باید بررسی کنید، می خواهید از انتخابگر رنگ یا افزونه در مرورگر خود استفاده کنید. اینها ابزارهایی هستند که به شما امکان می دهند روی قسمت های خاصی از یک صفحه کلیک کنید و کد هگز منحصر به فرد آن را ببینید.
اگر از کروم استفاده می کنید، ممکن است بخواهید افزونه های کروم را در نظر بگیرید پالت رنگ هوشمند یا مارمولک. برای macOS می توانید امتحان کنید ColorSlurp. هر ابزاری را که انتخاب کنید، میتوانید از آن برای دریافت کد هگزا برای عناصر پیشزمینه و پسزمینه که کنتراست ناکافی را نشان میدهند، استفاده کنید.
هنگامی که هر دو کد هگز را دارید، باید از آن استفاده کنید جستجوگر کنتراست WebAIM آنها را بررسی کنید این ابزار به طور خودکار نسبت کنتراست بین این رنگ ها را به شما نشان می دهد:
همچنین به شما اطلاع میدهد که آیا رنگهایی که استفاده میکنید با دستورالعملهای دسترسی WCAG مطابقت دارند یا خیر. اگر همه پاسها را بگیرید، خوب هستید که بروید. اگر نه، توصیه می کنیم رنگ ها را با نوارهای زیر کدها تنظیم کنید تا زمانی که یک رسانه شاد پیدا کنید.
مرحله ۳ رنگ ها را با نسبت کنتراست توصیه شده تنظیم کنید.
این مرحله آخر آسان است، به خصوص اگر از وردپرس (پلتفرم در دسترس بودن بالا) استفاده می کنید. مراحل دقیق بسته به نحوه ویرایش صفحات خود متفاوت خواهد بود.
اگر از ویرایشگر بلوک استفاده می کنید، می توانید روی هر بلوکی کلیک کنید تا به تنظیمات آن دسترسی پیدا کنید. از آنجا می توانید رنگ را ویرایش کنید:
هر گزینه در زیر رنگ منو به شما امکان می دهد یک عنصر خاص را در داخل بلوک تغییر دهید، مانند متن یا پس زمینه. وقتی گزینه ای را انتخاب می کنید، یک انتخابگر رنگ ظاهر می شود.
حالا بر روی گرادیان کلیک کنید و کد هگزی که می خواهید استفاده کنید را وارد کنید:
پس از تنظیم، تغییرات خود را در صفحه ذخیره کنید و آن را با PageSpeed Insights آزمایش کنید. اگر رنگ های جدید کنتراست کافی داشته باشند، پیام خطا دیگر ظاهر نمی شود.
👉 برای سایر محتواها، ممکن است لازم باشد برخی چیزها را با استفاده از تنظیمات تم خود در سفارشیساز یا شاید برخی از کدهای CSS سفارشی تغییر دهید.
خطاهای نسبت کنتراست رنگ را برای همیشه برطرف کنید
هنگامی که از PageSpeed Insights برای آزمایش عملکرد سایت خود استفاده می کنید، یک گزارش در دسترس بودن نیز دریافت می کنید. اگر دیدی”رنگ های پس زمینه و پیش زمینه کنتراست کافی ندارند“، به این معنی که کاربران کم بینا ممکن است در دیدن عناصر موجود در صفحه مشکل داشته باشند.
📌 در صورت مواجهه با این خطا چه کاری باید انجام دهید:
- تعیین کنید کدام عناصر کنتراست پایینی دارند.
- نسبت کنتراست عناصر خود را با استفاده از ابزاری مانند تعیین کنید جستجوگر کنتراست WebAIM.
- رنگ های صفحه را با نسبت کنتراست توصیه شده تنظیم کنید.
آیا هنوز درباره نحوه رفع خطای «رنگهای پسزمینه و پیشزمینه کنتراست کافی ندارند» در PageSpeed Insights سؤالی دارید؟ در نظرات به ما اطلاع دهید!