Skip to Content

Test should always have high contrast against its background, not only in terms of color but in lightness versus darkness. Keeping in mind that many people have color vision deficiencies:

  • Don’t change the color of text, instead allowing the site-wide (or document) style sheet to style a page that is properly formatted (such as heading usage).
  • Ensure that information that is conveyed by color differences is also available in text, (for example in tables), or that visual patterns are included to convey the same information in a manner that does not depend on color.

Accessibility References

G14: Ensuring that information conveyed by color differences is also available in text
G111: Using color and pattern
G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text

Contrast Checker - WebAIM