Wcag Accessibility Guidelines

---
title: WCAG Accessibility Guidelines for UI Design
source_url: Multiple (W3C, WebAIM, MDN)
category: ux
tags: accessibility, WCAG, contrast, a11y, inclusive-design, compliance
relevant_agents: builder, brainstorm, checker, legal
fetched_date: 2026-02-04
last_updated: 2026-02-04
content_type: reference
difficulty: intermediate
description: Comprehensive guide to WCAG 2.1/2.2 accessibility standards for color contrast, text readability, and inclusive UI design
keywords: WCAG, accessibility, contrast ratio, ADA, Section 508, inclusive design, color blindness
copyright_notice: "Content gathered under fair use for research purposes. See Legal agent for IP questions."
---

> **Attribution:** Research compiled from W3C WCAG 2.1/2.2 guidelines, WebAIM resources, and MDN documentation on 2026-02-04.

# WCAG Accessibility Guidelines for UI Design

## What is WCAG?

**Web Content Accessibility Guidelines (WCAG)** are international standards developed by the W3C (World Wide Web Consortium) to make web content more accessible to people with disabilities.

**Current versions:**
- WCAG 2.0 (2008)
- WCAG 2.1 (2018) - Added mobile and cognitive accessibility
- WCAG 2.2 (2023) - Added focus appearance, dragging movements

---

## Conformance Levels

| Level | Description | Use Case |
|-------|-------------|----------|
| **A** | Minimum | Basic accessibility, rarely sufficient |
| **AA** | Standard | **Legal requirement in most jurisdictions** |
| **AAA** | Enhanced | Best possible, may not be feasible for all content |

**Most laws require Level AA compliance.**

---

## Contrast Requirements

### Text Contrast (Success Criterion 1.4.3)

| Level | Normal Text | Large Text |
|-------|-------------|------------|
| **AA (Minimum)** | 4.5:1 | 3:1 |
| **AAA (Enhanced)** | 7:1 | 4.5:1 |

**Large text definition:**
- 18pt (24px) and above, OR
- 14pt (18.67px) and above if **bold**

### Non-Text Contrast (Success Criterion 1.4.11)

UI components and graphical objects require **3:1** minimum contrast.

**Examples:**
- Form field borders
- Icons conveying information
- Focus indicators
- Charts and graphs

### What Doesn't Require Contrast

**Exceptions:**
- Incidental text (decorative, not meaningful)
- Logotypes (brand text in logos)
- Disabled controls
- Purely decorative elements

---

## Calculating Contrast Ratio

**Formula:**