WCAG - contrast requirements

Source: Dev.to

Definitions

• Normal Text: Less than 24 px or less than 18.7 px if bold.
• Large-Scale Text: At least 24 px or at least 18.7 px with bold weight (typically 700+).

Rules

• Normal Text & Images of Text: Minimum contrast ratio of 4.5:1.
• Large-Scale Text & Images of Large-Scale Text: Minimum contrast ratio of 3:1.
• User Interface Components & Graphical Objects: Minimum contrast ratio of 3:1. This includes:
  • Icons: Meaningful icons
  • Buttons: The visual boundaries (states) of the button.
  • Form Input Borders: Visual boundaries of text inputs, radio buttons, and checkboxes.
  • Focus Indicators: The “outline” that appears when navigating via keyboard.

Exceptions

The following elements do not have to meet contrast requirements:

• Logotypes: Text that is part of a logo or brand name.
• Incidental/Decorative Text: Text used for pure decoration.
• Inactive Elements: Disabled buttons or form fields.

Tools

• WebAIM Contrast Checker
• TPGi Colour Contrast Analyser (CCA)
• Leonardo Color

Reference

• 1.4.3 Contrast
• 1.4.11 Non-text Contrast