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 |
WCAG establishes three levels of accessibility compliance: A, AA, and AAA. Reaching level AA is required for all digital content at Binghamton; reaching level AAA is desirable but not strictly required.
Strive for the higher AAA level in your content whenever possible.
Examples
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.
Similarly, D2L Brightspace has an accessibility checker that will flag any contrast errors.
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.
Always make it a habit to use these accessibility checkers! Catch accessibility errors before publishing or distributing a document.
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.
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.)
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.
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
Watch a demo on how to use the WebAIM Contrast Checker and the CCA:
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.
Note: ColorZilla does not tell you the contrast ratio or pass/fail status. It is solely a means of harvesting hex colors. Use it in combination with one of the other contrast checkers.
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.
Note: If your image and text combo fails, but you still want to use the image, try a solid color highlight behind the text. It will only block part of your image, and it will meet the minimum contrast required.
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.
You can explore this specific grid by using the Eightshapes BU brand permalink.
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.
