Text and background contrast
- Normal body text meets at least 4.5:1 against its real rendered background.
- Large text (18pt+ or 14pt bold) meets at least 3:1.
- Important notices, alerts, and instructions use strong contrast, not just colour.
Buttons and CTAs
- Primary and secondary buttons have readable text on their background colour.
- Button states (hover, focus, active, disabled) remain readable.
- Buttons do not rely on colour alone to communicate purpose or state.
Links
- Links have enough contrast against surrounding text and background.
- Link hover and focus states remain readable.
- Link colour is distinguishable from non-link text.
Forms and error messages
- Form labels, helper text, and placeholders meet contrast requirements.
- Error messages are readable and do not rely on red alone.
- Required field indicators are visible and high-contrast.
Focus indicators
- Keyboard focus outline or ring has sufficient contrast against the background.
- Focus state does not disappear or become low-contrast on buttons, links, or form fields.
Text over images and hero sections
- Text over hero images or gradients has a solid background, overlay, or layout that keeps it readable.
- Text remains legible at different screen sizes and brightness levels.
Brand palette review
- Primary brand colours have accessible variants for text, buttons, and alerts.
- Secondary and accent colours do not create low-contrast combinations in common layouts.
Hover, focus, and disabled states
- Interactive elements remain readable in hover, focus, and disabled states.
- Disabled-looking text is not confused with important low-contrast content.
Mobile, outdoor, and low-brightness review
- Key text and CTAs remain readable on mobile screens in bright sunlight or low light.
- Print-friendly styles maintain contrast for black-and-white output.
Related tools: Colour contrast checker · Colour contrast examples · Main website checker · Canadian checklist · What automation misses