Color Contrast and How to Check It

When designing a document or webpage, choosing a color scheme is an important first step. Beyond branding and aesthetics, we want to ensure that our color choices do not prevent low-vision and colorblind users from fully understanding our content.

To comply with Binghamton University’s Accessibility Policy, as well as with all laws and standards regarding accessibility, a minimum color contrast must be met in digital content, including webpages, documents, and Brightspace courses.

Color Contrast Ratio

Color contrast is expressed as a ratio, representing the difference in brightness between the foreground text and the background color. White on white has a ratio of 1:1. Black on white has a ratio of 21:1. All other color combinations fall somewhere in between.

Text size and bolding obviously have an effect on readability. Headings, which tend to be larger than body text, therefore have more flexibility in color choice compared to smaller text. We must also ensure that user interface components like menus and buttons also have a high color contrast, as well as any image with text in it.

The minimum color contrast ratio needed for a document or website to be considered accessible is set by the WCAG (Web Content Accessibility Guidelines) as detailed in Table 1.

Table 1 Color Contrast Ratios for Accessibility
  Minimum Ratio (level AA) Enhanced Ratio (level AAA)
Small Text (up to 18 pt or 14 pt bold) At least 4.5:1 At least 7:1
Large Text (18 pt, 14 pt bold or larger) At least 3:1 At least 4.5:1


Table 2 High Contrast Color Combinations
  Contrast Ratio Level AA Small Text Level AA Large Text Level AAA Small Text Level AAA Large Text
White (#FFFFFF) on Purple (#7030A0) 8:1 Pass Pass Pass Pass
Black (#000000) on Light Green (#92D050) 11.4:1 Pass Pass Pass Pass
Light Gray (#E7E6E6) on Dark Blue(#002060) 12.3:1 Pass Pass Pass Pass
Table 3 Medium Contrast Color Combinations
  Contrast Ratio Level AA Small Text Level AA Large Text Level AAA Small Text Level AAA Large Text
White (#FFFFFF) on Blue (#0070C0) 5.1:1 Pass Pass  Fail Pass
Black (#000000) on Red (#FF0000) 5.3:1 Pass Pass  Fail Pass
Gray (#BFBFBF) on Dark Gray (#333131) 7:1 Pass Pass Pass Pass
Table 4 Low Contrast Color Combinations
  Contrast Ratio Level AA Small Text Level AA Large Text Level AAA Small Text Level AAA Large Text
Green (#6CC24A) on White (#FFFFFF) 2.2:1 Fail Fail  Fail Fail
Red (#FF0000) on White (#FFFFFF) 4:1 Fail Pass Fail Fail
Blue (#0070C0) on Black (#000000) 4.1:1 Fail Pass Fail Fail

Tools to Check Color Contrast:

Don’t worry! You don’t have to eyeball your colors and take a guess on whether they pass the minimum contrast ratio. There are a number of tools to help you choose high contrast color combinations in your documents and pages.

Accessibility checkers native to common software and apps

Microsoft Word and PowerPoint will tell you if any colors in your document fail the minimum contrast ratio.

 MS Word Review menu and ribbon highlighting the accessibility checker

Similarly, D2L Brightspace has an accessibility checker that will flag any contrast errors.

partial screenshot of the Brightspace page editor with the accessibility checker highlighted

The Modern Campus / Omni CMS also has an accessibility checker for any webpage you have edit rights for. You must first "check out" the page using the lightbulb icon. Then select the "More Actions" meatball menu and choose "Page Check" from the options. This will open a new dialog where you can run checks for spelling, dead links, and accessibility issues.

In the Omni CMS page editor, the accessibility checker can be reached through the More Options menu.

Other Color Contrast Checkers

Some of these tools require that you know the hexadecimal format of the color, while others include an eyedropper feature to extract the hex number for you. A checker with an eyedropper tool is especially important when your background isn’t a solid color, like a gradient or an image. Use an eyedropper tool in multiple spots to confirm that all of your text is readable.

WebAIM Contrast Checker

Depending on what browser you use, this could be the only tool you need. In Chrome and Edge, there is an eyedropper; click anywhere in the “color picker” bar to reach it. (The eyedropper tool is missing in Firefox.)

screenshot of how to reach the eyedropper tool on the WebAim color contrast checker

Either use the eyedropper tool, or enter your background and foreground hex numbers. The WebAIM Contrast checker will tell you the contrast ratio, plus whether it passes or fails the AA minimum and AAA enhanced standards.

TPGi's Colour Contrast Analyser (CCA)

CCA is another excellent tool. You must download and install it from the TPGi website. It also features an eyedropper and will tell you the contrast ratio and the pass/fail status of any color combination.

Video Tutorial


ColorZilla is a popular browser extension for Chrome and Firefox. It allows you to use an eyedropper to extract the hex numbers on any webpage.

Brandwood Background Image Contrast Checker

The Brandwood Checker can help when you’re designing a webpage, document, or presentation that uses text over a background image or gradient. Upload your image, choose a text color, and move the text around the image. The checker will tell you if your text passes or fails.

the Brandwood image background contrast checker

Eightshapes Contrast Grid

This tool is great for designing a color scheme. Put in many hex colors and see how all combinations pass/fail the contrast ratio minimums.

As an example, here is a contrast grid using Binghamton’s brand colors.

the Eightshapes Contrast Grid using Binghamton brand colors

You can explore this specific grid by using the Eightshapes BU brand permalink.

Venngage Accessible Palette Generator

If you don't know what colors to use, or if you know one color for sure, but need complementary colors for your document, the free Venngage Palette Generator can help. You can generate a random palette, or you can generate a palette based on one color you enter. The color contrast ratio will be shown for each color.

the Venngage Accessible Palette Generator


Print Article


Article ID: 13233
Wed 6/12/24 3:45 PM
Wed 7/3/24 11:11 AM

Related Articles (3)

Best practices for accessible links, including link text, style, new windows and files, and images as links.
Learn why and how to write good alt text for your images. See examples of decorative and complex image alt text. See steps for adding alt text in various apps and software.
High-level accessibility requirements at a glance, with links to further information on each topic.

Related Services / Offerings (1)