Analyzing WCAG 2.0 examples of user defined colors in browsers
del.icio.us
digg September 4th, 2006
Investigating common failures in the WCAG 2.0 techniques document, I decided to check the HTML code provided as an example to the Common Failure: “F24: Failure of SC 1.4.1 due to specifying foreground colors without specifying background colors or vice versa”. The failure demonstrates a poor technique to the Success Criterion “1.4.1 Text or diagrams, and their background, have a luminosity contrast ratio of at least 5:1. (Level 2)”. The provided HTML examples prevent the browsers from showing user defined color text and background.
I have tested the failure examples in several browsers and discovered that these examples generally do not lead to problems with user-defined styles: 3 sample codes of the 5 have no problems in all tested browsers, and 2 sample codes have problems only in IE 6.0, therefore it is fair to consider this problem an IE bug.
Testing
Browsers: Internet Explorer 6.0 SP2, Internet Explorer 7.0 beta 3, FireFox 1.5, Opera 9.0.
Workflow: I created 5 pages with html taken from the failure examples’ code, inserted some comment text and uploaded the pages to the web. Then I adjusted the browsers to show text, background, and links not in the colors specified by the page author, but in my own user-defined colors: text color - yellow, background color - grey, unvisited links color - white, visited links color - pink. Then I opened each page in every browser and examined them carefully, paying special attention to the colors. The goal of testing was to make sure that the pages would display the user-defined colors (i.e. the author-defined colors would be totally ignored in spite of the way they were set in HTML).
To set user-defined colors in a browser:
- Internet Explorer. Open menu Tools > Internet Options. In the Internet Options dialog:
- Press Colors button, and in the Colors dialog uncheck the “Use Windows colors” box and set your chosen colors, press Ok to close the dialog.
- Press Accessibility button and in the Accessibility dialog check the following 3 boxes under the “Formatting” label: Ignore colors specified on Web pages, Ignore font styles specified on Web pages, and Ignore font sizes specified on Web pages. Press Ok to close the dialog.
- Press Ok.
- FireFox. Open menu Tools > Options.
- Select the “Content” tab and press the Colors button in the Fonts & Colors section. In the Colors dialog: set colors, uncheck the “Use system colors” box, and uncheck the “Allow pages to choose their own colors, instead of my selections above” box. Press Ok.
- Press Ok.
- Opera. To quickly test pages in this browser, I decided not to look for custom color settings but to use the standard Opera means. On the pane opened by clicking on “Glasses” button, I selected User mode instead of Author mode and set High contrast schema: black background, white text and links.
Pages to test
http://www.erigami.com/test/wcag/styles1.html - HTML code sets background color to white
http://www.erigami.com/test/wcag/styles2.html - HTML code sets background color to white
http://www.erigami.com/test/wcag/styles3.html - HTML code sets text color to white
http://www.erigami.com/test/wcag/styles4.html - HTML code sets text color to white
http://www.erigami.com/test/wcag/styles5.html - HTML code sets hyperlink color to red
Test results
The results of my tests are presented in the following table. For every page and browser the table contains a test result: whether the page was displayed with user-defined colors (marked as “ok”) or HTML defined (marked as “Not ok”). And if not, a description of the discrepancy is provided.
| styles1 | styles2 | styles3 | styles4 | styles5 | |
|---|---|---|---|---|---|
| IE 6.0 | Not ok. Background color is from the HTML code. |
Not ok. Background color is from the HTML code. |
Ok | Ok | Ok |
| IE 7.0 | Ok | Ok | Ok | Ok | Ok |
| FF | Ok | Ok | Ok | Ok | Ok |
| Opera | Ok | Ok | Ok | Ok | Ok |
Conclusion: Generally the page colors were those I expected. For example, if I set the browser so that the link color would be white, it was white in spite of any colors set in the page’s source. It was the same with the other colors, so I always had the desired color contrast. I ran into problems only with the first two samples when I was using the IE 6.0 browser. For some reason IE ignored my background and preferred the background set on the page. This is likely a bug, since it has been worked out with IE 7.0. Other browsers have no problems with showing user-defined colors on all test pages.
Written by Irina Kochetova
Entry Filed under: Web Accessibility
Trackback this post