W3C’s Web Content Accessibility Guidelines set the minimum contrast between text and its background so that it can be read by people with moderately low vision (which is quite common).
Another experiment confirms that reading time is lower when there’s high contrast between the text and the background. What’s more, contrast sensitivity declines with age.— Contrast Rebellion Website
Text is much easier to read when there is sufficient contrast between the text and the background. Low contrast and odd colors tend to look garish and be difficult to read even for those who are not colorblind, so it’s a good practice to ensure that text and backgrounds contrast strongly.
There are several tools out there to help you measure the contrast level of the colors you’re using for your designs, one of them is this tool which you can also use to find accessible color combinations, and which calculates the contrast in accordance with W3C’s Web Content Accessibility Guidelines.
To emphasize the importance of font readability and accessibility, and to also emphasize the fact that RWD is about more than just adapting layouts to different screen sizes, it’s worth mentioning that the W3C also introduced a new media query concept in the Media Queries Module Level 4, namely the Luminosity media query, among other new media features, which, if implemented, will allow designers and developers to adjust the style of the document in response to the ambient luminosity in which the device is used, to ensure maximum readability of the web page’s content. The user’s device must be equipped with a light sensor to trigger this new media feature.
Basically, the luminosity media query allows you to change the styles of your page inside a @mediaCSS rule, just like you normally do in regular media queries when you define new styles depending on the screen size, but in this case, you’d define new styles based on the value of the luminosity determined by the device’s sensor, which takes one of three values: dim, normal, or washed.
For example, to change the background and text color in different lighting conditions you’d write something like this:
@media (luminosity: normal) {
body {
background: #f5f5f5;
color: #262626;
}
}
@media (luminosity: dim) {
body {
background: #e9e4e3;
}
}
@media (luminosity: washed) {
body {
background: #ffffff;
}
}We won’t be getting into details of this media query as this is still a working draft and not supported in any browser yet, but it was well worth mentioning to show that making text responsive is not restricted to changing its size on different screen sizes. Of course, the luminosity media query is not only used to style text in different lighting conditions, but it will be probably the most obvious use case for this query.
You can read more about the luminosity media query in this article by Jordan Moore, or in the W3C’s Media Queries Level 4 working draft.
