How to Test Color Contrast (WCAG)
WCAG contrast ratios explained, the common failures designers miss, and how to test contrast across real UI states and backgrounds.
6 min read - Updated 2026-06-15
Use this guide as a compact release reference, then validate the same breakpoints in Sizzy with synchronized devices and screenshot evidence.
Know the ratios
WCAG defines minimum contrast ratios between text and its background. For AA, normal text needs 4.5:1 and large text 3:1. AAA raises that to 7:1 and 4.5:1. UI components and meaningful graphics need at least 3:1. Memorizing these four numbers lets you judge most contrast decisions on the spot.
AA: 4.5:1 normal text, 3:1 large text
AAA: 7:1 normal text, 4.5:1 large text
UI components and graphics: 3:1 minimum
Large text is ~24px, or ~19px bold
The failures people miss
Contrast bugs hide in states and context: placeholder text, disabled buttons, text over images or gradients, hover and focus states, and light text on light brand colors. A button might pass at rest and fail on hover. Test every state and every background a piece of text can land on, not just the default.
Placeholder and helper text often fail
Text over images/gradients varies by pixel
Hover and focus states can drop below the threshold
Brand colors frequently fail on white or light backgrounds
Test contrast in context
Color pickers give you a number, but real UI is dynamic. Check contrast in the actual rendered page across themes and states. Sizzy lets you view light and dark variants and different states side by side, so you can spot low-contrast text in context rather than trusting a swatch in a design tool.
Verify contrast in the rendered page, not just the palette
Check both light and dark themes
Confirm interactive states stay above threshold
Re-check text over photographic backgrounds
Release checklist
Normal text meets at least 4.5:1 (AA).
UI components and icons meet at least 3:1.
All interactive states pass, not just the default.
Text over images and gradients is verified in context.
Frequently asked questions
What is the minimum color contrast for WCAG AA?
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (about 24px, or 19px bold). User interface components and meaningful graphics need at least 3:1.
Why does my text pass contrast but still look hard to read?
Contrast ratios don't account for everything - thin font weights, small sizes, text over busy images, and certain color combinations can be technically passing yet still hard to read. Test in context and consider readability beyond the minimum ratio.
Do disabled and placeholder elements need to pass contrast?
Disabled elements are exempt from contrast minimums, but placeholder text is not exempt when it conveys information, and relying on low-contrast placeholders as labels is an accessibility problem. Provide proper labels and adequate contrast.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.