Home » Series

Frontend × Accessibility Subscribe to Frontend × Accessibility RSS feed

The Color Is Right but the Contrast Is Wrong: The Accessibility Trap CSS opacity Sets thumbnail

The Color Is Right but the Contrast Is Wrong: The Accessibility Trap CSS opacity Sets

I had clearly written a dark gray into my CSS. color: #595959. On a white background that color has a contrast of 6.4:1, which comfortably clears the accessibility bar of 4.5:1. Pass. Then I ran an accessibility checker, and a red line appeared. This text has a contrast of 4.04:1, which is insufficient. Expected ratio: 4.5:1. I put in a color that measures 6.4:1, so why is it calling it 4:1? Was the checker wrong? ...

Published date: 2026-07-21 · Reading time: 6 min · Word count: 2544 words · Author: Isaac
Supporting High Contrast Mode Properly: forced-colors and System Colors thumbnail

Supporting High Contrast Mode Properly: forced-colors and System Colors

Some people set their screen to maximum contrast. Yellow text on black, white text on blue, that sort of thing. For low-vision users this is the difference between being able to read the text and not; people with migraines or light sensitivity go the other way, using a muted, low-contrast palette. They have one thing in common — the user decides the colors. And the moment they do, a good chunk of the colors we wrote in CSS get ignored. ...

Published date: 2026-07-18 · Reading time: 12 min · Word count: 2398 words · Author: Isaac
Dark Mode Done Right: CSS Variable Design to Contrast Verification thumbnail

Dark Mode Done Right: CSS Variable Design to Contrast Verification

I turned on dark mode and my eyes hurt more. The background was black but the text was a heavy gray, so the contrast was far too low; links were still the default blue (#0000ff), which stung. Images blazed alone against the dark screen. One button was the same color as its background, so it was simply invisible. It said “dark mode supported.” But it was dark mode by color inversion, nothing more. ...

맨 위로