ValleyFill

Interactive guide

The accessibility standards, explained

WCAG 2.1 is built on four principles. Open each one, try the contrast checker, and practice with the keyboard. Everything here works without a mouse.

The four principles

Perceivable: people can sense the content

Images have text alternatives. Videos have captions. Text has enough contrast to read. Content does not depend on color alone.

Examples: alt text on informative images, captions on video, a 4.5:1 contrast ratio for body text.

Operable: people can use every control

Every function works with a keyboard. People have enough time to read. Nothing flashes more than three times a second. Focus is always visible.

Examples: no keyboard traps, a visible focus outline, a skip link to the main content.

Understandable: people can follow and predict the content

Text is clear. Pages behave predictably. Forms explain errors and say what to do next.

Examples: labels on every form field, error messages that name the problem, a consistent menu.

Robust: the content works with current assistive technology

Code is valid and uses standard elements. Screen readers and other tools can read names, roles, and states correctly.

Examples: real buttons and links instead of clickable boxes, form labels tied to their inputs.

Color contrast checker

Enter two colors as six-digit hex codes. For example, use 053B3A for text and F6F1E7 for the background. The checker shows the ratio and whether it meets WCAG AA.

Accepts hex codes with or without the #.

Sample text on this background

Keyboard practice

Press Tab to move between these controls and Shift + Tab to go back. Press Enter or Space to activate a button. Each control should show a clear focus outline.

Activate a control to see a message here.

Keep learning