Design trends frequently favor subtle aesthetic choices: light gray body text, pastel badges, and thin typography. While these may look stylish in design software on calibrated monitors, they often become unreadable on mobile screens in direct sunlight or for individuals with visual impairments.
The WCAG 2.1 Contrast Standards
The Web Content Accessibility Guidelines (WCAG) 2.1 Level AA define clear, measurable contrast benchmarks between foreground text and its background: - Standard Text: Must maintain a minimum contrast ratio of 4.5:1. - Large Text (at least 18pt or 14pt bold): Must achieve at least 3.0:1. - User Interface Components: Buttons, input borders, and essential graphic icons must have at least 3.0:1 contrast against adjacent background colors.
Testing Your Palette Beyond the Homepage
Contrast auditing cannot be limited to your homepage. Form input placeholders, active filter states, breadcrumbs, and subtle footer links are the most frequent offenders. Use automated browser developer tools to flag low-contrast nodes across all templates. High-contrast typography reduces eye strain for all readers and ensures universal access.
Accessibility test checklist
- Navigate the page with a keyboard and ensure focus is always visible.
- Give each form field a persistent label and associate errors with the field.
- Add useful alternative text to informative images; use empty alt text for decorative ones.
- Check text and control contrast, zoom, headings, link purpose, and responsive reflow.
- Test important tasks with assistive technology where possible.
Fix barriers by impact
Prioritise issues that stop people completing essential tasks. Retest after changes and make accessibility checks part of normal releases.