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.
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.
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.