Color contrast issue in Celerity

[branchandroot]

A support/bug item was put in by a user who found the cream background color, in the Celerity site scheme, difficult to read on. I wanted to bounces this around here and ask if anyone else has had or heard of similar problems.

If it's an isolated issue, it will probably be best to deal with it via that user's browser styles. If it's more wide-spread, then the scheme should be changed.

The current background color is #f9f9f0 and the text color is #222211. Should these be edged further apart? I would like to strike some kind of happy medium between too-high and too-low contrast, though this may, in the end, not be possible.

Comments

[zvi]

Checked the contrast via a tool which tests for WCAG 1 and WCAG 2 level compliance. The contrast is past the minimums for both tests.

WCAG = Web Content Accessibility Guidelines

[forthwritten]

I personally don't use Celerity because I find the colour scheme too difficult to work with. The problem I have with it isn't the text colour on the background colour, but the visited and unvisited link colours on the background colour (as for usernames on the profile page) and the colour of links on the comment headers (e.g. the username).

I also find the font kind of awkward, but I suspect that's more my issue than a design issue.

[branchandroot]

The brightness of the link colors perhaps? I can't take the visited down too much farther without making it hard to distinguish as a link, but I could probably do something with the unvisited color.

*wry* Of course, no one scheme is going to be right for everyone, which is why there are others in the pipe.

*sighs* Yeah, I'm actually really not fond of arial myself; verdana is much nicer. Unfortunately, PCs render verdana as huge, while Macs render it more in line with other fonts so until the browser-detection script gets cranked in there's no way to use that one without screwing up one side or the other. This is one of my personal pet peeves of web design.

[forthwritten]

It's more than it's too low contrast anyway - there's not enough distinction between the link colour and the background colour. Perhaps switching it to green or brown might work, but I don't think beige has enough contrast and making it brighter won't necessarily fix it.

[branchandroot]

Ah. *nods* Yeah, you're probably going to want one of the other schemes, then.

[rainbow]

Hi, Rho pointed me over here because that's probably me who put in the support request.

I have severe visual processing issues due to a brain injury, and do best with black on white, which is what Celerity was (for me, anyway) utnil suddenly late yesterday.

I've tried both the Trops, but found that they have drop downs, which I have problems using, and also don't have a white background.

Then I tried Lynx, but the links are missing from the side to do things (which is why I use Celerity).

I tried making changes via my browser, but I can't figure out how to make it just do the site scheme pages -- instead it's changing my own layout, which is easy to read for me, and pages for other places. (I use Firefox, and if someone can explain how to change the background for just the site scheme, I would be grateful. In small words, please, since when I get nailed with processing issues I have trouble with more and more processing and get confused too easy.)

[branchandroot]

Hi! Yeah, the css that uses body that I passed on first will affect the journal views too. I think what we want to use is #page.

So what you need to put into your browser styles is:

@-moz-document domain("dreamwidth.org") {
#page { background-color: #ffffff !important; }
}

If you're using FF, the file you're editing should be userContent.css, I believe? So you just paste those three lines in, save, and restart FF. The first line will make sure this only applies to DW, and by using the #page div, we should be able to make it only change site pages.

If you've been using the Stylish plugin, that works a little differently, but its dialogue should let you specify what site you want to apply code to. In which case, specify DW and just paste in the second line.

*considers* Since we didn't get any complaints about too-high contrast with the white background, I'm thinking we might go ahead and switch back, but this should hold you until that can be done!

[rainbow]

Thank you! Before I saw this Paul found a Mozilla addon that let me change the background to white on all DW pages. (It's called Customise Your Web.)

I'm glad you'll be going back to a white background option, though; I know contrast is a tricky accessibility issue, but having the option of site schemes with both less and more contrast instead of all less constrast seems like it will make the site accessible for a wider range of people.

Again, thank you.

[rydra_wong]

Before I saw this Paul found a Mozilla addon that let me change the background to white on all DW pages. (It's called Customise Your Web.)

Oh, that sounds very useful.

Random thought to throw into the discussion: might it be handy if we started compiling a list of resources like that which might be useful for people with particular accessibility needs?

[jeshyr]

Please do compile! It's on my "should really do that..." list but I'm very short on spoons.

[rydra_wong]

I'm afraid I can't volunteer to do it right now, as I'm also pretty much spoonless currently. I was hoping someone else might pick up the idea! *g*

[jeshyr]

We can keep hoping! :)

I'll try to keep track of things people mention, at least.

[jadelennox]

We actually need to fix Lynx so it has no missing links; I prefer Lynx too, for navigation reasons, but it's not fully-featured.

[jeshyr]

Which links are you discussing here - the ones in the create/organize/read/etc. menu, or links like join/subscribe this community and so forth which are usually in a sidebar?

I have a plan for the former, but hadn't thought of the latter yet. I'll post it now...

[rydra_wong]

It's definitely got a strongly tinted background now; in combination with the green it does make it pretty colour-heavy, which may be hard on some people. I tested it out and did find myself wanting to change it back in a hurry (sensory processing issues).

As a practical point, it means that Lynx is the only available site scheme with a white background, right?

Neurologically-based visual processing issues can be very idiosyncratic, so there's never going to be a one-size-fits-all option (I know some people have an easier time reading with a tinted background).

But maybe it might be worth thinking in terms of choices -- making sure that there are at least a couple of site schemes with a white background, for example.

[branchandroot]

A very good point. And, as I was just mentioning above, we didn't get any too-high-contrast complaints on the white, so the balance is probably in favor of going ahead and switching to that.

[smilingslightly]

Along the lines of what everyone else is saying: everybody's different. Celerity is by far the easiest scheme for me to use and I prefer less contrasty styles in general. (I like Celerity's lack of dropdowns, too.) In a sort of aside, because ze doesn't use Dw, my partner can't read #ffffff backgrounds at all because they dramatically worsen hir dyslexia.

So, uh, yeah, the more schemes, the merrier. :)

[iamshadow]

I'm waiting on a site scheme with a dark background and light text.

[branchandroot]

There's one pending. You can see the screenshots of the test pages here. I don't know the exactly timeframe on this or the Blueshift scheme, but I imagine they're in line behind the augh!big-thing-broken!bugs.

[iamshadow]

What's the Blueshift scheme?

[branchandroot]

*rummages up the link* This one: http://wiki.dwscoalition.org/notes/Blueshift_Site_Scheme

[iamshadow]

Ah, thank you.

I'll still hang out for Gradience.