Color contrast

Make sure your text is easy to read for all students.

Impact

Color is one of the most powerful tools in design. It can:

• Grab attention
• Set a mood
• Highlight important information

But if it is not used carefully, color can also make your content hard to read—especially for people with visual impairments or color blindness.

TAMU-CC uses two brilliant brand colors: Islander Blue and Islander Green.

These colors look great together—until you try to use one for the background and the other for the text. People with color blindness or using a color filter due to a major eye strain (a common accessibility setting) will find the colors almost identical. That means the text disappears.

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

Color contrast

Color contrast is key to making your content readable, but it is not always as simple as black and white.

Black text on a white background (or vice versa) offers the highest contrast, but it can also cause major eye strain, especially for people with light sensitivity or cognitive disabilities.

A better option? Try light gray text on a dark gray background (or the reverse). It's still high contrast, but easier on the eyes.

Suppose you want to add a splash of color? Color should be used in moderation. Too many colors can overwhelm your audience and make your message harder to follow.

Also, be mindful of color blindness. For example, people with a red-green color deficiency cannot tell red and black apart.

You can test your color combinations with different tools:

• Grayscale mode (found in most device accessibility settings)
• Color simulators for different types of color blindness
• Color contrast checkers to assess if the combination meets minimum color ratio requirements

Note: Color contrast checkers, such as TPGi: Colour Contrast Analyser (CCA) do the hard work for you. They calculate the color contrast on your content, and some let you adjust the colors until they meet accessibility standards.

There are no perfect color choices. Everyone sees and experiences color differently. Some people need high contrast to read clearly, while others need softer, low contrast colors to avoid eye strain. You will not have a color palette that everyone will agree with.

Instead of picking fixed colors, try using your platform's default style or theme. If you can create custom themes, try that as well. That way, users can apply their own settings—like dark mode or high contrast—and your content will still look great and be easy to read.

It is a simple way to make your design work for everyone.

Use of color

Some people use color filters to reduce eye strain or styles/themes due to a visual impairment. That means:

• They do not see the colors you picked.
• They may miss important information if it is only shown through color.

For example, if you say, "All required questions are in red," someone using a color filter might not be able to tell which questions are required. Instead, add a label like "(Required)" or use an asterisk (*) with a legend.

Best practices

1. Use color in moderation.
   Too many colors can be overwhelming.
2. Avoid switching colors too often.
   It can be distracting and confusing.
3. Let your design breathe.
   Where possible, use white space (or any plain color background) to give your content room to stand out.
4. Make sure colors contrast well.
   Light gray text on a dark gray background (or vice versa) is usually easier to read.
5. Avoid tricky color combos.
   For example:
   • Red and black
   • Blue and green (especially Texas A&M–Corpus Christi's shades)
   • Bright or complementary colors that clash (e.g., red and green)
6. Do not rely on bold text alone.
   If colors do not contrast well, add outlines or shadows to help the text pop.
7. Be careful with patterns.
   If you are placing text over an image or pattern:
   • Try increasing the font size or thickness.
   • If it is still hard to read, use a solid background behind the text or fade the image into a solid background color.

Additional guidance

You can learn more about using good color contrast with the following accessibility guides:

• • Color and Design