Skip to main content
U.S. flag

An official website of the United States government

Official websites use .gov
A .gov website belongs to an official government organization in the United States.

Secure .gov websites use HTTPS
A lock ( ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

Color and contrast

Is there enough contrast between text and its background color?

Why it’s important: Esther has low vision and needs content to have enough contrast to read it.

Steps to take

  • Provide good contrast. Make sure the contrast between the text and background is greater than or equal to 4.5:1 for small text and 3:1 for large text.
  • Exceptions:
    • Color contrast ratio requirements apply to text and graphics that are essential for understanding the content or functionality. You don’t need to meet color contrast requirements for logos or incidental graphic elements.
    • Text that is part of a disabled control’s state or disabled buttons does not need to meet the minimum contrast ratio.
    • Text that is part of a logo has no minimum contrast requirement.
  • Slightly temper the contrast between your text and background color. For example: don’t use pure black text on a pure white background. Stark contrast can result in blurred or moving text for people with Irlen syndrome.
  • To use text over images, add a solid background behind the text or a dark overlay to the image.


Video tutorial: Meeting contrast requirements
Video tutorial: How I do an accessibility check (contrast)

WCAG 2.0 references

Can you still understand everything the design is communicating without depending on color?

Why it’s important: Joel is red-green colorblind and can’t reliably make sense of information conveyed with color alone.

Steps to take

  • Don’t use color alone to convey meaning. Use icons, written content, and other visual elements to reinforce clear communication of the content.
  • Test what it’s like to view your designs through a color blindness simulator.

WCAG 2.0 references

1.4.1 Use of Color


Contact: Questions or comments? Please file a GitHub issue or email