HIGHWCAG 1.4.3 AA

Low Contrast Interactive States

Hover, focus, and disabled button states use colors that fail contrast requirements against backgrounds.

Try It Yourself

This simulator is intentionally broken. Recreate the failure path, capture evidence, and validate the fix with the same sequence.

Scenario

In a high-pressure workflow, Low-vision users try to complete a core task and hit this failure pattern.

Watch For

Hover and focus states produce minimal or no visible change.
Disabled button text is difficult to distinguish from background.

Done When

All button states meet minimum 4.5:1 text contrast.
Hover and focus produce perceptible, high-contrast visual changes.

Scenario

A person in this audience group is trying to complete a core task quickly and encounters this failure pattern.

Low-vision usersOlder adultsKeyboard users relying on visual focus

Guided Run Progress

0 / 5 steps marked

Track setup, action, and failure signals as you run the simulation.

Quick Run Checklist

SetupOpen the interactive button demo at standard zoom.
ActionHover each button and observe the visual state change.
ActionTab to each button and verify focus indicator visibility.
ObserveHover and focus states produce minimal or no visible change.
ObserveDisabled button text is difficult to distinguish from background.

Demo warning

Interactive state feedback relies on contrast. When it fails, users lose confirmation of system response.

How to trigger the issue

Hover over and focus each button while observing the state change visibility at normal and zoomed levels.

Hover each button to see state contrast

Notice how minimal the visual change is between states.

Contrast ratios (approximate):

Normal state text: 2.8:1 (fails AA)
Hover change: 1.2:1 difference (barely perceptible)
Focus outline: 1.8:1 (fails AA)
Disabled text: 2.3:1 (fails AA)

What users experience

• Cannot confirm hover feedback
• Focus ring nearly invisible
• Disabled state looks clickable

WCAG requirement

All text must meet 4.5:1 contrast in every interactive state.

Manual Testing Protocol

Follow this sequence to reproduce the failure consistently and verify the fix with the same workflow.

1. Setup

Open the interactive button demo at standard zoom.
Prepare to test with keyboard navigation and mouse hover.

2. Reproduction Steps

Hover each button and observe the visual state change.
Tab to each button and verify focus indicator visibility.
Check disabled button text against its background.

3. Expected Failure Signals

Hover and focus states produce minimal or no visible change.
Disabled button text is difficult to distinguish from background.
Users cannot confirm which control is currently interactive.

4. Fix Verification

All button states meet minimum 4.5:1 text contrast.
Hover and focus produce perceptible, high-contrast visual changes.
Disabled states are clearly distinguishable while maintaining text legibility.

Evidence Capture Checklist

Record the exact user goal that fails (for example: submit form, complete checkout, navigate menu).
Capture screen recording + keyboard path from first interaction to failure state.
Map failure to WCAG 1.4.3 (Level AA) and affected user groups.
Document business impact: conversion loss, support burden, legal/compliance risk, or trust damage.

Share evidence with Accessibility.build

The Impact

What Happens

Users cannot detect hover and focus feedback
Disabled states appear interactive or vice versa
Button activation confidence decreases

Who Gets Hurt

Low-vision users

Older adults

Keyboard users relying on visual focus

Motor-impaired users needing clear targets

The Broken Code

.btn-secondary {
  color: #8a8a8a;
  background: #e0e0e0;
  border: 1px solid #d0d0d0;
}

.btn-secondary:hover {
  background: #e8e8e8; /* 1.2:1 contrast change */
}

.btn-secondary:disabled {
  color: #b5b5b5; /* 2.3:1 - fails AA */
}