Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

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.

Resources

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

Next