Color contrast

Overview

WCAG 2.1 defines contrast requirements at multiple levels:

• AA Level: 4.5:1 for normal text, 3:1 for large text (18pt+)
• AAA Level: 7:1 for normal text, 4.5:1 for large text (18pt+)

UGA is committed to meeting AA minimum contrast standards as a baseline, with AAA contrast encouraged whenever possible. This ensures that our content is accessible to as many users as possible.

Why this matters

Sufficient color contrast is essential for readability. Users with low vision need strong contrast between text and background colors to read content comfortably. Color vision deficiency, commonly known as color blindness, affects approximately 1 in 12 men and 1 in 200 women. Additionally, people viewing screens in bright environments or on lower-quality devices depend on adequate contrast to see text clearly. Even users with typical vision benefit from high-contrast designs when reading for extended periods or when viewing screens at angles or distances.

UGA Brand Colors and Contrast

UGA uses specific brand colors that must meet accessibility standards. The Bulldog Red (#BA0C2F) and Black (#000000) color combination meets AA contrast requirements on white backgrounds. When using UGA brand colors, always verify contrast ratios with the tools and techniques described below.

Tools and Techniques

WebAIM Color Contrast Checker

The WebAIM Color Contrast Checker is a free, browser-based tool that allows you to check contrast ratios between any two colors. Enter hex values for foreground and background colors, and the tool immediately displays the contrast ratio with a Pass/Fail rating for AA and AAA standards.

• Provides immediate feedback on contrast ratios
• Includes an interactive slider to adjust colors until they meet standards
• Contrast checking functionality is also built into the WAVE browser extension

Deque Color Contrast Analyzer

The Deque Color Contrast Analyzer offers similar functionality to WebAIM with additional features for analyzing contrast in complex designs. It allows you to enter color values and shows Pass/Fail ratings along with suggestions for adjusting colors to meet accessibility standards.

• Comprehensive contrast analysis with detailed reporting
• Tool tips and guidance for improving contrast
• Supports various color formats (hex, RGB, named colors)

TPGi Colour Contrast Analyser

The TPGi Colour Contrast Analyser is a downloadable application available for Windows and Mac. This tool includes an eyedropper feature that allows you to select colors directly from anywhere on your screen, making it ideal for checking contrast in existing designs and live websites.

• Downloadable desktop application for Windows and Mac
• Built-in eyedropper tool to sample colors from any screen location
• Useful for auditing existing digital content and websites

Color Contrast for Specific Platforms

Microsoft Word

Microsoft Word includes accessibility checking tools that can identify low contrast text. When checking a Word document for accessibility, look for warnings about low contrast in the Accessibility Checker panel. For detailed guidance on using Word’s accessibility tools, consult Microsoft’s documentation.

PDF Documents

Adobe Acrobat includes a built-in contrast checker, but it typically only warns for issues and suggests manual review rather than providing detailed contrast measurements. The best practice is to check and verify color contrast in your authoring software (such as Word or InDesign) before exporting to PDF format.

eLC (D2L / Brightspace)

The default styles in eLC (UGA’s learning management system based on D2L/Brightspace) are designed with ample contrast for readability. However, if you use custom colors in your course, you must verify that they meet accessibility standards. The Anthology Ally tool in eLC can help identify contrast issues in your course content. If you have questions about eLC accessibility, contact the Center for Teaching and Learning or the EITS Help Desk.

Google Docs and Google Slides

Google Docs and Slides do not have built-in color contrast checkers. To ensure contrast compliance, use external tools like the WebAIM Color Contrast Checker or TPGi Colour Contrast Analyser to verify your color choices before applying them to your documents.

Common mistakes

When designing with color and contrast, avoid these common accessibility issues:

• Light gray text on white backgrounds: Many designers use light gray (#999999 or lighter) for secondary text, which often fails contrast requirements. Test all text combinations before finalizing designs.
• Insufficient contrast in links: Links that differ from surrounding text only by color may be impossible to identify for users with color blindness. Links must have sufficient contrast with surrounding text or be underlined.
• Not checking contrast of text over images: Text placed over images must meet contrast requirements against the image background, not just on solid colors. Test with the actual images being used.
• Ignoring contrast for disabled or inactive elements: Disabled form fields, inactive buttons, and grayed-out text often fail contrast requirements but are still visible and must be readable.
• Using color alone to convey information: Do not rely on color as the only way to communicate meaning. For example, instead of “required fields in red,” use red color plus an asterisk or label.
• Not testing in grayscale: Checking whether your design is still understandable when viewed in grayscale ensures color is not the only means of communication.

WCAG 2.1 Accessibility Criteria

Color contrast is covered by two key WCAG 2.1 standards:

1. Contrast (Minimum) – Level AA (1.4.3): Text and images of text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text).
2. Non-text Contrast – Level AA (1.4.11): User interface components and graphical elements must have a contrast ratio of at least 3:1 against adjacent colors.

Getting help

UGA’s Digital Accessibility Services Hub (DASH) is here to support you. Whether you need guidance on making your content accessible, help troubleshooting an issue, or training for your team, we are ready to help.

• Contact DASH at [email protected] for consultations, training, or technical assistance.
• Visit the DASH training page for resources and learning opportunities.

Accessibility is a shared responsibility, and every step you take makes UGA’s digital environment more inclusive.