Antislop Human

antislop-human

Anti Slop: Rules for AI Coding Agents. Human skill

Part of the antislop system. Read together with antislop.md (the core). This skill deep-dives the human concern: the UI must stay usable by people with different eyes, hands, and setups. Contrast, keyboard, focus, states, and the mobile details that exclude people.

How to use this skill

• Load together with antislop.md whenever the task builds or edits UI. The core holds the mechanism (the purpose test, the three tiers, the Delivery Gate); this skill holds the human-side depth: the parts of a UI that exclude people with different eyes, hands, and setups.
• Every entry has the same shape: Tell (the pattern), Why (who it excludes, and why it reads as unfinished), Fix (what to do instead), with the governing core rule cited as R-XX.
• Accessibility is not a checklist of extras bolted on at the end. It is part of the core promise that "the UI holds up" (C-4). The Delivery Gate in the core remains the gate; the "Human Skill Checklist" at the end of this file is the supplement to run alongside it.
• The contrast checker (formula + reference table + script) lives in this skill. Use it for every color pairing you cannot verify by eye.
• This skill keeps only the mobile details that exclude people: zooming, and the on-screen keyboard.

Color & Contrast

Low-Contrast Text

• Tell: light grey text on a white or near-white background, thin body text, muted labels chosen because they look "elegant" but are hard to read.
• Why: it excludes low-vision users and everyone in bright light. It is a visual choice made without checking the standard, which is exactly the kind of default the filter exists to catch.
• Fix: meet WCAG AA minimums (R-25): 4.5:1 for normal text, 3:1 for large text (18px+). Compute the ratio; do not eyeball it.

Text Over a Photo or Gradient

• Tell: white text placed directly over an image or gradient that is light in some areas, checked at one bright spot only.
• Why: contrast is local. Where the image is light, the text drops below 4.5:1 even if the hero still "looks" fine. R-25 requires testing the whole area the text passes over, not a single point.
• Fix: add a scrim or a solid color block behind the text, then verify the worst spot, not the best. If any part of the text area fails, the treatment fails.

The Grey-on-Grey Hallucination

• Tell: "dark grey on black" or "light grey on white" claimed to pass AA without a computation.
• Why: this is the most common accessibility hallucination. The eye overestimates contrast on grey pairs, and agents repeat the claim because it sounds plausible. #555555 on black is 2.8:1. It fails.
• Fix: never assert a pairing passes. Run the contrast checker (below) or apply the formula. When neither is possible, use the reference table.

Non-Text Contrast

• Tell: interactive components (buttons, icons, input borders, focus indicators, chart segments) distinguished from their background by less than 3:1.
• Why: non-text UI carries information by shape and edge. When the edge is a hair of tint, low-vision users cannot find the control. The same bar applies to states like hover and selected.
• Fix: give every component boundary and every status indicator a 3:1 ratio against adjacent colors (WCAG 1.4.11). Pair icons with a text label that meets 4.5:1.

The Contrast Checker

The home of the contrast checker. Three layers, from most to least convenient:

The script. When a script runtime is available and the file is present, run it instead of computing by hand. The script ships in this skill's folder (contrast-check.py, next to this SKILL.md). Run it with python3 on macOS and Linux, python on Windows:

python3 "${CLAUDE_SKILL_DIR}/contrast-check.py" "#FFFFFF" "#777777"
# normal text: FAIL (4.48 < 4.5)
# large text:  PASS (4.48 >= 3.0)

If the ${CLAUDE_SKILL_DIR} variable is not available in this agent, point the script path at this skill's folder directly. The script exists so agents stop hallucinating AA. It takes two hex colors and prints the ratio and the verdict for both text sizes. If the file is missing, the formula and table below are complete on their own. Never block on the script.

The formula (WCAG 2.x).

1. Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter relative luminance and L2 the darker.
2. Relative luminance L of one color: convert each channel to 0-1 (c = hex / 255), then linearize: if c <= 0.03928, c_lin = c / 12.92; otherwise c_lin = ((c + 0.055) / 1.055)^2.4.
3. L = 0.2126*R + 0.7152*G + 0.0722*B.
4. Round the ratio to two decimals and compare: 4.5:1 for normal text, 3:1 for large text (18px+, per R-25). The maximum ratio is 21.0 (black on white).

The reference table (common pairings, computed with the formula):

Read the table as a sanity check, not as a substitute. Any pairing not listed, or anything near a threshold, goes through the formula or the script.

Keyboard

Removed Focus Outline

• Tell: outline: none or outline: 0 with no replacement focus style.
• Why: keyboard users cannot see where they are. It is the fastest way to make a UI unusable without a mouse, and R-32 forbids it outright.
• Fix: keep or replace the outline with a visible :focus-visible style that meets the same contrast bar (3:1 against its neighbors). Never set outline: none without a replacement.

Mouse-Only Patterns

• Tell: menus that open on hover only, dropdowns that click-open but do not keyboard-open, drag-and-drop with no keyboard fallback.
• Why: each one excludes keyboard and assistive-technology users (R-32). If a control cannot be reached and operated by Tab, Enter, or Space, it does not exist for a whole group of people.
• Fix: every interactive element is reachable and operable by keyboard (R-32): logical tab order following visual order, activation with Enter or Space, and dialogs closable with Escape (R-26).