Skip to content
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. ...

맨 위로