Contrast Themes

The one thing you're probably least accustomed to thinking about is ensuring support for UIO's contrast themes. These themes transform the user interface into one of four high-contrast or one low contrast colour combinations:

The themes attempt to remove any other colours from the interface, along with gradients, shadows, background images, etc. This type of contrast interface can be extremely helpful for users with different forms of low vision.

UIO applies contrast themes by adding a special class to the body of the document and providing styles that are scoped to that class. You will likely need to create a few more special classes, scoped to the themes, for some areas of your site.

Support for these contrast themes can be ensured by following a few basic guidelines:

How to define special styles for contrast themes

UIO will do a pretty good job of transforming your site into the selected contrast, but some parts might need special attention to ensure that they look. If you do need to define styles for something that doesn't transform automatically, here's how:

Scope your styles to the theme name

UIO add the theme name as a class to the body element. Scope your selector using the class name as shown in the following example. This example is for the yellow-on-black theme, which uses the class name fl-theme-uio-yb:

/* high-contrast background icon for button */
.fl-theme-uio-yb .toolbar .saveButton {
    background-image: url('images/save-yellow.png');
}

Make sure you have styles for all the themes

UIO defines five contrast themes:

If you need to define a style for a contrast theme, you'll most likely need to define if for all the themes. The styles will likely look very similar to each other, with differences only related to the colours:

/* contrast background icon for button. these images have a transparent background */
.fl-theme-uio-yb .toolbar .saveButton { background-image: url('images/save-yellow.png'); }
.fl-theme-uio-wb .toolbar .saveButton { background-image: url('images/save-white.png'); }
.fl-theme-uio-by .toolbar .saveButton,
.fl-theme-uio-bw .toolbar .saveButton { background-image: url('images/save-black.png'); }

.fl-theme-uio-lgdg .toolbar .saveButton { background-image: url('images/save-darkGrey.png'); }

Avoid image tags if background images can be used

If you're using images to give your buttons or menu items a unique look, follow these guidelines:

Testing Your Changes With UIO

Enlarge the font

Open the UI Options interface (be it the Separated Panel or the Full Page version) and use the "Text Size" control (in the "Text and Display" tab) to enlarge the font. Check the site:

Increase the line spacing

Open the UI Options interface (be it the Separated Panel or the Full Page version) and use the "Line Spacing" control (in the "Text and Display" tab) to increase the line spacing. Check the site:

Try each of the themes

Open the UI Options interface (be it the Separated Panel or the Full Page version) and use the "Colour &Contrast" control (in the "Text and Display" tab) to select each of the contrast themes. Check the site:

Try each of the fonts

Open the UI Options interface (be it the Separated Panel or the Full Page version) and use the "Text Style" control (in the "Text and Display" tab) to select each of the different font families. Check the site:

Enhance links and enlarge inputs

Open the UI Options interface (be it the Separated Panel or the Full Page version) and use the controls in the "Links and Buttons" tab to enhance links and buttons. Check the site: