Skip to main content

Color Contrast: Color Contrast

Color Contrast
Color Contrast
    • Notifications
    • Privacy

“Color Contrast”

Color Contrast

By Jamie Witman, OEN

This guide assumes that you have created an OEN Manifold account, have admin access to the backend, have created a project, and ingested a text or plan to ingest a text, or edit or create a text using the Manifold Editor. If you do not have Project Creator status, please review the Request an Account form.


For help creating a project and adding a text, see the Creating a Project Quick Guide.

What is Color Contrast and why is it important for accessibility?


Color contrast is the perceivable difference between colors. Typically it refers to the contrast between a foreground color and a background color. Using strong color contrast is essential for anyone to easily read information on webpages, documents, and apps, and it is particularly important for assistive technologies to provide blind, low-vision, and/or colorblind users with the ability to view content effectively.


A good rule of thumb for color contrast is to choose a dark text on light background, or light text on dark background. Additionally, you should avoid using color alone to convey meaning or for particular labels throughout a webpage, document, or app without additional context for why that “color” is important to the reader/user.

How do I check Color Contrast in a Manifold Project?


Manifold gives you the option to author within the platform as well as ingest pre-authored content from sources like Word Documents or Google Docs. This guide will go over how to implement alt text appropriately both in your own Docs and within the Manifold Editor.

How to check Color Contrast in a Word Doc or Google Doc


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?


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 unless it is enlarged and bolded.


screenshot of webaim contrast checker showing results for a test.


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

Is this text accessible?


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


screenshot of webaim contrast checker showing results for a test


Make sure that you test any foreground and background color combinations you use in your Word Doc or Google Doc with the WebAIM Contrast Checker (or other tool) so that you can properly remediate them before ingesting your document into Manifold.

How to check Color Contrast in the Manifold Editor


Currently, there is no specific way to check for Color Contrast within the Manifold Editor. If you are authoring in the Manifold Editor, you’ll need to use the same tools to check for Color Contrast that you would as you work in your Word Doc or Google Doc. You can use the WebAIM Contrast Checker by plugging in the color codes you might be using in the Manifold Editor. You can also use a tool called ANDI to run an accessibility check directly inside the Manifold Editor.


screenshot of manifold editor running ANDI contrast checker


One thing to keep in mind is that the Editor defaults to “Dark Mode” which can incorrectly flag contrast errors, so consider switching over to “Light Mode” when running an accessibility check for color contrast.

Checking Your Work


If you ever want to test the Color Contrast in your Project, Accessibility Bookmarklets, ANDI, and the WAVE browser extensions are good tools.



“OEN Manifold Community Guide: Color Contrast” is licensed under a CC BY NC 4.0 license. Last updated May 2025. It is adapted from “Color Contrast” By Elliott Stevens at University of Washington and licensed under a CC BY NC 4.0 license.


Accessibility in Manifold
Powered by Manifold Scholarship. Learn more at
Opens in new tab or windowmanifoldapp.org
Manifold uses cookies

We use cookies to analyze our traffic. Please decide if you are willing to accept cookies from our website. You can change this setting anytime in Privacy Settings.