"For my website design, I chose a dark blue background colour (#212E45) and light text (#d3d5da). This colour is off-white to soften the contrast between background and foreground colours, while maintaining a decent level for accessibility considerations. But here's the thing. The contrast-color() function chooses either white for dark backgrounds or black for light ones. At least to my eyes, that contrast is too high and makes reading less comfortable, at least for me."
"White and black are two very safe colors to create contrast with another color value. But the amount of contrast between a solid white/black and any other color, while offering the most contrast, may not be the best contrast ratio overall. This was true when added a dark color scheme to my personal website. The contrast between the background color, a dark blue ( hsl(238.2 53.1% 12.5%), and solid white (#fff) was too jarring for me."
contrast-color() chooses either white for dark backgrounds or black for light ones, limiting returned options to a strict black/white duo. Solid white against a dark blue background (hsl(238.2 53.1% 12.5%), #212E45) can feel visually jarring and reduce reading comfort, prompting a desire for a less opaque, softened white such as hsl(100 100% 100% / .8). The CSS specification indicates future versions may add more control over contrast algorithms and returned colors. User preferences and ongoing WCAG 3.0 developments complicate a single definition of “right” contrast. Custom utilities like light-dark() provide intermediate choices today.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]