- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS Media Features - prefers-contrast
CSS media feature prefers-contrast checks if the user wants the website to have more or less contrast. It's helpful for people with vision issues who may need to adjust the contrast to read content comfortably.
Possible Values
no-preference − The user hasn't specified a contrast preference.
more − The user prefers a higher contrast interface.
less − The user prefers a lower contrast interface.
custom − The user specified specific colors, and the contrast level doesn't match more or less. This is often used with forced-colors: active settings.
Syntax
prefers-contrast: no-preference|more|less|custom;
CSS prefers-contrast - no-preference Value
The following example demonstrates that prefers-contrast: no-preference media feature changes the background-color of the p element to green and text color to white, otherwise the background color remain pink −
<html> <head> <style> p { width: 200px; background-color: pink; } @media (prefers-contrast: no-preference) { p { background-color: green; color: white; } } </style> </head> <body> <p>This is an example of the prefers-contrast: no-preference media feature.</p> </body> </html>
CSS prefers-contrast - more Value
The following example demonstrates that prefers-contrast: more media feature changes the background-color of the p element to red and text color to white, otherwise the background color remain pink −
Follow steps on this link to emulate prefers contrast mode and test this example.
<html> <head> <style> p { width: 200px; background-color: pink; } @media (prefers-contrast: more) { p { background-color: red; color: white; } } </style> </head> <body> <p>This is an example of the prefers-contrast: more media feature.</p> </body> </html>
CSS prefers-contrast - less Value
The following example demonstrates that prefers-contrast: less media feature changes the background-color of the p element to blue and text color to white, otherwise the background color remain pink −
Follow steps on this link to emulate prefers contrast mode and test this example.
<html> <head> <style> p { width: 200px; background-color: pink; } @media (prefers-contrast: less) { p { background-color: blue; color: white; } } </style> </head> <body> <p>This is an example of the prefers-contrast: less media feature.</p> </body> </html>
CSS prefers-contrast - custom Value
he following example demonstrates that prefers-contrast: custom media feature changes the background-color of the p element to green and text color to white, otherwise the background color remain pink −
Follow steps on this link to emulate prefers contrast mode and test this example.
<html> <head> <style> p { width: 200px; background-color: pink; } @media (prefers-contrast: custom) { p { background-color: green; color: white; } } </style> </head> <body> <p>This is an example of the prefers-contrast: custom media feature.</p> </body> </html>
To Continue Learning Please Login
Login with Google