16

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.

Mars Robertson
  • 12,673
  • 11
  • 68
  • 89

4 Answers4

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

jazzcat
  • 4,351
  • 5
  • 36
  • 37
7

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

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
6

If you are implementing high contrast in your web application then use following code block for black-on-white and white-on-black contrast selection. This will work fine in IE.

@media screen and (-ms-high-contrast: black-on-white) {
                /*
                Put your styling code.............
                */

            }
 @media screen and (-ms-high-contrast: white-on-black) {
                /*
                Put your styling code.............
                */

            }
Prabhat Maurya
  • 1,058
  • 16
  • 21
0

I have high contrast mode turned on for my laptop. It removes all background colors and text colors, including any background images. Border and border colors are not ignored. So if you have a green bordered, blue background, yellow text div, then it will show as: Green bordered, black background, white text div.

John Smith
  • 3
  • 1