Color Contrast Basics for Web Designers

Color contrast is one of the most fundamental principles in web design, and one of the most frequently violated. The combination of "it looks fine to me on my calibrated monitor" with no accessible checking workflow means that a huge portion of live web products fail basic readability requirements for a significant percentage of their users.

The Most Common Color Contrast Mistakes

• Using light grey (#999999 or similar) as body text on white, this is the single most common failure. #999999 on white achieves only 2.85:1, dramatically below WCAG AA.
• Using a vivid brand color (e.g., blue-500 #3B82F6) as text on white. Most vivid brand colors in the 400–600 range fail 4.5:1 on white.
• Placeholder text in inputs, placeholder text is often 40–60% opacity, which almost always fails WCAG.
• Link colors without underlines, relying on color alone (not underline) to identify links fails WCAG 1.4.1 for users who cannot distinguish colors.

The Fast Path to Contrast Compliance

The fastest way to get a compliant color system is to start with text colors in the 600–900 range of your neutral grey scale and backgrounds in the 50–100 range. Tailwind's slate-700 (#334155) on slate-50 (#F8FAFC) achieves 8.6:1, excellent contrast with a sophisticated, non-harsh appearance.

For brand color text, always check the Contrast Checker before using a brand color as body text. If it fails, use a darker variant from the tint-shade scale. Your vivid brand color should be reserved for large elements (buttons, decorative lines, icons) where the 3:1 large-element standard applies, not for small body text.

Contrast for Interactive Elements

Interactive elements, buttons, links, form inputs, have their own contrast requirements under WCAG 2.1. The button's border or background must achieve 3:1 contrast against the surrounding page background. This is a separate requirement from the text inside the button, which must achieve 4.5:1 against the button's background.

Ghost buttons (transparent fill, colored border) are particularly prone to failing this requirement. A thin ghost button border in a mid-saturation brand color on a white background often falls below 3:1. Use the Contrast Checker to verify both the border contrast and the label text contrast for every button variant.