Menu

Post image 1
Post image 2
1 / 2
0

WCAG Color Contrast: Why Your UI Might Be Failing Accessibility Tests

DEV Community·Snappy Tools·27 days ago
#HyeT73EM
#webdev#css#a11y#contrast#colour#background
Reading 0:00
15s threshold

You've probably seen accessibility audits flag contrast ratio failures. Maybe Lighthouse gives your site a poor score, or a design review marks text as "unreadable for low-vision users." But what does a contrast ratio actually measure, and what do the thresholds mean? Here's the practical explanation — with the math kept simple. What contrast ratio means The WCAG contrast ratio compares the relative luminance of two colours: foreground (text) and background. Luminance is a measure of perceived brightness, not just the raw RGB value. The formula: contrast ratio = (L1 + 0.05) / (L2 + 0.05) Enter fullscreen mode Exit fullscreen mode Where L1 is the lighter of the two luminance values and L2 is the darker. The result is a ratio from 1:1 (no contrast — identical colours) to 21:1 (maximum contrast — pure black on pure white).…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More