Log in   Register a New Account

Accessify Forum - Discuss Website Accessibility

New to the forum?

Only an email address is required.

Register Here

Already registered? Log In

accessible colors?

  • Reply to topic
  • Post new topic
Reply with quote Hi, I am currently working on making some favelets that style certain elements of a website if they are valid.

What I would like to ask is what would be the best colors to use as "VALID" and "INVALID" as someone once commented that red and green are not a very good choice due to color blindness issues.

Any help would be appreciated. Very Happy
Reply with quote I can't help you with that, but if you're concerned about accessibility, remember checkpoint 2.1 in WCAG 1.0 (priority 1):

Quote:
Ensure that all information conveyed with color is also available without color, for example from context or markup.


In other words, don't rely on color alone to convey important information. That means that you may be able to use red and green, as long as you make sure that there's some other way of discerning the difference (such as bold text or similar).

Tommy has left the building
Reply with quote Hi Dominic,

There aren't really any 'invalid' colours, as it depends on the deficiency a user suffers from. Red and green is a classic, but there are so many others: see this site we found earlier this year http://iamcal.com/toys/colors/. Great for designers! Wink

ATB
Designory UK

Designory :: Design & Marketing
tel: (0845) 056 8392
www.designory.co.uk
Reply with quote Red and Green can cause problems, but so can many other colours. It is not so much the single colour but the way it is used in combination with other colours. I have a degree of colour blindness which makes it difficult for me to determine some of the subtler shades of Green, I confuse them with Brown. My own companies website, until I intervened, used Yellow on Red which was very difficult to distinguish in the way it was used. Avoid using pastel shades. An important thing to remember is to keep as high a contrast between text and background as possible.

Toolman wrote
Quote:
That means that you may be able to use red and green, as long as you make sure that there's some other way of discerning the difference (such as bold text or similar)
Bold text in cetain circumstances would still be difficult to distinguish.

I think there are websites, and some of the more knowledgable may help here, one of which gives a perspective on how the colour blind perceive colour graphically presenting how the combination could be viewed and another giving figures for the contrast between different colours.

As with everything the proof of the pudding is in the eating. Have fun Very Happy

Mike Abbott
Accessible to everyone
Reply with quote So for example if i had an input text box.

If i made the "valid" ones say a 3px black border and the "nonvalid" ones a 1px solid border it would be bypassing the problem with color blindness and keep quite a wide difference between the two.

Any thoughts?

ps.(does anyone have any of my old favelets as i lost them when i changed dodgydom.com, cheers)
Reply with quote That may well work. As a thought, how about changing the border style from solid to dashed Question

Mike Abbott
Accessible to everyone
Reply with quote well, i saw a filter that has to be installed in photoshop and you would be able to see how the color blind people see whatever image that you open in photoshop.
Reply with quote
Mikea wrote:
As with everything the proof of the pudding is in the eating.


Mike,

What does that expression actually mean? On the other side of La Manche this doesn't ring a bell Smile

M.

In these days the young folks is all copy-cats, 'fraid to death they won't be all just alike; as for the old folks, they pray for the advantage o' bein' a little different. Sarah Orne Jewett
Reply with quote The proof of the pudding...

It means that the true value or quality of something can only be judged when it's put to use. The meaning is often summed up, as "results are what count."

Which supposedly came from the term: "The proof of the pudding is in the tasting" meaning that its not the ingredients themselves that make the pudding taste good but the result of using those ingredients to make the pudding.

Much in the same way when you look at a oil painting typically you don't look at the pots of paint themselves, or the canvas but at the picture as a whole.

In some sense its physical evidence, when I see proof of good craftsmanship I know the craftsman is up to the job.

};-) http://www.xhtmlcoder.com/

WVYFC chose the Yorkshire Air Ambulance as the main charity to fund raise for in 2006
Reply with quote Couldn't have put it better myself Robert.

Moose, I thought you were over the Pond (Atlantic) not La Manche which to us British is the English Channel Very Happy

Mike Abbott
Accessible to everyone
Reply with quote
Robert Wellock wrote:
The proof of the pudding...Which supposedly came from the term: "The proof of the pudding is in the tasting" meaning that its not the ingredients themselves that make the pudding taste good but the result of using those ingredients to make the pudding.


