Light gray text on a white background can look elegant and minimalist at a glance โ€” and be completely unreadable for users with visual impairments, strong sunlight on the screen, or just ordinary eye strain at the end of a workday. Color contrast is one of the most "technical" criteria in accessibility โ€” there are exact numbers to meet โ€” but it's also one of the easiest to test and fix in advance.

In short โ€” what this guide covers

  1. What ratios WCAG requires
  2. Why large text is allowed less contrast
  3. How to check a contrast ratio in practice
  4. How to choose an accessible color palette in advance

What Ratios WCAG Requires

WCAG defines a contrast ratio as a number between 1:1 (no contrast at all โ€” identical color) and 21:1 (the maximum possible contrast โ€” pure black on pure white). At level AA (the mandatory level in most places, including Israel), the requirement is a ratio of at least 4.5:1 between regular text and the background behind it. At the stricter AAA level, the requirement rises to 7:1.

Why Large Text Is Allowed Less Contrast

Large text stays readable even with lower contrast, so WCAG sets it an easier threshold: 3:1 at level AA (instead of 4.5:1), and 4.5:1 at level AAA (instead of 7:1). "Large text" is defined as text 18 points or larger (about 24px), or 14 points or larger (about 18.7px) if it's bold. Large headings, for example, can "afford" slightly lower contrast than a regular body paragraph and still meet the requirement.

Illustrative diagram Comparing contrast ratios Three text-on-background examples with different contrast ratios Contrast Ratio Between Text and Background Sample text 1.8:1 โ€” โœ• fails Sample text 7.1:1 โ€” โœ“ meets AAA too Sample text 5.4:1 โ€” โœ“ meets level AA Regular text: at least 4.5:1 ยท Large text (24px+, or 18.7px bold): at least 3:1 Tools like the WebAIM Contrast Checker give you the exact ratio before you finalize a color palette
Three text-on-background examples: too low a ratio (1.8:1) fails even the basic level; the other two ratios meet the AA and AAA requirements, respectively.

How to Check a Contrast Ratio in Practice

There's no need to calculate it manually โ€” free tools like the WebAIM Contrast Checker let you enter the text and background color codes and immediately get the exact ratio and a pass/fail score for each level. It's worth checking not just text on a solid background, but also text over background images or gradients โ€” where contrast can vary between different areas of the same image, so it's best to test the most "problematic" spot.

๐Ÿ’ก Practical Tip

Not just text: the same contrast requirement (at an easier threshold, 3:1) also applies to graphical UI components like form-field outlines, functional icons, and button borders โ€” not only to letters.

How to Choose an Accessible Color Palette in Advance

The most efficient approach is to check contrast at the template-design stage, not in every document separately. When choosing brand colors for headings, body text, and links, it's worth confirming in advance that every text-background combination you actually use meets at least 4.5:1. This way, every new document created from the template automatically "inherits" proper contrast, instead of checking each document separately after it has already been written.

Want to Know If Your Documents Meet the Contrast Requirements?

Our tool checks color contrast as part of the automatic scan of every PDF file on your site.

Scan your site for free โ†