![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
facetofcathyI decided to sit down and do some studying about web design. I want to skin the AO3 so I can use it with comfort, and no current skins offers that for me. Eventually, I'd like to offer some public skins as well. I'll post about this as I go, but for now, I want to focus on the site as it is today from a fact-based perspective.
The original default gave me a migraine. That's a rare thing for me to get triggered that way. I've since seen many other reports of the same effect, so I would personally appreciate it if the meme that the only thing wrong was one comma in the mobile skin and all other complaints were just about personal taste would vanish in a puff of grey smoke. My reaction was real, and so was that of other people.
I wanted to know why this happened, because I was guessing that the problem was contrast, or maybe the gradient shading on buttons and all the drop shadows, but I wasn't sure. The site default has since been changed to a white background and text that is black or near black in most cases, and I tried it, and it is a little better for me, but I would never be able to use it for long periods of time.
I conducted some tests on the current default skin using Firebug to reveal the colours, and applying this principle of universal design and accessibility from The W3C Techniques For Accessibility Evaluation And Repair Tools:
That's a lot of numbers, so let's do the math on the current default skin at the AO3 and see what it means as a test.
In many places the visited link colour is #666666 which has RGB values of 102,102,102
The background colour is nearly always white or #ffffff which has RGB values of 255,255,255
So the colour brightness of the visited link colour is:
(102*299+102*587+102*114)/1000
Which, I'll clue you into a shortcut here. Where the R G and B values are all the same, that number is the colour brightness value.
So the colour brightness of the visited link colour is 102 and a white background is 255.
The difference is 153 which is in the acceptable range.
The colour difference is a long formula which I'll let this online calculator do: and the answer is 459, which is under the acceptable range.
So even on a white background the visited link colour fails the accessibility test.
On the buttons, which are a gradient made up mostly of colour #dddddd, the two values returned by the test are 119 and 357, which means it fails twice over.
On some links the hover colour is #999999, which is a paler grey even than the visited link colour and is therefore worse. There are also many borders and shaded areas that use these colours of grey, and I think, some even paler. The general experience of a user is affected by all these contrasts in colour and brightness.
Bottom line:
The default skin as it is right now, fails the most basic test of universal design. The skin designed specifically for low vision users--which seems to only change font sizes, not make any changes to colours, still uses the original skin lavender and grey scheme. It also fails this most basic test in many areas.
This was not one person's responsibility to catch before deploy, and it's not one person's responsibility to fix now. I'm not concerned here with whether one person or many people involved care about accessibility. I am concerned with an organizational failure to ensure that the default view of the site is safe and comfortable to use for everyone, or if not, easily fixable by everyone. I am concerned about a lack of visible commitment to applying the principles of accessibility to the site from the beginning. I am particularly concerned that accessibility at the archive not be viewed through the lens of a separation into groups of identified disabled people (blind people using screenreaders, low vision users needing larger fonts) and a falsely normative everybody else.
From what I can find online, it is considered common for people at 40 - 45 with so-called normal vision to start experiencing lower perception of colour contrast and brightness. At any age, human beings experience a range of visual perception on several axes. Computer users, human beings all, require multiple approaches to ensure that everyone can enjoy using a site like the archive.
Right now the archive has a fairly extensive skin selection, many of which fail to meet the minimum standard of accessibility I've discussed here; there is no way to tell until you try one out, what the contrast and brightness differences will be like, even in general terms. There is only one light on dark option, and as many people have mentioned elsewhere there is no easy way for users to change even the base font colour, far less the myriad other colours that text displays in throughout the site. It is therefore the only option for users requiring light on dark, unless they can code.
I understand how much work went into this skin system and the new site design. I'm going to use that work to my advantage and make a skin. I want to do this, I'm expecting to have fun. But I also have to do it.
ETA: If you want to read my long feekback on this, I left a comment on the Intro to Skins post. Since then, with very, very little time spent online, I've sent in 3 support request. One about what happens when the html parser makes your comment too long, one on errors in the default and other skin coding that make keyboard navigation (accessibility!) impossible or difficult, and one on how the skin picker in the footer has no go back to my own skin function.
I did read about a couple of more posts saying how people just didn't like it, there's no accessibility issues. Um, yeah. Okay. Don't let reality get in the way of your stanning there, folks. And by all means, assume your experience is universal, that seems to have been the design principle number one.
ETA October 15, 2012: Since I just made this public and re-read, how about an update?
That bug about big comments I reported? I totally figured that out myself! Go me. Don't have a clue if the explanation I provided led to a fix, but hey, I figured it out. (I also figured out a couple of other bugs and provided fixes. Now, if only crowd sourcing was a little easier than shouting down the well to the little man who has to take dictation and then relay it to the elves actually building this thing.)
The bug about keyboard accessibility led to a whole host of fixes that were enthusiastically worked on by testers and coders. People want to do things right, if only you build them the framework to do it on.
None of the existing colour contrast issues I talk about in this post have been fixed. Subsequent additions to the archive (stats pages) brought back from the dead the grey background problems.
The original default gave me a migraine. That's a rare thing for me to get triggered that way. I've since seen many other reports of the same effect, so I would personally appreciate it if the meme that the only thing wrong was one comma in the mobile skin and all other complaints were just about personal taste would vanish in a puff of grey smoke. My reaction was real, and so was that of other people.
I wanted to know why this happened, because I was guessing that the problem was contrast, or maybe the gradient shading on buttons and all the drop shadows, but I wasn't sure. The site default has since been changed to a white background and text that is black or near black in most cases, and I tried it, and it is a little better for me, but I would never be able to use it for long periods of time.
I conducted some tests on the current default skin using Firebug to reveal the colours, and applying this principle of universal design and accessibility from The W3C Techniques For Accessibility Evaluation And Repair Tools:
Color brightness is determined by the following formula:
((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a color.
Color difference is determined by the following formula:
(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))
The range for color brightness difference is 125. The range for color difference is 500.
That's a lot of numbers, so let's do the math on the current default skin at the AO3 and see what it means as a test.
In many places the visited link colour is #666666 which has RGB values of 102,102,102
The background colour is nearly always white or #ffffff which has RGB values of 255,255,255
So the colour brightness of the visited link colour is:
(102*299+102*587+102*114)/1000
Which, I'll clue you into a shortcut here. Where the R G and B values are all the same, that number is the colour brightness value.
So the colour brightness of the visited link colour is 102 and a white background is 255.
The difference is 153 which is in the acceptable range.
The colour difference is a long formula which I'll let this online calculator do: and the answer is 459, which is under the acceptable range.
So even on a white background the visited link colour fails the accessibility test.
On the buttons, which are a gradient made up mostly of colour #dddddd, the two values returned by the test are 119 and 357, which means it fails twice over.
On some links the hover colour is #999999, which is a paler grey even than the visited link colour and is therefore worse. There are also many borders and shaded areas that use these colours of grey, and I think, some even paler. The general experience of a user is affected by all these contrasts in colour and brightness.
Bottom line:
The default skin as it is right now, fails the most basic test of universal design. The skin designed specifically for low vision users--which seems to only change font sizes, not make any changes to colours, still uses the original skin lavender and grey scheme. It also fails this most basic test in many areas.
This was not one person's responsibility to catch before deploy, and it's not one person's responsibility to fix now. I'm not concerned here with whether one person or many people involved care about accessibility. I am concerned with an organizational failure to ensure that the default view of the site is safe and comfortable to use for everyone, or if not, easily fixable by everyone. I am concerned about a lack of visible commitment to applying the principles of accessibility to the site from the beginning. I am particularly concerned that accessibility at the archive not be viewed through the lens of a separation into groups of identified disabled people (blind people using screenreaders, low vision users needing larger fonts) and a falsely normative everybody else.
From what I can find online, it is considered common for people at 40 - 45 with so-called normal vision to start experiencing lower perception of colour contrast and brightness. At any age, human beings experience a range of visual perception on several axes. Computer users, human beings all, require multiple approaches to ensure that everyone can enjoy using a site like the archive.
Right now the archive has a fairly extensive skin selection, many of which fail to meet the minimum standard of accessibility I've discussed here; there is no way to tell until you try one out, what the contrast and brightness differences will be like, even in general terms. There is only one light on dark option, and as many people have mentioned elsewhere there is no easy way for users to change even the base font colour, far less the myriad other colours that text displays in throughout the site. It is therefore the only option for users requiring light on dark, unless they can code.
I understand how much work went into this skin system and the new site design. I'm going to use that work to my advantage and make a skin. I want to do this, I'm expecting to have fun. But I also have to do it.
ETA: If you want to read my long feekback on this, I left a comment on the Intro to Skins post. Since then, with very, very little time spent online, I've sent in 3 support request. One about what happens when the html parser makes your comment too long, one on errors in the default and other skin coding that make keyboard navigation (accessibility!) impossible or difficult, and one on how the skin picker in the footer has no go back to my own skin function.
I did read about a couple of more posts saying how people just didn't like it, there's no accessibility issues. Um, yeah. Okay. Don't let reality get in the way of your stanning there, folks. And by all means, assume your experience is universal, that seems to have been the design principle number one.
ETA October 15, 2012: Since I just made this public and re-read, how about an update?
That bug about big comments I reported? I totally figured that out myself! Go me. Don't have a clue if the explanation I provided led to a fix, but hey, I figured it out. (I also figured out a couple of other bugs and provided fixes. Now, if only crowd sourcing was a little easier than shouting down the well to the little man who has to take dictation and then relay it to the elves actually building this thing.)
The bug about keyboard accessibility led to a whole host of fixes that were enthusiastically worked on by testers and coders. People want to do things right, if only you build them the framework to do it on.
None of the existing colour contrast issues I talk about in this post have been fixed. Subsequent additions to the archive (stats pages) brought back from the dead the grey background problems.