About this Service
This service has been provided to allow you to check the validity of your CSS against the W3C's validation service, along with a colour contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement. If the CSS is specified by a URL, it will be loaded into the text area to offer an option to make changes for testing without having to re-upload.
A special thank you to Roberto Scano who suggested extending the service to incorporate the validation of CSS, and validating units of measurement. Thanks to Roberto, an Italian version of this service is also available at Webaccessibile.org
Guideline 2.2 of the Web Content Accessibility Guidelines 1.0 requires that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits, or when viewed on a black and white screen. Two colours provide good colour visibility if the brightness difference and the colour difference between the two colours are greater than a set range. They suggest a colour contrast algorithm, which is used in this test. The algorithm is under development, and may be likely to change. Any changes to their algorithm will be updated on this page.
This page is provided to allow you to check the contrast of two colours using the W3C's colour contrast algorithm. You may specify an external style sheet, or paste CSS into the text box using the appropriate forms below.
Units of Measurement
Guideline 3.4 of the Web Content Accessibility Guidelines 1.0 suggests using relative rather than absolute units for style sheet property values. Relative sizes include em (where 1 em is equivalent to the font-size) and percentages. Although pixels are a relative unit of measurement, the actual size is unknown as it depends on the output medium. Font-sizes specified in pixels cannot be changed by the visitor in some user agents, so are treated as though they're an absolute unit of measurement.
If a foreground colour is specified without a background or vice versa, it's not possible to determine the contrast from the CSS alone, as it would depend on how it was applied to the HTML document tree. A similar situation arises if transparent is used as a property value. In these situations, the contrast is reported as a warning, as it requires looking at to determine if the parent node provides sufficient contrast.
If the physical characteristics of the output medium are known, then it's feasible to use absolute units of measurement. This test doesn't take that into consideration, and will report it as an error.
Enter the URL for the style sheet you wish to examine, or enter the CSS directly into the local text area.