WCAG contrast checks for client websites

Contrast testing should be completed for all production colour combinations, including light and dark themes, interactive states, captions, and interface controls.

WCAG 2.2 reference values

• Normal text — at least 4.5:1 under Success Criterion 1.4.3
• Large text — at least 3:1 under Success Criterion 1.4.3
• Meaningful interface components and graphics — at least 3:1 under Success Criterion 1.4.11

Review procedure

1. Open the Color Contrast Checker.
2. Enter the production foreground and background colour values.
3. Test body text, headings, captions, links, buttons, form controls, and status indicators separately.
4. Repeat the test for hover, focus, disabled, error, and dark-mode states where applicable.
5. Use the Color Picker & Converter when HEX, RGB, or HSL conversion is required.

Common review failures

• Testing only one background or theme
• Applying the large-text threshold to captions or ordinary body text
• Using colour as the only indication of error or status
• Omitting focus indicators and component boundaries from review

Primary reference: Web Content Accessibility Guidelines (WCAG) 2.2.