Color contrast
Make sure your text is easy to read for all students.
Impact
Color is a powerful design tool. It can:
- Draw attention
- Set a tone or mood
- Emphasize key information
However, when used without consideration for accessibility, color can unintentionally exclude your students. For example:
- A student with red-green color blindness may not distinguish red from black.
- A student with light sensitivity may struggle with bright color combinations.
- A student using a high-contrast theme may not see your chosen colors at all.
Did you know? The colors you choose can affect how well people can use your information. Think about a ceramic bowl. Typically, these are considered "functional art." You can place food in them without harm. They have a useful function. That changes depending on the glaze you use. A lead-based glaze may look beautiful and vibrant, but you cannot place food in them. It becomes "fine art." It can be "seen" but not used. Similarly, colors you use on text and backgrounds can be beautiful and vibrant, but people with color blindness or a cognitive disability cannot read the information.
Brand example
At Texas A&M University–Corpus Christi, we use two brilliant brand colors: Islander Blue and Islander Green. These colors are visually appealing, but when used together (e.g., blue text on a green background) they may appear nearly identical to someone with color blindness or using a color filter. In those cases, the text may completely vanish from view.
Try this test: Turn on grayscale mode or color filter in your device's accessibility settings. If the text blends into the background, it is not accessible.
How to
"Black and white"
Color contrast plays a vital role in making your content readable. However, choosing the right contrast is not always as simple as using black and white.
While black text on a white background (or white text on black) is typically recommended because provides the highest contrast, it can also cause discomfort for some users. People with light sensitivity or certain cognitive disabilities may find this combination harsh or difficult to focus on.
A more comfortable alternative is light gray text on a dark gray background—or the reverse. This pairing still offers strong contrast but is gentler on the eyes, making it easier for many people to read.
Color contrast
If you would like to use color to enhance your content, it is best to do so with care. Color should be used in moderation. Too many colors can distract your audience and make your message harder to follow.
It is also important to consider color blindness. For example, people with red-green color deficiency may not be able to distinguish red from black. This means that if you rely on color alone to convey meaning, some users may miss important information.
You can test your color combinations with different tools:
- Grayscale mode: Available in most device accessibility settings, this mode removes color so you can see how your content appears without it.
- Color blindness simulators: These tools show how your content looks to people with different types of color vision deficiencies.
- Color contrast checkers: These tools measure the contrast ratio between text and background colors to ensure they meet accessibility standards.
One recommended tool is the TPGi: Colour Contrast Analyser (CCA). It calculates the contrast ratio and allows you to adjust your colors until they meet the required guidelines. This makes it easier to create content that is both attractive and accessible.
User-centered design
There is no single color combination that works for everyone. People experience color differently. Some need high contrast to read clearly, while others prefer softer tones to avoid eye strain.
Instead of choosing colors, consider using your platform's default styles or themes. If your system allows custom themes, that is even better. This approach lets users apply their own preferences (e.g., dark mode, high contrast setting) while keeping your content readable and visually consistent.
This is a simple and effective way to make your design work for everyone.
Use of color
Some users rely on color filters or custom display settings to reduce eye strain or accommodate visual impairments. This means:
- They may not see the colors you selected.
- They could miss important information if it is only communicated through color.
For example, if you write, "All required questions are in red," someone using a color filter may not be able to identify which questions are required. A better approach is to include a label such as "(Required)" or use an asterisk (*) with a clear explanation.
Did you know? The colors you see on your screen might look different to someone else using a different screen. Have you ever used an older laptop or monitor and looked at a table that seemed empty, while your coworkers insisted the table cells had color? This happens more often than you might think.
Even people who do not have color blindness or low vision can still have trouble seeing color clearly. That is why it is important not to rely on color alone to share important information.
Instead, add a symbol or text to help everyone understand your message. For example, a red campus safety alert might include an exclamation point to show it is a high alert. A yellow alert might include the word "Medium" to make it clear that it is a medium-level alert.
If you are using images, make sure to include a text alternative that says "High," "Medium," or "Low" so that everyone can understand the safety level, no matter how they access the information.
Best practices
Frequently asked questions
Additional guidance
You can learn more about using good color contrast with the following accessibility guides: