Style Effects and Legibility in Contrast Modes

One of the goals of the contrast themes is to provide legibility and clarity for viewers. Shadows on text or other graphics can provide appealing visual effects, but this can adversely affect legibility for some people. When creating styles for contrast modes, it's important to remember to remove such shadows and other graphical effects.

Improving Clarity - Removing Drop Shadows

<button class="idi-prefs-button">preferences</button>

.idi-prefs-button {
    background-color: #e5e5e5;
    background-image: url("images/preferences.png");
    background-position: 0.4em 50%;
    background-repeat: no-repeat;
    color: #000;
    text-shadow: 0.1rem 0.1rem 0 #fff;
    width: 8em;
}

.fl-theme-yb .idi-prefs-button {
    background-image: url("images/preferences-yellow.png");
    border: 0.1rem solid yellow;
    text-shadow: none;
}

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:

Another Example - Gradients

Gradients are often used for visual effects, as well as giving buttons a 3D effect. The example below shows how to use the UI Options contrast class to improve legibility for contrast modes.

<button class="search-btn">Search</button>

.search-btn {
    background: rgba(70, 140, 170, 1);
    background: -moz-linear-gradient(top, rgba(70, 140, 170, 1) 0%, rgba(19, 88, 118, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(70, 140, 170, 1)), color-stop(100%, rgba(19, 88, 118, 1)));
    background: -webkit-linear-gradient(top, rgba(70, 140, 170, 1) 0%, rgba(19, 88, 118, 1) 100%);
    background: -ms-linear-gradient(top, rgba(70, 140, 170, 1) 0%, rgba(19, 88, 118, 1) 100%);
    background: linear-gradient(to bottom, rgba(70, 140, 170, 1) 0%, rgba(19, 88, 118, 1) 100%);
    border: medium none;
    box-shadow: 0.1rem 0.1rem 0 #135876 inset, 0.1rem 0.1rem 0 #fff;
    color: #fff;
}

.fl-theme-wb .search-btn {
    background: #fff;
    border-color: #000;
    box-shadow: none;
    color: #000;
}

In this example, a button was given a gradient effect:

The CSS for the high-contrast version (in this example, "white-on-black") simply inverts the basic colour scheme to produce a 'button' effect, removing the gradient, shadow, and forcing the background and border colours to conform to the theme colours.