Definition

What Is WCAG (Web Content Accessibility Guidelines)?

The international standard for web accessibility, published by the W3C, defining guidelines at three conformance levels — A, AA, and AAA — for making websites usable by people with disabilities.

Related Terms

Accessibility (A11y)

Metadata

Colour Palette

UX

HTML

Example

Most enterprise websites target WCAG 2.1 AA compliance, which covers colour contrast ratios, keyboard navigation, screen reader compatibility, and form labelling.

The global population of people with disabilities represents a consumer spending power of over $8 trillion — and websites that fail accessibility standards exclude this audience entirely while also facing increasing legal risk under ADA, EN 301 549, and the UK Equality Act.

Synonyms:

Web Content Accessibility Guidelines

Acronyms:

WCAG

What it applies to

Every public-facing website. WCAG 2.1 Level AA is the most widely required compliance level — mandated by law for government websites, public sector organisations, and increasingly for commercial websites in the EU, US, and UK.

The four WCAG principles (POUR)

  • Perceivable: All information must be presentable in ways all users can perceive. Key requirements: alt text for images, captions for video, sufficient colour contrast (4.5:1 for normal text, 3:1 for large text), no information conveyed by colour alone.
  • Operable: All functionality must be operable without a mouse. Key requirements: full keyboard navigation, no keyboard traps, skip navigation links, no content that flashes more than 3 times per second.
  • Understandable: Content and interfaces must be understandable. Key requirements: language of page declared in HTML, consistent navigation, clear error messages that explain how to fix the problem.
  • Robust: Content must be interpretable by current and future user agents including assistive technologies. Key requirements: valid HTML, ARIA attributes used correctly, status messages programmatically determinable.

How to audit and fix WCAG issues

  • Run Google Lighthouse accessibility audit (Chrome DevTools → Lighthouse) — scores out of 100, with specific failing elements identified.
  • Install axe DevTools browser extension for a more comprehensive, annotated audit with fix guidance.
  • Test with a screen reader: VoiceOver (Mac/iOS) or NVDA (Windows) — tab through the page and verify all content is accessible and navigable.
  • Use WebAIM's Contrast Checker to verify every text/background combination meets the 4.5:1 minimum ratio.

In Webflow

Webflow outputs semantic HTML that provides a good accessibility baseline. Key actions: fill in alt text for every image, add ARIA labels to icon buttons, ensure focus styles are visible (Webflow strips browser defaults — add :focus-visible styles to interactive elements), and set the language attribute on the <html> element via Project Settings → Custom Code.

WCAG: Common Questions Answered

Question

Answer