a11y-debugging

Use Chrome DevTools MCP tools to capture the accessibility tree with take_snapshot, check native audits via list_console_messages with the issue type filter, and run evaluate_script snippets to verify labels, contrast ratios, and tap target sizes.

First check list_console_messages for native Low Contrast issues. If none appear, run the provided evaluate_script that computes luminance from computed styles and returns a contrast ratio, then compare against WCAG AA thresholds of 4.5:1 for normal text and 3:1 for large text.

Send Tab or Shift+Tab with the press_key tool, then call take_snapshot to see which element holds focus in the accessibility tree. For modals, verify focus moves into the dialog and remains trapped until it closes.

CSS like opacity: 0 keeps elements in the accessibility tree while display: none or aria-hidden removes them. The take_snapshot output reflects what screen readers perceive, so compare it against take_screenshot to catch DOM order mismatches.

The fallback contrast script uses a simplified algorithm that ignores transparency, gradients, and background images. For production-grade auditing, inject axe-core or visually inspect screenshots when automated results are unreliable.