Difference between revisions of "High contrast tests"

From Level Access Web Labs
Jump to navigation Jump to search
Line 27: Line 27:
 
   </style>
 
   </style>
 
<body>
 
<body>
 +
  <div>Input without border</div>
 
   <input class="border_none" id="i1" type="text" />
 
   <input class="border_none" id="i1" type="text" />
 +
  <div>Link without outline or text decoration</div>
 
   <a id="a1" href="https://www.google.com"> Google </a>
 
   <a id="a1" href="https://www.google.com"> Google </a>
 +
  <div> Input with light border</div>
 
   <input class="border_light" id="i2" type="text" />
 
   <input class="border_light" id="i2" type="text" />
 +
  <div>Input with box shadow</div>
 
   <input class="box_shadow" id="i3" type="text" />
 
   <input class="box_shadow" id="i3" type="text" />
 +
  <div> input with box shadow and no border</div>
 
   <input class="box_shadow border_none" id="i3" type="text" />
 
   <input class="box_shadow border_none" id="i3" type="text" />
 
</body>
 
</body>

Revision as of 15:47, 26 March 2018

  • It will
    • change the color when present - for example of light gray border to high contrast border.
    • show pseudo classes
  • It will NOT
    • display box-shadow
    • display background images
    • High contrast does not enable the following when they are not present
      • Outline: none on link and probably other elements
      • text-decoration on link
      • Border on input and probably others

Input without border

Link without outline or text decoration

Google

Input with light border

Input with box shadow

input with box shadow and no border