WCAG Color Contrast Explained: What 4.5:1 Actually Means

Light grey text on a white background looks elegant in a mockup and becomes unreadable on a sunny day or for anyone with low vision. The good news is that “readable enough” isn’t a judgment call — it’s a number you can measure. The Web Content Accessibility Guidelines (WCAG) define exact contrast ratios, and hitting them is one of the easiest, highest-impact accessibility wins available.

What “contrast ratio” actually measures

Contrast ratio compares the relative luminance (perceived brightness) of two colors — your text and its background. It’s expressed as a ratio from 1:1 (identical, invisible) to 21:1 (pure black on pure white, maximum).

The math isn’t intuitive — it’s not simply “how different the colors look.” It’s based on luminance, weighted for how human eyes perceive red, green and blue differently. That’s why two color pairs that feel similarly different can have very different ratios, and why eyeballing it fails. You need to measure. Drop any two colors into the color contrast checker and it computes the ratio for you, instantly.

The thresholds you need to know

WCAG defines two conformance levels, AA and AAA, with different requirements depending on text size:

AA — normal text: 4.5:1. This is the baseline most of the web aims for and what accessibility audits and legislation typically require.
AA — large text: 3:1. “Large” means roughly 18pt (24px) regular, or 14pt (18.5px) bold. Bigger text is easier to read, so it gets a gentler threshold.
AAA — normal text: 7:1. A stricter level for contexts where accessibility is paramount.
AAA — large text: 4.5:1.
Non-text (UI components, icons, form borders): 3:1. Often forgotten — your input outlines and button borders need contrast too.

So that fashionable light-grey-on-white body text? If it lands at 2.8:1, it fails AA outright. Bumping the grey just a few shades darker can push it over 4.5:1 with no visible loss of style.

A quick worked example

Say your brand uses #777777 grey text on a white #FFFFFF background.

Measured contrast: about 4.48:1 — just barely failing AA for normal text.
Darken it to #767676: about 4.54:1 — now it passes.

The difference is imperceptible to the eye but flips a failing audit to passing. This is the kind of micro-adjustment the color contrast checker makes obvious — it tells you not just the ratio but exactly which levels pass and fail.

Fixing a failing pair without wrecking your design

When a combination fails, you have a few moves, in rough order of least to most disruptive:

Darken the text (or lighten the background) slightly. Usually the smallest change. A nudge of a few percent in lightness often clears the threshold.
Increase the font size or weight. Bumping body text into “large” territory drops your target from 4.5:1 to 3:1.
Pick a different shade from the same hue family so the brand still feels consistent. The color converter lets you move between HEX, RGB and HSL — adjusting the L in HSL is the cleanest way to darken a color while keeping its hue.
Rethink the pairing. If two brand colors simply can’t meet contrast, reserve one for large headings or decorative use only.

If you’re building a whole scheme, it helps to design with contrast in mind from the start. The color palette generator is a good place to assemble a set, and you can run each text/background combination through the contrast checker before committing.

Common mistakes that fail audits

Placeholder text in form fields is notoriously low-contrast by default. It still has to meet the ratio if users are meant to read it.
Text over images or gradients — the contrast varies across the image. You need a solid overlay or text shadow to guarantee a consistent ratio.
Disabled controls are exempt from contrast minimums, but don’t use “disabled-looking” styling for content that’s actually meant to be read.
Hover and focus states must stay accessible too, not just the default state.

Why measure locally

Color values are harmless to share, but there’s no reason to round-trip them to a server just to do a luminance calculation your browser can do instantly. The color contrast checker, converter and palette generator all run entirely in your browser — nothing is uploaded, and they work even offline.

The bottom line

Accessible contrast is the rare design constraint that’s fully objective: pick your two colors, measure, and aim for at least 4.5:1 for body text (3:1 for large text and UI elements). It’s a five-second check that makes your work readable for people with low vision, on cheap screens, and in bright sunlight — which, eventually, is everyone. Measure first, adjust by a few shades, and ship colors that actually work.