WCAG Perceivable – Principle 1 of the Web Content Accessibility Guidelines

WCAG Perceivable is the first and most foundational of the four principles of the Web Content Accessibility Guidelines. It establishes that all information and user interface components must be presented in ways that users can actually perceive – regardless of whether they can see, hear, or use those senses only to a limited degree. Content that is conveyed exclusively through visual or auditory channels is simply not accessible to a significant proportion of people.

The Perceivable principle does not stand in isolation: it is the first of the four WCAG principles summarised under the acronym POUR – Perceivable, Operable, Understandable, Robust. Perceivability is the prerequisite for all further requirements: what a user cannot perceive, they can neither operate nor understand. A comprehensive introduction to the overall framework is available on the SiteCockpit insights page for WCAG 2.2.

For organisations running digital products, the Perceivable principle has direct legal implications. Under the European Accessibility Act (EAA) and the German Accessibility Strengthening Act (BFSG), WCAG AA has been a legal requirement for large parts of the digital market since 28 June 2025. All Perceivable success criteria at levels A and AA are therefore the legal minimum – non-compliance can result in legal warnings and fines of up to €100,000.

WCAG Perceivable: The Four Guidelines Explained

The Perceivable principle is structured around four guidelines, each containing several concrete success criteria. Each guideline addresses a different aspect of the central question: can all users perceive this content?

• 1 Guideline 1.1 – Text Alternatives: All non-text content – images, icons, graphics, buttons with icons – requires a text alternative that serves the same purpose. Screen readers and other assistive technologies can only process text; without a text alternative, this content is invisible to blind users.
• 2 Guideline 1.2 – Time-based Media: Video and audio content requires alternatives: captions for videos with audio, audio description for videos with visual content, and transcripts for audio-only files. These requirements apply to both pre-recorded and live content – with different requirement levels for each.
• 3 Guideline 1.3 – Adaptable: Content must be marked up such that its structure and meaning remain discernible even without visual styling. Headings, lists, tables and form fields must be semantically correct in the HTML code – not merely styled to look like a heading.
• 4 Guideline 1.4 – Distinguishable: Content must be visually distinct: sufficient contrast ratios between text and background, no colour-only information, text resizable without loss of content, no disruptive background noise in audio content.

WCAG Perceivable: Key Success Criteria with Reference Numbers

The Perceivable guidelines are operationalised through concrete success criteria. For implementing WCAG AA – the legal minimum standard – the following criteria are most relevant in practice:

• ✓ 1.1.1 Non-text Content (Level A): All informative images and graphical content require a descriptive alt text. Decorative images receive alt="". This is the single most frequently violated criterion on the web.
• ✓ 1.2.2 Captions (Pre-recorded) (Level A): Pre-recorded videos with audio require synchronised captions. Captions must capture the spoken content and relevant sounds.
• ✓ 1.2.5 Audio Description (Pre-recorded) (Level AA): Videos whose visual content goes beyond what is conveyed through audio require an audio description of the relevant visual information.
• ✓ 1.3.1 Info and Relationships (Level A): Structure and semantic relationships must be programmatically determinable – not merely visually apparent. Heading tags, list element tags and table structure must be used correctly.
• ✓ 1.3.4 Orientation (Level AA): Content must not be restricted to a single display orientation (portrait or landscape) unless a specific orientation is essential.
• ✓ 1.4.1 Use of Colour (Level A): Colour must not be the only visual means of conveying information, indicating an action, or distinguishing elements.
• ✓ 1.4.3 Contrast (Minimum) (Level AA): Text and images of text require a contrast ratio of at least 4.5:1 against the background (large text: 3:1). One of the most critical criteria for users with visual impairments.
• ✓ 1.4.4 Resize Text (Level AA): Text must be resizable up to 200% without loss of content or functionality.
• ✓ 1.4.10 Reflow (Level AA): Content must remain usable on small screens or at high zoom levels without horizontal scrolling – introduced in WCAG 2.1, particularly relevant for mobile use.
• ✓ 1.4.11 Non-text Contrast (Level AA): UI components (buttons, input fields, focus indicators) and informative graphics require a contrast ratio of at least 3:1.

WCAG Perceivable in Practice: Common Failures and How to Fix Them

In practice, Perceivable failures rank among the most frequent and consequential accessibility problems. WebAIM's annual analysis of the most-visited websites consistently shows missing alt text and insufficient contrast ratios among the top five failures – year after year.

• ✓ Missing alt text (1.1.1): Images without an alt attribute or with generic filenames as alt text. Fix: provide descriptive alt text for informative images, alt="" for decorative ones. Automatable with easyAlt.
• ✓ Insufficient contrast (1.4.3): Grey text on white backgrounds, light text on pastel surfaces. Fix: check contrast ratios with a contrast checker and adjust the colour palette. Testable with the SiteCockpit Contrast Checker.
• ✓ Missing captions (1.2.2): Videos without captions or with auto-generated, uncorrected captions. Fix: manually created or carefully corrected captions in a synchronised format (SRT, VTT).
• ✓ Colour-only information (1.4.1): Required fields marked only by red colour, charts distinguished only by colour. Fix: add supplementary visual markers (icon, pattern, text label) alongside colour.
• ✓ Missing semantic markup (1.3.1): Headings styled purely via CSS but not marked up as <h1>–<h6>. Lists implemented as plain paragraphs. Fix: use native HTML for structure rather than CSS styling as a substitute for semantics.

WCAG Perceivable vs. Operable, Understandable and Robust

The four WCAG principles are built upon one another – Perceivable forms the foundation on which the other three rest. Full WCAG conformance requires all four principles to be satisfied; meeting Perceivable alone is not sufficient.

• ✓ Perceivable (Principle 1): Can users sense the content? → Alt text, contrast, captions, semantic structure. This article.
• ✓ Operable (Principle 2): Can users interact with the interface? → Keyboard navigation, sufficient time, no seizure-inducing content, navigation and orientation.
• ✓ Understandable (Principle 3): Are content and operation comprehensible? → Readable language, predictable behaviour, error prevention and correction.
• ✓ Robust (Principle 4): Can content be reliably interpreted by assistive technologies such as screen readers and Braille displays? → Valid HTML, ARIA markup, future-proof implementation.

In practice, the boundaries between principles are not always clear-cut: a missing aria-label on a button violates both Perceivable (the screen reader cannot announce the function) and Robust (the assistive technology cannot determine the value). The WCAG structure serves as a conceptual framework; in implementation, the principles frequently overlap.

Frequently Asked Questions about WCAG Perceivable