Contrast

Updated May 12, 2026

Overview

Set the contrast ratio for body text, button labels, and link text to at least 4.5:1 against their background. Unless the text size is over 18 point, or 14 point and bold, where a different ratio applies.
Set the contrast ratio for icons to at least 3:1 against their background.
Set the contrast ratio for text input borders to at least 3:1 against their background.

Warning

There is no text contrast requirement for inactive elements. There is no contrast ratio requirement for disabled or read-only elements, such as a button component, text input component, or link component. The focus state for a button, text input, and link uses a border so they don't need a contrast of 3:1 compared to a non-focus state or background.

Resources

WebAIM contrast checker
WCAG Color contrast checker
WCAG 2.1 Understanding success criterion 1.4.3: Contrast
WCAG 2.1 Understanding success criterion 1.4.11: Non-text contrast

Date	Change
September 2024	Copied information from Accessibility hub.