Why Is Color Contrast a Key Concept for Accessibility?

Using strong color contrasts makes your texts, designs, and images easier to see for people who have low vision.

In the Manifold platform itself, there is not much you can do to change color contrasts for accessibility.

The main colors of the Manifold palette (black, white, dark green) are accessible, though aspects of its reading experience are not.

For instance, you might want to be careful with its annotating feature, which includes faint blue and green lines against a white background that are not accessible:

So this means that as you’re preparing a Word Doc or Google Doc to bring into Manifold, you’ll want to test your colors and color contrasts for accessibility.

How Do I Check Color Contrast in a Manifold Project?

One good tool for testing color contrast is the WebAIM Contrast Checker. To use it, you just need to know the color codes for the colors you want to test.

For example, this red text has the code #d92323. Is it accessible against this white background? Let’s plug it into the WebAIM Contrast Checker!

According to the Contrast Checker, the color #D92323 against a white background (#FFFFFF) is accessible to the WCAG AA but not the WCAG AAA level.

“WCAG” stands for “Web Content Accessibility Guidelines,” and at the UW, we want to have digital materials that are at the WCAG AA level. (UW IT Accessibility Guidelines.)

But what about #d92323 red text against a #00ff00 green background?

That is a failure at all WCAG levels unless the text is made big and bold.

The  tota11y plugin is another tool you can use for checking color contrast as well as the WAVE checker for web accessibility evaluation.