Robert,

Much thanks! I actually wonder what pudding is. It isn't a mere filler? Don't remember if I ever had it in my entire life... The expression I asked about assigns some mythical meaning to a pudding Smile Are there any restrictions on what makes a pudding? If there aren't, I'm going to make my first cucumber pudding today :]

MikeA wrote:
Moose, I thought you were over the Pond (Atlantic) not La Manche which to us British is the English Channel


Oh yes, I was cast away there by brutal life and mismatched ambitions. My heart though, is buried on the Continent, where the moose roam free in the rain...

I never learned to use the phrase: British Channel. And I am a moderate Francophile (sp?), so <label for="channel" type="continental" /> has "position: fixed;" in my mind Smile

Thank you both for replies,

The Castaway

In these days the young folks is all copy-cats, 'fraid to death they won't be all just alike; as for the old folks, they pray for the advantage o' bein' a little different. Sarah Orne Jewett
Reply with quote
Dominic Rogers wrote:
So for example if i had an input text box.

If i made the "valid" ones say a 3px black border and the "nonvalid" ones a 1px solid border it would be bypassing the problem with color blindness and keep quite a wide difference between the two.

Any thoughts?

There would still be an accessibility barrier for those using screen readers as they won't "see" the border width.
Reply with quote I wrote
Quote:
I think there are websites, and some of the more knowledgable may help here, one of which gives a perspective on how the colour blind perceive colour
Having looked at another string I found that Gez Lemon has it on Juicy studio http://www.juicystudio.com/services/colourcontrast.asp

Good ere initt

Mike Abbott
Accessible to everyone
Reply with quote
Nathan wrote:
There would still be an accessibility barrier for those using screen readers as they won't "see" the border width.



Just a thought but I don’t think people using screen readers are going to be testing their sites for accessibility are they?? Don’t forget it’s only a favelet to test your forms.

p.s. More marvellous favelets on the way including a much more effective label checker...http://www.dodgydom.com - keep up to date here.
Reply with quote
Mikea wrote:
Avoid using pastel shades.
Of course, this only applies to text against a white or light background, etc. Pastel shades make good backgrounds for black, or dark text, e.g. this site.

Dominic Rogers wrote:
So for example if i had an input text box.

If i made the "valid" ones say a 3px black border and the "nonvalid" ones a 1px solid border it would be bypassing the problem with color blindness and keep quite a wide difference between the two.

Any thoughts?

At the risk of being controversial, I would say this comes back to the question of usability vs. accessibility. Often, quite subtle visual cues are used on a site to improve usability. Changing the border colour or display according to whether a field is correctly entered may help fully sighted, color display enabled users, but is not strictly necessary for the page to be used. Going from thick bright red solid borders, to thin dotted green borders should be discernable to all but the most visually limited screen users - or to screen readers.

Screen reader users would have very little benefit from knowing what form the border has, so this should not be attempted. If the border is changed by changing the fields' class (from "incomplete" to "ok", say), this may sometimes help, and won't hurt; it would also be useful for tuning accessibility later (say by changing audio CSS) following feedback from usability testing (if budgeted) or real users. Changing the title field for an input field will also help with suitable AT.

While I have noted several techniques for improving emphasis of fields (and I'mm sure there are many more), some situations will "fall through the cracks". What matters is that the page is still usable without relying on such hints; provided it does not impede accessibility to any partcular group (as "The Library Test" seems to be an example of), optimizing usability of an already usable page for the typical user is good, and will actually benefit users with unrelated disabilities (e.g. cognitive, hearing or motor disabilities).

Other techniques for form filling usability optimization should also be used. In particular, a form should ideally be filled in in linear (screen reader) order with all necessary information provided before entry (or failing that, in linear tab order). If no backtracking is required, the need for hints as to which fields remain unfilled becomes less for users with "linear" browsers (text-to-speech or braille).

Regards,

David

www.thebeadman.net (Caution: Mature content)

Display posts from previous:   

Page 1 of 2

Goto page 1, 2  Next

All times are GMT

  • Reply to topic
  • Post new topic