Color contrast failures are the single most common accessibility violation on the web. WebAIM's annual survey of the top million websites consistently finds that over 80% fail contrast requirements. The good news: contrast fixes are among the easiest to implement.
Understanding contrast ratios
WCAG defines contrast as the luminance ratio between foreground and background colors, expressed as a ratio like 4.5:1. The higher the number, the more readable the text. WCAG 2.2 AA requires 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). AAA pushes this to 7:1 and 4.5:1 respectively.
A contrast ratio of 1:1 means the colors are identical (invisible text). 21:1 is the maximum — pure black on pure white. Most readability problems occur in the 2:1 to 4:1 range: light gray text on white backgrounds, low-saturation colored text, and placeholder text in form inputs.
Common offenders
Placeholder text is the most frequent violator. The default gray (#999 on #fff) has a contrast ratio of only 2.8:1. Disabled button text, subtle captions, footer links, and light-on-light UI elements are other common failures. Trendy design choices like thin light-gray body text may look elegant but fail users who need readable content.
Fixing without redesigning
You rarely need to overhaul your design. Most fixes involve nudging a color value by 10-20% toward the darker end. If your gray text is #999, try #595959 (which passes at 7:1 on white). If your accent color is too light, try a slightly darker shade. Tools like xsbl's AI fix suggestions calculate the minimum adjustment needed to meet the ratio while staying close to your original design intent.
For backgrounds that vary (images, gradients), add a semi-transparent overlay or text shadow to guarantee contrast regardless of what's behind the text.