Can anyone explain what happens to CSS in high contrast mode?
http://hardlikesoftware.com/weblog/2009/11/04/css-sprites-vs-high-contrast-mode/
In high contrast mode all background images and colors are ignored — replaced with high contrast colors such as white on black or black on white. The other issue is that background images are not always printed.
Is there anything more than this?
I have login form that looks suboptimal and I am trying to investigate.
Untill recently there were https://www.google.com/search?q=axs+aol+accesibility+library but it doesn't seem to exist any longer.
Generally I see there two approaches:
In either case I would really like to know what happens in high contrast mode in terms of changes to CSS.
As you see the behaviour varies so your expertise will be appreciated.
@media screen and (-ms-high-contrast: active) {
/* put your styling rules here */
}
Works in IE and MS Edge. Tested in Windows 10.
Chrome does not know whether Windows 10 is in high-contrast mode.
Did you define colors for both text and background for your form elements?
Here's a relevant criteria from reference list Accessiweb 2.1 : On each Web page, are CSS declarations for colours for element background and fonts used properly? (Silver level equals WCAG 2.0 AA)
Relevant WCAG 2.0 Failure Technique is F24: specifying foreground colors without specifying background colors or vice versa
A recent WebAIM post about contrast mode: http://webaim.org/blog/high-contrast/
About the Google homepage: Google is known for browser sniffing and heavily modified pages depending on browser, logged on their services or not, JS activated or not. It'll even use SPDY protocol instead of HTTP (though that doesn't change the content received by the browser per se).
I wouldn't consider pages from this company for comparisons between browsers ;)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With