Shadows in high contrast
One of the goals of the high-contrast themes is to provide clarity for viewers. Shadows on text or other graphics can provide a very nice, subtle 3D effect, but this can be troublesome for some people. When designing styles for high-contrast, it's important to remember to deliberately remove such shadows, as illustrated in the example below.
<button class="idi-prefs-button">preferences</button>
This button uses a white drop shadow on the black text to provide an elegant embossed look:
But such a shadow would be inappropriate for a high contrast theme. In this example (the yellow-on-black theme in this case), the text shadow is removed completely:
.idi-prefs-button { color: #000000; text-shadow: 1px 1px 0 #FFFFFF; background-color: #E5E5E5; background-image: url("images/preferences.png"); background-position: 0.4em 50%; background-repeat: no-repeat; width: 8em; } .fl-theme-yb .idi-prefs-button { text-shadow: none; border: 1px solid yellow; background-image: url("images/preferences-yellow.png"); }