Accessible Color Contrast

• Use high-contrast colors for your content. For example:
  • Dark text on a light background.
  • Light text on a dark background.
• Review your content with an accessibility checker in order to determine if the colors of your text and background have sufficient contrast from each other. Accessibility checkers scan your content and determine if your colors meet the minimum contrast ratio . The contrast ratio is how much the color of the text stands out from its background. The minimum required contrast ratio depends on the size of the text:
  • Paragraph text should have a minimum contrast ratio of 4.5:1.
  • Large text (e.g., headings) should have a minimum contrast ratio of 3:1.

You don't have to remember the minimum contrast ratio numbers because accessibility checkers have those ratios built into their logic.

Tip – Avoid using pastel or neon colors for your text or background.