What is the minimum acceptable color contrast ratio according to WCAG?

The Web Content Accessibility Guidelines (WCAG) specify minimum acceptable color contrast ratios to ensure that text and user interface elements are readable and distinguishable for users with visual impairments. Here are the key ratios:

### 1. **Contrast Ratio for Text and Background**

#### **1.1. Normal Text**
- **Minimum Ratio:** **4.5:1**
- This applies to standard text that is less than 18pt (24px) or not bold. For text to be legible, it needs to have a contrast ratio of at least 4.5:1 against its background.

#### **1.2. Large Text**
- **Minimum Ratio:** **3:1**
- This applies to text that is 18pt (24px) or larger, or text that is bold and at least 14pt (18.66px). Larger or bold text requires a lower contrast ratio to be readable compared to normal text.

### 2. **Contrast Ratio for User Interface Components and Graphics**

#### **2.1. User Interface Components**
- **Minimum Ratio:** **3:1**
- This applies to the contrast between the foreground and background of user interface components like buttons, form fields, and other interactive elements.

#### **2.2. Graphics and Icons**
- **Minimum Ratio:** **3:1**
- This applies to graphical elements and icons that are part of the user interface, ensuring they are distinguishable from their backgrounds.

### 3. **Enhanced Contrast Requirements (Optional for Higher Accessibility)**

#### **3.1. Normal Text**
- **Enhanced Ratio:** **7:1**
- This is an optional criterion (1.4.6 – Contrast (Enhanced)) for users who require higher contrast. It provides a higher level of accessibility for users with severe visual impairments.

#### **3.2. Large Text**
- **Enhanced Ratio:** **4.5:1**
- For large text, the enhanced ratio remains the same as the standard ratio in the optional criterion, providing improved readability.

### 4. **Contrast Checking**

To ensure compliance with these ratios, use contrast checker tools like:

- **WebAIM Contrast Checker:** https://webaim.org/resources/contrastchecker/
- **Color Contrast Analyzer by TPGi:** https://www.tpgi.com/color-contrast-checker/
- **Axe Accessibility Checker:** Available as a browser extension for real-time testing.

By adhering to these minimum contrast ratios, you can create web content that is more accessible and inclusive, ensuring that users with varying visual abilities can interact with and understand your content effectively.