2026-03-11
You might notice that this blog isn't black text on a white background! It's gray on grey. Or grey on gray, I'm not sure.
I find the dark gray on light gray more comfortable and less harsh than the default black text on a white background. However, it's important to consider the accessibility of the site for other people.
The Web Content Accessibility Guidelines (WCAG) give minimal contrast ratios for text on a background. Contrast ratios measure the difference between the brighter and darker color. 1:1 is the same and 21:1 is the most different.
You can check the contrast ratio of a foreground and background color using the WebAIM contrast checker. My contrast is 8.6:1, which is pretty good and meets the WCAG standards.
Fortunately, people can tell their browser that they prefer contrast, and you can add specific high-contrast CSS. If the user configured it so they want more contrast, their browser will look for the @media (prefers-contrast: more) block.
My CSS looks something like:
html {
color: #333;
background-color: #fbfbfb;
}
@media (prefers-contrast: more) {
html {
color: #000;
background-color: #ffffff;
}
}