High Contrast Test
You seem to be using a high contrast color scheme.
By default, all text on this page is black, and the background color is white.
The following paragraph includes an underlined link with color="#0000EE".
When it receives focus (via :hover or :focus), it changes to white text on a red background.
Below is a set of icons like those used on Able Player, the accessible media player.
They are available in black or white, and all buttons are PNG files with transparent backgrounds.
Each icon is surrounded by a 3px solid border that matches the background color.
Each icon is tabbable, and when it receives focus, the border turns red (outline is set to none, replaced as it is with this red border).
Black PNG icons on a white background
White PNG icons on a black background
Alternative Accessible icons
Observations
- In Mac OS X, "Invert Colors" does exactly that. Anything that's black becomes white; anything that's white becomes black, including the icons. Border colors are also inverted, so they continue to be masked against the background until an icon has focus.
- The computed color that shows up in Firebug and Chrome (and presumably other browsers) is not the inverted color - it's the original color prior to inversion.
- In Windows, there are several choices of high contrast color schemes but they all have a few things in common: CSS background color is ignored; and all borders have the same color as text. If the high contrast color scheme has a black background, this means the black icons (which had very high contrast by default against a white background) are now invisible against the black background. The same is true of white icons if the high contrast color scheme has a white background. Lesson learned: We can't rely on CSS backgrounds to create contrast. They don't work for enhancing the :focus indicator either (the default browser focus indicator is used). Focus indicators that don't rely on changes in color or background color (e.g., enhancing the browser's default outline works).
