Contrast & Color

Find colors that provide maximum contrast, including enough contrast between content and the background, so that text and non-decorative images are legible for anyone with low vision or color deficiencies.

Best Practices

  • Ratio: Text and interactive elements should have a color contrast ratio of at least 4.5:1.
  • Color as indicator: Color should not be the only indicator for interactive elements. For example, underline links on hover, or mark a required field with an asterisk.
  • Color blindness: Red/green color blindness is the most common, so avoid green on red or red on green. (Think especially about avoiding using red and green for “bad” and “good” indicators).

Live Example

From the US Standards Website::

“WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device. To meet these standards, text and interactive elements should have a color contrast ratio of at least 4.5:1. This ensures that viewers who cannot see the full color spectrum are able to read the text.”

“The options below offer color palette combinations that fall within the range of Section 508 compliant foreground/background color contrast ratios.”

Colors on a white background

#112e51 on #ffffff
#205493 on #ffffff
#0071bc on #ffffff
#205493 on #ffffff
#046b99 on #ffffff
#2e8540 on #ffffff
#4c2c92 on #ffffff
#212121 on #ffffff
#323a45 on #ffffff
#5b616b on #ffffff
#494440 on #ffffff
#981b1e on #ffffff
#cd2026 on #ffffff
#e31c3d on #ffffff

Neutrals on a colored background

#ffffff on #212121
#ffffff on #494440
#ffffff on #323a45
#ffffff on #5b616b
#ffffff on #112e51
#ffffff on #205493
#ffffff on #0071bc
#ffffff on #4773aa
#ffffff on #046b99
#212121 on #00a6d2
#212121 on #02bfe7
#ffffff on #2e8540
#212121 on #4aa564
#212121 on #fdb81e
#212121 on #f9c642
#ffffff on #981b1e
#ffffff on #cd2026
#ffffff on #e31c3d
#212121 on #aeb0b5
#212121 on #d6d7d9
#212121 on #e4e2e0
#212121 on #8ba6ca
#212121 on #dce4ef
#212121 on #e1f3f8
#212121 on #94bfa2
#212121 on #e7f4e4
#212121 on #fad980
#212121 on #fff1d2
#212121 on #f9dede

Tools & Resources

Articles & Guides

Testing Tools