Try WCAG: 10 interactive demos

Rules are easiest to understand when you experience the barrier yourself. You can use the demos with keyboard, mouse, touch and screen reader. Only the barriers shown deliberately do not work for everyone.

Contrast checker

Choose a text and a background colour. The checker shows the contrast ratio and which WCAG levels it meets.

For example #15152b
For example #ffffff

Sample text at normal size. Large text.

17,43:1

  • AA, normal text (4.5:1):
  • AA, large text (3:1):
  • AAA, normal text (7:1):
  • AAA, large text (4.5:1):
  • Controls and graphics (3:1):

Related rules: 1.4.3 Contrast (Minimum), 1.4.6 Contrast (Enhanced), 1.4.11 Non-text Contrast

Back to the list of demos

Screen reader simulation: images

A screen reader cannot see an image. It reads what is in the code. Choose a variant and read what blind people hear.

Code variant

The screen reader says:

Related rules: 1.1.1 Non-text Content, 1.3.1 Info and Relationships, 4.1.2 Name, Role, Value

Back to the list of demos

Keyboard test

Put the mouse away. Press Tab to move to the next element and Enter to activate. You cannot reach one of the two buttons this way.

Barrier: <div onclick>

Like

Good: <button>

No button pressed yet.

Related rules: 2.1.1 Keyboard, 2.1.2 No Keyboard Trap, 2.4.1 Bypass Blocks, 2.4.3 Focus Order

Back to the list of demos

Visible focus

Tab through the three buttons. Then switch the focus ring off and try again: where are you now? The ring is only missing inside this box. Tab always gets you out again.

Related rules: 2.4.7 Focus Visible, 2.4.11 Focus Not Obscured (Minimum), 2.4.13 Focus Appearance

Back to the list of demos

Forms and error messages

Submit the form with a mistake, for example without the @ sign. A good error message says what is wrong and how to fix it.

Nothing is sent – this is only a demo.

Related rules: 3.3.1 Error Identification, 3.3.2 Labels or Instructions, 3.3.3 Error Suggestion, 1.3.5 Identify Input Purpose

Back to the list of demos

Target size

Set the size of the buttons and try to hit the middle one – ideally on a phone or with your weaker hand.

Related rules: 2.5.8 Target Size (Minimum), 2.5.5 Target Size (Enhanced)

Back to the list of demos

Text spacing and reflow

Some people increase line and letter spacing to read more easily. Switch the spacing on and compare the two boxes.

Barrier: fixed height

This box has a fixed height. When the text grows, it is simply cut off at the bottom and can no longer be read.

Good: grows with content

This box grows with its content. When the text gets bigger, the box gets taller. Nothing is lost.

Related rules: 1.4.12 Text Spacing, 1.4.10 Reflow

Back to the list of demos

Vision simulation: colour alone is not enough

Choose a visual impairment. Which order failed? In the first list only colour tells you.

Barrier: colour only

  • Order 1001
  • Order 1002
  • Order 1003

Good: colour, symbol and text

  • Order 1001: delivered
  • Order 1002: failed
  • Order 1003: delivered

Related rules: 1.4.1 Use of Color

Back to the list of demos

Pausing motion

Motion distracts and can cause dizziness. That is why nothing here starts by itself – and everything can be paused.

Your device is set to “reduce motion”. That is why the circle only pulses gently here instead of moving.

Related rules: 2.2.2 Pause, Stop, Hide, 2.3.3 Animation from Interactions

Back to the list of demos

Status messages

Sighted people notice a small message at the edge of the screen. A screen reader only announces it if it is marked as a status message in code.

The screen reader says:

Related rules: 4.1.3 Status Messages

Back to the list of demos