Is My Website Readable Enough? Contrast Ratio Guide

If your website's body text doesn't have a contrast ratio of at least 4.5:1 against its background, most people will struggle to read it. This affects not just visually impaired users but anyone checking your site on a mobile device outdoors, older readers, and people with cognitive conditions that impact focus.

What does a contrast ratio actually mean?

Contrast is a measure of brightness. When the color contrast is a ratio of 4.5:1, it means one color is 4.5 times brighter than the other color (louisville.edu). The scale runs from 1:1 (no contrast, like white text on white) to 21:1 (black on white, the maximum possible).

A 4.5:1 contrast ratio is the WCAG Level AA minimum for normal text (webability.io), and large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger (brand.ucla.edu). Large text only needs to meet 3:1 because the increased size makes it easier to distinguish at lower contrast levels.

The Web Content Accessibility Guidelines set these thresholds based on the contrast sensitivity loss experienced by people with vision equivalent to 20/40. The contrast ratio of 4.5:1 was chosen for level AA because it compensated for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/40 vision. So a user with 20/40 vision would require a contrast ratio of '3 x 1.5 = 4.5' (getstark.co).

Who struggles with low contrast beyond the visually impaired?

Not only low-vision users are affected: cognitive conditions that impact short-term memory and ability to maintain attentional focus also make using hard-to-see text extremely difficult (nngroup.com). The people who complain about your light-gray-on-white footer text are not all legally blind.

That affects, for example: people with low vision, people who use low-quality screens, people who use a screen in bright environments (e.g., sunlight) (inaccessible.gallery). Contrast issues are amplified on mobile, outdoors, and for older users or those with color-vision deficiencies (adacompliancepros.com). If someone opens your site on their phone while standing outside, even high-contrast text becomes harder to read. Low contrast makes it nearly impossible.

Among the most common visual problems older people experience is low contrast sensitivity. Age reduces everyone's ability to distinguish subtle differences in brightness, which means the gray text you can read easily at 28 may genuinely vanish for someone at 58.

Why does everyone use light gray text on white backgrounds?

Lured by the trend of minimalism, sites are abandoning their high-contrast traditions and switching to the Dark Side (or should I say, the Medium-Gray Side). For sites willing to sacrifice readability for design prowess, low-contrast text has become a predictable choice, with predictable, persistent usability flaws.

Low contrast text is the most common accessibility error, appearing on 81% of home pages according to the WebAIM Million. The habit persists because it looks modern in design tools, where you're viewing the mockup on a calibrated monitor in a controlled environment. It breaks down the moment real users access the site on a cheap laptop screen or while walking down the street.

The design argument for light gray is that pure black feels harsh. High color contrast is useful for readability. Too high of color contrast, however, creates a significant disparity in light levels that affect the user's eyes when they read. But the solution is not to drop the contrast below 4.5:1. Use a very dark gray (like number 333333) instead of pure black, or use an off-white background instead of pure white. Both strategies maintain readability while softening the visual impact.

How to check your own site right now

You do not need to guess. Run the free AI-visibility check (/check) to see which pages on your site fail the contrast threshold. The accessibility category includes contrast violations alongside the other common barriers that prevent people from reading your content.

If you want to test a specific color pairing, tools like the WebAIM Contrast Checker show you the exact ratio and whether it passes or fails. Enter your text color and background color as hex codes, and the tool calculates the ratio instantly.

For an operational perspective, low contrast is a security signal in the same way broken TLS is. It tells search engines and AI assistants that the site has not been maintained to current standards. Google's perspective: Accessibility is a quality signal for search rankings. Core Web Vitals include visual stability (contrast affects readability). Fixing contrast ratios across the site takes a few hours if you document the approved color combinations and enforce them in your CSS variables. Leaving it broken costs you traffic every month.

If you manage client sites or run an agency, ActiScore's pricing (/pricing) includes automated accessibility audits on every scan, with contrast violations flagged by location. The same scan that checks SPF and DMARC records also measures whether your client's footer text meets 4.5:1, so you catch the issue before their visitors complain.

Most small-business sites fail contrast on at least one element, usually form placeholders, disabled buttons, or footer links. The pattern is always the same: someone picked a color that looked fine in Figma and never tested it against the actual background in production. Before you publish any design change, paste the hex codes into a contrast checker. If the ratio reads below 4.5:1 for normal text or 3:1 for large text, adjust the lighter color darker or the darker color lighter until it passes. The math is unambiguous, and the tools are free. Refer to the guide (/guide) for step-by-step instructions on interpreting the full accessibility audit and prioritizing fixes that affect the most users.