Introduction to Media Queries and Their Use
Progress in the field of web and related technologies these days has significantly aided the user experience for various individuals. Media Queries are one of the excellent tools in CSS that allow us to create a user experience similar across different devices.Why Contrast Preferences Are Important
One of the important aspects of design for easier access and easy use of web is adjusting contrast settings. Appropriate contrast can have a great impact on readability and user experience, especially for individuals with visual impairments or certain sensitivities.@media (prefers-contrast)
CSS implementation of Media Queries allows targeting user settings, such as contrast preferences, to provide appropriate themes. Using @media (prefers-contrast) you can create high or low contrast designs for different environments.How to Use It?
Here is a simple code example for using @media (prefers-contrast) that can help you get acquainted with this feature.
body {
background-color: #f0f0f0;
}
@media (prefers-contrast: high) {
body {
background-color: #000;
color: #fff;
}
}
@media (prefers-contrast: low) {
body {
background-color: #fff8e1;
color: #333;
}
}
Code Explanation
body {
background-color: #f0f0f0;
}Initially, the light grey background color will be set.
@media (prefers-contrast: high) {...}This section will check if high contrast preference is set and adjust accordingly.
background-color: #000;The background color will change to black for high contrast settings.
color: #fff;The text color will change to white to create adequate contrast.
@media (prefers-contrast: low) {...}This section will be executed if low contrast preference is detected.
background-color: #fff8e1;The background will change to a lighter color for better visibility.
color: #333;The text color will be a darker tone to maintain contrast.