When it comes to accessible design, one of the best pairings out there is high contrast and low vision. Color plays a significant role in how I access visual content, especially when it comes to locating items or information of interest, and items that have poor contrast can either be extremely difficult or impossible for me to access. Here is an overview of high contrast color schemes and low vision, and how high contrast and low vision can influence other environments as well.
Examples of high contrast color schemes
Contrast is defined as the difference of color that makes an object (or the foreground) visible against a background of a different color, with a contrast ratio showing the luminance of the brightest shade to the darkest shade. For low vision, high contrast color schemes may involve limited color palettes or removing non-essential colors, while other high contrast color schemes simply make colors easier to see against different backgrounds.
Some examples of common high contrast color schemes for low vision include:
- White and black
- Black and yellow
- Green and black
- Yellow and blue
- Grayscale display
Other ways that high contrast color schemes may be used include
- Using a solid-colored background to decrease visual complexity
- Avoiding patterns, prints, or stripes that can make it more difficult to focus on objects
- Adding a colored overlay to a page to make it easier to read text
There is no “universal” color scheme for high contrast and low vision, as preferences for color scheme can vary amongst individuals or be influenced by their specific vision condition. However, the Web Content Accessibility Guidelines define enhanced contrast for text as having a minimum value of 7:1 for standard print text and 4.5:1 for large or bold text. To get information on the specific contrast ratio for two colors, I recommend checking out an online contrast color checker that can provide further information.
Related links
- Color Contrast Checker – Coolors
- Choosing Device Wallpapers and Backgrounds With Low Vision
- How To Write Alt Text For Color Palettes
Examples of low contrast color schemes
Contrast sensitivity can vary from individual to individual, but I find it helpful to share examples of low contrast color schemes or pairings that can make it difficult or impossible for someone to read text or access information. Some examples I have encountered in everyday environments include:
- Pencil lead on white paper. When someone is writing in pencil, it looks like they are writing in invisible ink to me!
- Light blue lined paper. While I can perceive the color light blue on its own, it blends too much into the white paper so I have no idea where the lines are.
- White phone on white nightstand, or gray tablet case on gray seat. The colors match very closely, and without depth perception I don’t notice the change in texture. This can be frustrating when trying to find electronics, but it’s dangerous in the kitchen if I am chopping something on an identically colored surface.
- White text on light colored background, or dark gray text on black background. It can be challenging to see the edges of text or know where it is located.
Related links
- Writing Aids For Low Vision: My Personal Superlatives
- Strategies For Using Lined Paper With Low Vision
- Paper Colors And Low Vision
- Choosing A Phone Case With Low Vision
Light background or dark background?
From a design standpoint, swapping foreground (text) and background colors has no influence on the contrast ratio between two colors. Black text on a white background or white text on a black background would both be considered “high contrast” in this scenario, so it is up to the individual to decide which color they would like to use as a background color. Individuals who are sensitive to bright lights or glare may prefer to use a dark background with light foreground/text because it appears less bright, while others may prefer darker text/foreground on a lighter background.
Related links
- How I Decorate A Bedroom For CVI
- How To Use Invert Colors With Low Vision
- Tips For Creating Art For Visually Impaired Friends
- How To Create High Resolution Images For Low Vision
Dark mode vs high contrast mode
Dark mode and high contrast mode are not interchangeable with each other, though dark mode may incorporate high contrast color schemes. Dark mode color palettes usually feature shades of gray and are designed for reading in low-light conditions, while high contrast mode color palettes incorporate pure black and a more limited color scheme that may include white, red, green, yellow, or other colors. On my Android phone, I have a system wide dark mode enabled with high contrast text to enhance readability, while my iPad uses a system wide light mode with some applications in dark mode with additional contrast settings.
Related links
- Choosing Between Light Mode and Dark Mode For Low Vision
- A to Z of Assistive Technology for Reading Digital Text
Enabling high contrast displays for low vision users
Several mainstream operating systems and assistive technology devices provide options for enabling a high contrast display or color scheme, with varying levels of customization. This is separate from dark mode, but most operating systems allow users to enable both dark mode and high contrast options simultaneously. Examples of technologies that support high contrast color schemes include:
Windows 10 and 11 high contrast options
Windows 10 and 11 offer a high contrast mode which provides a simplified color palette and removes non-essential display graphics and formatting, making it easier to locate links and areas of interest. Other options for improving contrast include:
- Turn off transparency or transparency effects in Windows
- Set a high contrast accent color, or remove accent color from start menu and title bars
- Use inverted color filter for display
- Change appearance of mouse pointer, text cursor, and make digital feedback points larger and darker
iOS, iPadOS, and MacOS high contrast options
The Display & Text Size menu in Accessibility for iOS, iPadOS, and MacOS has several options for improving display contrast across all applications, including:
- Show button shapes
- Reduce transparency
- Increase contrast
- Differentiate without color
- Smart Invert for inverting display of screen without affecting photos
- Classic Invert for inverting display, which may affect appearance of photos and graphics
Users can also enable temporary accessibility settings or sliders in the Control Center menu on iOS and iPadOS.
Android and Chromebook high contrast options
On my Android phone, I have a system wide dark mode enabled with high contrast text to enhance readability; the high contrast text adds a subtle outline so I can read it more easily on any color background. Samsung devices offer additional options for enabling high contrast, including a dedicated high contrast color scheme, high contrast keyboard, highlight buttons, and color inversion.
Chromebook devices offer a high contrast option in the form of color inversion, which inverts the screen display.
High contrast options for assistive technology
High contrast color schemes or color options are often incorporated into several types of assistive technology devices and specialty applications, including:
- Video magnifiers
- Screen magnification tools
- Keyboards and computer mice
- Custom device home screens and icons
- Simplified reading displays and reading mode for text content
- Teleprompters for reading text at a distance
- Adapted graphics, line paper, and writing utensils
Related links
- How To Use High Contrast in Windows 10 and Windows 11
- How To Make iPad Accessible for Low Vision
- Enabling Temporary Accessibility Settings For iPad
- Low Vision Accessibility Settings For Android Phones
- A to Z of Assistive Technology for Low Vision
- A to Z of Assistive Technology for Reading Digital Text
Incorporating high contrast colors into other spaces
High contrast color schemes aren’t just for technology! They are also a key element of creating accessible spaces for people with low vision or decreased contrast sensitivity, and can include the following elements:
High contrast in the home
- Use light colored surfaces for dark colored items or dark colored surfaces for light colored items to make them easier to see. This can extend to plates, cutting boards, measuring cups, cookware, etc.
- Evaluate lighting to ensure spaces are well-illuminated (see post “Lighting and Low Vision”)
- Choose darker colored furniture or objects for a room with lighter colored walls, or vice versa. This can include brightly colored towels, a bold comforter or blankets for a bed with light walls, or rugs that absorb glare.
- When choosing a phone case, charging cables, or small items that can easily be misplaced, look for colors that “stand out” against surfaces so they can be easily located.
High contrast in the classroom
- Use markers with saturated colors on light backgrounds when writing on the board
- Choose school supplies that stand out against common surfaces such as the inside of a backpack, desk surface, floor, etc.
- Consider adding vibrant tape outlines to help with locating areas of interest that may otherwise blend in, such as outlining a light switch if it blends into the wall
- Write on bold line paper or bold graph paper, as students with decreased contrast vision may not be able to see lines in traditional notebook paper
High contrast in the workplace
- Add step nosing for stairs, which can help with locating the edge of stairs
- Choose furniture and objects that “stand out” against wall colors or other common surfaces
- Avoid placing similar colored items on surfaces, such as a white piece of paper on a white desk
- Enable high contrast display settings for computers or other technologies
Related links
- Lighting And Low Vision
- How I Decorate My Dorm Room With Low Vision
- Low Vision Assistive Technology For The Bathroom
- How To Make Things On The Board Easier To See
- Choosing A Backpack With Low Vision
- Strategies For Using Lined Paper With Low Vision
- How I Set Up My Tech Internship Desk: PM Intern With Low Vision
More resources on high contrast and low vision
- One of my most-used high contrast items for low vision is my keyboard, which has black text on a yellow background. Learn more about keyboard accessibility in Mainstream Technology and Low Vision: Keyboards
- Looking for more tips on how to reduce eye strain from technology? High contrast can help a lot, but I write about more tips in Ten Ways To Reduce Eye Strain From Screens With Technology
- Want to learn more about designing for low vision? Check out Design For Low Vision/Blindness | Veronica With Four Eyes (veroniiiica.com)
Published October 25, 2019. Updated August 2024