Color Contrast Accessibility: Understanding WCAG AA and AAA
Color contrast accessibility ensures that text and interface elements have enough relative luminance difference against their background so that all people can read and interact with your website comfortably.
What do WCAG AA and AAA contrast levels mean?
The Web Content Accessibility Guidelines (WCAG 2.1 and 2.2) define clear numerical contrast ratios between foreground text and background colors based on relative luminance.
Level AA (Standard)
Minimum Compliance
- 4.5:1 for normal body text (below 18pt or 24px, or bold below 14pt / 18.5px).
- 3:1 for large text (18pt+ or bold 14pt+) and graphical UI components like input borders.
Level AAA (Enhanced)
High-Visibility Target
- 7:1 for normal body text.
- 4.5:1 for large headings and bold prominent callouts.
Why does color contrast matter for real users?
Accessible contrast is not just for users with diagnosed visual impairments. Low contrast impacts everyday scenarios: viewing screens outdoors in bright sunlight, using older mobile displays with poor viewing angles, or reading small text under tired eyes. High contrast eliminates eye strain and increases conversion rates by ensuring calls to action stand out distinctly.
How does Palettero calculate and show contrast scores?
Palettero evaluates the perceptual luminance of your palette in OKLCH and sRGB color space. When editing colors, the inspector constantly measures the contrast ratio between each foreground token (such as primary text or button labels) and its paired background surface.
If a combination fails WCAG AA (below 4.5:1 for body text or below 3:1 for badges), a warning badge indicates the exact ratio so you can tweak lightness or saturation immediately.
Audit contrast on live layouts
Review your theme across all six standard components and dark mode with real-time contrast feedback.
What are common contrast traps to avoid?
- Gray text on colored badges: Light gray text on light blue or light yellow tags rarely meets 4.5:1. Use deep slate or darker tones.
- White text on pure yellow or orange buttons: Pure yellow (#FFFF00) has high relative luminance, causing white text to fail contrast drastically (often 1.1:1). Pair yellow with dark ink instead.
- Subtle disabled states: Making inactive controls so faded that users cannot identify what the button represents.