Why WCAG Contrast Ratios Matter: Readability in Digital Collections

Why WCAG Contrast Ratios Matter: Readability in Digital Collections

October 07, 2025
Why WCAG Contrast Ratios Matter: Readability in Digital Collections
4:17

Poor text contrast is one of the most common accessibility failures, making online collections harder to read and use. This guide explains WCAG 2.2 requirements for text contrast, highlights practical tips for color choices, and shares tools you can use to test compliance.

fotos-n06DMN6bgdU-unsplash

Libraries, universities, and cultural heritage organizations have an unwavering commitment to providing equitable access to knowledge and history. Digitized newspaper collections and historic archives are central to this mission. However, when these resources aren’t easy for everyone to read and use, they fall short of their full potential. That’s where the Web Content Accessibility Guidelines (WCAG) and related standards come in.

Quick summary of WCAG standards

WCAG 2.2 is the latest version of the international Web Content Accessibility Guidelines, with Level AA being the conformance level most often required. It sets clear criteria—for example, minimum color contrast ratios (covered below), text alternatives for images, and adaptable layouts.

However, most regulations, including the U.S. Department of Justice rule (April 2024), still reference WCAG 2.1 Level AA as the minimum legal standard. Likewise, private universities and other organizations receiving federal funding are expected to comply under Section 504 of the Rehabilitation Act, with WCAG 2.1 Level AA widely recognized as the benchmark.

Text size and contrast ratios

Poor text contrast is one of the most common accessibility failures, directly impacting the readability and usability of online collections and archives. The good news is that contrast requirements did not change between WCAG 2.1 and 2.2. 

The required contrast ratios depend on the text size. 

Normal text

Normal sized text is deemed to be smaller than 18pt (non-bold) or 14pt (bold) / 24px (non-bold) or 18.5px (bold). 

Large text

Large sized text is defined as 18pt (non-bold) or 14pt (bold) / 24px (non-bold) or 18.5px (bold) or larger.

WCAG 2.2 Level AA contrast requirements

  Normal Text Large Text
Contrast Ratio 4.5 : 1 3 : 1


It’s worth noting that some text is exempt from these contrast standards—for example, decorative text such as logos, inactive controls like a greyed-out submit button, and text that appears within an image of historical content (e.g. scanned newspaper pages, which are instead made accessible through OCR or alt text).

How to check WCAG AA contrast ratios

There are a number of free tools available to help you check whether your designs meet WCAG 2.2 Level AA contrast requirements. 

Three convenient, web-based tools that are intuitive to use include:

Below are some examples of color combinations from within the GLAM showcasing how easy it is to fall short of accessibility standards.

 

Practical tips for color and contrast

When designing or customizing a platform to host your digital collection or archive:

  • Don’t rely on color alone. Use text size, weight, and other visual cues to convey structure and information.
  • Check contrast early and often with one of the tools listed above.
  • Be careful with light tones. Pale grays, pastels on white, and mid-tones against similar hues almost always fail.
  • Use overlays to improve readability. For example, add a semi-transparent dark layer behind text on images or gradients.
  • Avoid orange for small text. It’s one of the hardest colors to contrast at normal font sizes.
  • Steer clear of red/green combinations. Common forms of color blindness make these indistinguishable.
  • Be careful with blue/yellow combinations. They can produce low contrast in certain shades and can be difficult for users with tritanopia (blue-yellow color blindness) to distinguish.


Veridian’s approach

Veridian’s default design is built to meet WCAG 2.2 Level AA text contrast requirements. Many libraries, however, choose to customize their UI colors to better reflect their brand identity. We support this flexibility while also providing guidance to help ensure that chosen palettes balance brand expression with accessibility best practices—so all readers can fully engage with and experience their collections.

 

For more information on Veridian and web accessibility standards please contact us.

 

Related reading