Change Display Preferences on Mac to Find Color Contrast Accessibility Issues
It's very important to experience our web applications using the tools and techniques that our users are using. Many of our users out there may have vision impairments and may use tools or adjust settings to help them see better. Learn how to change the accessibility display preferences on Mac to test your application for issues that may arise due to a lack of contrast between foreground and background colors in your web application which can be exacerbated when users have to adjust these display preferences.
Resources
- [MacOS Display Preferences User Guide] (https://support.apple.com/guide/mac-help/change-accessibility-display-preferences-unac089/mac)
Instructor: [00:00] Here's a sample web application I've got with some color contrast issues baked in. Now let's modify the macOS accessibility display preferences to see how it impacts the color contrast of the page.
[00:13] We'll go to our system preferences, and then the accessibility preferences. If we want to get back here faster in the future, you can check this box to show accessibility status in the menu bar. Now the icon is right up here and we can get back there quickly.
[00:33] We'll go to the display settings. There are a few different settings we can modify. We could invert colors, use grayscale, and we can modify the amount of contrast. We can also see what it looks like when we combine some of these settings.
[01:08] These three are the ones that will have the most impact to your web page. The rest of these settings are primarily for operating system level display. You can see how turning these on and off doesn't really change the way the web page is displayed.
[01:25] It's always a good practice to just make sure that with any combination of these settings, everything on your page is still clear and easy to read.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!