Once User Interface Options or a Preferences Editor is incorporated into your website, it's important to ensure that the site continues to transform correctly as new features are added. As you update your site you will need to test your changes and note how they respond to transformations.
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:
light grey on dark grey
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:
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:
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:
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:
is all of the text in the correct colours?
do buttons and links appear in the selected contrast?
do icons and logos appear in the selected contrast?
does anything still have shadows or gradients in the wrong colours?
are hover and focus styles reasonable?
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:
is all of the text in the correct font?
is the layout of the page still reasonable? some fonts take up more room than others, and sometimes selecting a different font might affect the overall layout of the page.
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:
are links underlined, bolded and enlarged?
are inputs (such as text fields and buttons) enlarged?