Most desktop and mobile devices now feature some version of a high contrast mode or inverted colors settings. There are some variations between them, but their purpose is to increase readability and reduce eye strain for many people by ditching the traditional dark text on white background and opting for a black background with bright text and link colors, like white and yellow.
For people who need or want to navigate the web with high contrast enabled, these settings offer a free and pretty reliable way to do so. High contrast also gives you a fast and easy way to identify some accessibility issues on your website you might not catch otherwise.
Give high contrast mode a try
If you're using a Windows computer and are able to use keyboard combination shortcuts, the default command should be left Alt + left Shift + Print Screen. On a Mac, you should have options to invert colors in display or accessibility settings. A quick online search will get you the exact instructions you need for your device and should take just seconds to set up.
Once you have high contrast turned on, the difference is obvious, but spend some time on your website and take a closer look.
- First, is everything still there?
- Can you read all links, buttons, and controls?
- What about images? Is important information communicated through images still apparent?
So far, so good? Great, now take it a little further.
- Were there images in the background that are no longer visible? Were those images decorative or aesthetic, or did they communicate information or serve some instructional or control purpose?
- What happened to other images? What about images that contain text? Did the images change colors, too, or remain fixed? If their colors changed, did they remain readable? If their colors stayed the same, would somebody who needs high contrast have an easy time understanding the image?
Now that you're looking in a higher level of detail, return to the first question: is everything still there? If important information becomes hidden or illegible, if control elements can no longer be seen or understood, or if there is no change to visual representation after high contrast is enabled, these are signs that there are people who won't be able to use your website and accessibility improvements may be needed.