Definitions
- Normal Text: Less than 24px or less than 18.7px if bold.
- Large-Scale Text: At least 24px or at least 18.7px 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
TPGi Colour Contrast Analyser (CCA)
Reference
