Accessibility
Guidelines
Accessibility is not a feature. It is a fundamental requirement. Failure to meet WCAG standards is a failure of design and engineering. We do not tolerate aesthetic choices that exclude users.
The Web Content Accessibility Guidelines (WCAG) 2.2 provide the definitive, measurable standards for ensuring digital content is accessible to people with disabilities. PickClicker focuses strictly on the visual aspects: color contrast, use of color, and focus indication.
1. Color Contrast (WCAG 1.4.3)
The visual presentation of text and images of text must have a contrast ratio of at least 4.5:1 for Level AA compliance.
| Element Type | Level AA Requirement | Level AAA Requirement |
|---|---|---|
| Normal Text ( < 18pt) | 4.5:1 | 7.0:1 |
| Large Text ( ≥ 18pt or 14pt Bold) | 3.0:1 | 4.5:1 |
| UI Components & Graphics | 3.0:1 | 3.0:1 |
Exceptions:
- Incidental: Text or images of text that are part of an inactive user interface component, pure decoration, or part of a picture containing significant other visual content.
- Logotypes: Text that is part of a logo or brand name has no contrast requirement.
2. Use of Color (WCAG 1.4.1)
Color must not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Example: Form Error States
❌ Fails: Relies solely on red color to indicate error.
✅ Passes: Uses an icon (shape) and border thickness.
3. Focus Appearance (WCAG 2.4.13)
Introduced in WCAG 2.2, this criterion ensures that keyboard focus indicators are clearly visible.
Key Requirements:
- Contrast Area: The focus indicator must have a contrast ratio of at least 3:1 against adjacent colors.
- Minimum Area: The indicator must be at least as large as a 1 CSS pixel thick perimeter of the focused element, or a 2 CSS pixel thick line along the shortest side.
- Visibility: It cannot be fully obscured by other authored content.
* We strongly recommend against removing the default browser outline unless you are replacing it with a custom focus ring that strictly meets these criteria (e.g., :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }).