Color Accessibility: WCAG Contrast Ratios

Visual aesthetics mean nothing if users with low vision or color vision deficiencies (CVD) cannot read the content. The W3C Web Content Accessibility Guidelines (WCAG 2.2) mandate mathematical contrast ratios between text and its background:

Level AA Standards (Mandatory Baseline)

• Normal Body Text (< 18pt or < 14pt bold): Requires a minimum contrast ratio of 4.5:1.
• Large Text (≥ 18pt or ≥ 14pt bold): Requires a minimum contrast ratio of 3:1.
• UI Components and Graphical Objects: Buttons, inputs, and active borders require a minimum of 3:1 against adjacent backgrounds.

Level AAA Standards (Enhanced)

• Normal text requires 7:1; large text requires 4.5:1.

Never rely on color alone to communicate state (e.g., always accompany an error red border with an icon and an explicit text message).