Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What actually happens to CSS in high contrast mode?

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?

login form in high contrast mode

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:

  1. Detect HCM (high contrast mode) and adjust CSS accordingly
  2. Made CSS more generic to let it work in every mode

In either case I would really like to know what happens in high contrast mode in terms of changes to CSS.

Google.com in various browsers

As you see the behaviour varies so your expertise will be appreciated.

like image 815
Mars Robertson Avatar asked Apr 10 '12 15:04

Mars Robertson


2 Answers

@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.

like image 64
jazzcat Avatar answered Oct 26 '22 15:10

jazzcat


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 ;)

like image 7
FelipeAls Avatar answered Oct 26 '22 15:10

FelipeAls