Blog · Accessibility

Color Contrast Best Practices

Practical guidance for creating readable, accessible interfaces — beyond just meeting WCAG minimums.

Published November 15, 2026 · 6 min read

Meeting Minimums Is Not Enough

WCAG AA requires 4.5:1 contrast for body text, but that is a minimum, not a target. Text that barely passes 4.5:1 will still feel "hard to read" to many users — especially on mobile in bright light, on older screens, or for anyone over 40.

Aim higher than the minimum. Professional interfaces target 7:1 or more for body text.

Target 7:1 for Body Text

Body text is the primary content of your page — the paragraphs that people actually read. It should be high contrast:

  • Dark text on light background: aim for 10:1 or higher
  • Light text on dark background: aim for 7:1 or higher

Black on white is 21:1. A near-black (#15243B) on white is 14.32:1. Both are excellent for body text.

Target 4.5:1 for Headings

Headings are larger, so they do not need as much contrast to be readable. But they are still critical — a heading that is hard to read slows the reader down before they reach the body text. Aim for at least 7:1 for headings.

Target 3:1 for Large Display Text

Very large text — display headlines, hero text — is easier to read even at lower contrast. Aim for 4.5:1 for hero text, not just the minimum 3:1.

Avoid Gray Text on White

Medium gray text on white — a common design choice — often fails contrast requirements. "Muted" text like #999999 on white has a contrast of 2.85:1, which fails even AAA Large text.

If you want to visually de-emphasize text, use weight or size instead of color. Or use a darker gray: #757575 passes 4.5:1, #6B6B6B passes 5:1.

Use Tinted Neutrals, Not Pure Grays

Pure gray text (#666666, #999999) looks lifeless. Tinted neutrals — grays with a subtle hue from your brand color — look more intentional and often read more clearly because they maintain consistent temperature with the surrounding interface.

Example: instead of #666666, use #5F6B7A (a slightly blue-tinted gray) for a blue-based interface.

Test Against Real Backgrounds

Text on a tinted background, image or gradient is harder to verify. Always compute contrast against the actual background pixel color, not the "intended" background color.

If text sits on a background image, you need a semi-transparent overlay or a solid backdrop behind the text to guarantee contrast. Even a beautiful photograph can make text unreadable in some regions.

Never Rely on Contrast Alone

Contrast is necessary but not sufficient. Users can still miss information if:

  • Color is the only signal (red = error, green = success)
  • Interactive states are signaled only by color (blue link, no underline)
  • Icons are communicated only by color

Always pair color with a second signal: text, icon, underline, pattern or shape.

Focus on Focus Indicators

Keyboard focus indicators are frequently overlooked but are covered by WCAG 2.2 Success Criterion 2.4.11 (Focus Appearance). They must have:

  • At least 2px thickness
  • At least 3:1 contrast against the surrounding background
  • Be visible on all interactive elements

Never remove the browser default focus indicator without providing a stronger one.

Test on Real Devices

Contrast looks different on a bright laptop screen than on a phone in direct sunlight. Test your interfaces in both conditions — the difference is dramatic.

Frequently Asked Questions

Related Resources