Color contrast is the difference in brightness between text and the surface behind it. Too little, and some readers simply cannot make out the words. The Web Content Accessibility Guidelines turn that into a measurable ratio, and meeting it is one of the highest-impact accessibility fixes you can ship.

What the numbers mean

Contrast is expressed as a ratio between 1:1 (no difference) and 21:1 (pure black on pure white). The thresholds are:

  • AA, normal text: at least 4.5:1
  • AA, large text: at least 3:1
  • AAA, normal text: at least 7:1
  • AAA, large text: at least 4.5:1

What counts as large

Large text is roughly 24px and up for regular weight, or about 18.66px and up when bold. Larger letterforms are easier to read, so the bar is lower. Everything else — body copy, captions, labels — is held to the stricter normal-text ratio.

What else the rules cover

Text gets the attention, but WCAG 2.1 also requires 3:1 for non-text elements that convey meaning. That covers a lot of an interface: input borders, focus rings, toggle states, icon-only buttons, and the meaningful parts of a chart.

This is the most commonly missed requirement. A pale gray border on a white input field is a near-universal pattern and a near-universal failure. So is a focus indicator tuned to look elegant on one background and effectively invisible on another.

Deliberately exempt: disabled controls, purely decorative graphics, logos, and text that is part of a photograph. Disabled elements being exempt is an acknowledgement that they are meant to look inactive — not permission to make them illegible.

A quick fixing workflow

When a combination fails, you rarely need to abandon it. Adjusting lightness usually does the job: darken the text or lighten the background a few steps and re-check. Keeping the hue constant preserves your brand while pushing the ratio over the line.

Concretely:

  1. Convert both colors to HSL with the RGB to HSL converter, so the number you need to change is isolated.
  2. Move the text color's lightness away from the background's — darker for dark-on-light, lighter for light-on-dark.
  3. Re-check, and repeat in small steps until you clear the threshold with a little margin.

The shade and tint generators produce these stepped variants directly, so you can try three candidates rather than nudging one value repeatedly.

Two failures you will hit constantly

Brand color as a button with white text. A great many brand colors land between 3:1 and 4.5:1 against white — passing for large text, failing for a normal button label. The fix is to darken the button background, not to change hue. You keep the brand and gain the ratio.

Light gray body text on white. The soft, understated look that fails outright. #999999 on white gives roughly 2.8:1. You need about #767676 to reach 4.5:1. If a design calls for quieter text, get it from size, weight and spacing rather than from washed-out gray.

Contrast is not the whole of accessible color

Passing the ratio does not mean everyone can use your interface. Contrast is calculated purely from luminance, so two colors can sit comfortably above 4.5:1 and still be indistinguishable to someone with a color-vision deficiency — which affects roughly one in twelve men.

The rule that covers this: never let hue alone carry meaning. A red error border needs an icon and a message. A green and red status dot needs two different shapes, or labels. Chart series need direct labelling or patterns, not just color. Every one of those fixes also helps readers who have no deficiency at all.

Paste your foreground and background into the contrast checker to see the live ratio and AA/AAA results, then tune until it passes. Pair it with the color blindness simulator to confirm the pairing also works for readers with color-vision deficiencies.

Check dark mode separately

Contrast is a relationship between two colors, so changing both voids every previous result. A palette validated on white tells you nothing about the same palette on a dark surface.

Expect specific failures rather than random ones: mid-tone grays that worked on white often sit too close to a dark background, subtle borders vanish entirely, and focus rings tuned for a light page become invisible. Our post on designing a dark mode palette covers the adjustments, and the accessible color guide has the full checklist including the luminance formula behind the ratio.