Accessibility; font size and color contrast
7 Dec 2012 - 5:39am
15 replies
1865 reads
chrizz
2012
i'm looking for a tool (or information) regarding accessibility. of course i know the common tools and w3c pages. what i'm looking for is a way to check the combination of fontsize and color-contrast.
tools like Colour contrast Analyzer are nice and helpful, but i'm absolutely sure contrast can be lower using - for example - helvetica/50px/bold instead of times/12px/light/italic.
Get the feed
Comments
This one differentiates between fonts above and below 18pt: http://snook.ca/technical/colour_contrast/colour.html
Hello -
Thanks for posting. This touches on a long standing belief that I've had about body copy and contrast. I haven't looked into the official accessibity standards lately. Can either of you toss up you top 2-3 links for the official guidelines, and any specific to this issue?
http://www.w3.org/standards/webdesign/accessibility
I've always been of the opinion that while Buttons, handrails and supporting graphics could be justified to have light text on dark backgrounds that body copy should without question never be used with dark background. That's what we learned in school, it's intuitive, it shows empathy for the medium.... and more importantly it shows emapthy for average user, let alone those with accesibility issues.
Thoughts?
Normal 0 false false false EN-GB JA X-NONE
Who on earth told you this? "body copy should without question never be used with dark background." I’m laughing to myself here. They should probably be fired from their teaching post!
Reading is task oriented, so presentation ought to reflect the task in hand (form follows function). The copy that is being presented could be short and attention grabbing which requires a different treatment from copy that is to be read and absorbed in depth. e.g an advert Vs a page of instructions.
W3 tools give an idea of levels of contrast between type and background colour (classical painters would recognise this concept as figure Vs ground). For other people with less pronounced visual impairments of those who are 'normal' in sight terms, adequate contrast is the thing to maintain. This contrast may be a reversal, light out of dark. For some people who suffer from certain macular disorders, fonts reversed out of a dark background help readability. There are many variants but we're talking AAA here, so relatively infrequent. Such users sometimes use their own CSS to override the system.
The key with accessibility is to decide what level is appropriate for the target personas and the resources of the organisation to maintain that level. E.g. AAA is really complex and expensive to create let alone maintain, due to the minutae of conflicting demands (hence why the UK Government mandated AA not AAA as a minimum for all new Euro government web sites when they were in charge of that aspect of Euro law-making).
50px helvetica bold would be more legible than Times 12px italic, but neither would be particularly readable. Typographers use variations from the normal to create visual emphasis, mimicking the human voice. The example of "helvetica/50px/bold instead of times/12px/light/italic," you cite are examples of type used for emphatic effect, the latter a kind of whisper but the former is more of a shout.
And that leads me onto the third bit of the puzzle is how colour and fonts are used to create an emotional appeal and brand differentiation, hence why we don’t have the world represented in 12pt courier. But that’s a whole other topic…
Having said that, irrespective of colour contrast, animated copy (text) and copy over images or textures can create issues for some people, low vision, seizure disorder or have a low reading age, but can be great to create a emotional appeal and brand differentiation. W3 guidelines address this stuff too.
First, the required contrast level of text is inversely proportional to the size and thickness of the font. Small type with thin strokes requires high contrast whereas a large headline in a bold typeface requires less. The designer should avoid the regular use of light type on a dark background. However, it can be a useful tool for increasing visual impact and if done correctly can provide a very high level of contrast and readability. The rule of thumb in typographic design is to increase type size by 1 point and increase boldness by 1 step (demi-bold to bold for example) when using white type on black. This is because of the perception ofthe Human eye that a black background intrudes into light-colored objects. A further good practice is careful font selection -- particularly with serif fonts where the thin strokes can 'break up' against a dark background if toothin.
Kodak and others published extensive studies in the 70's that found that white type on a black background was as easy to read if the proper typographic design practices were followed. Further, the use of reveresed type increased visual attraction and increased retention of the information read. These studies can be empirically demonstrated by reading a teleprompter screen.
It shouild be noted that Accessibility and Usability standards do not address white text on black directly but only require the use of sufficient contrast. Of course type size matters and clashing or vibrating combinations of color must be avoided.
The bottomline is that there is nothing wrong with the use of white type on a black background and if you want a strong emotional response, high retention strong visual attraction then its use becomes very useful.
One last thing. There is seldom a design rule that can't be broken if done so in a fashion that works and is appropriate for the use.
See attachments.
Preaching to the choir here!
There is seldom a design rule that can't be broken if done so in a fashion that works and is appropriate for the use
Preaching to the choir here!
There is seldom a design rule that can't be broken if done so in a fashion that works and is appropriate for the use
Preaching to the choir here!
There is seldom a design rule that can't be broken if done so in a fashion that works and is appropriate for the use
Wow. Ok. I guess I asked for it... But , now I'm laughing at you. Wtf? My teachers should be fired??? I think you need to chill out a bit.
Of course reading is task oriented and should be user focused. I'm on a phone right now and can't reply In depth, but when you start off the way you did it sure make you sound naive. Btw, do you believe all standards and research you read?
Also you made my point above, so thank for that ..
Regard
Q chill out a bit.
If they are giving you a bad steer you want to ask the question - even if tongue in cheek! You got me laughing again.
Q do you believe all standards and research you read
Nope. Standards are simply markers for folks to use. You don't have to believe them but sometimes you are compelled to use them.
Research always has a context and a bias which implicitly affects the findings. It may be believable but may not be true or useful.
Hey Phillip - My bad. Let me reread these posts and reply again. When i read this yesterday on my phone it appear a bit more cutting in tone. Sorry about that. You know what is so funny, but not really for me, is that in my mid 40s I'm needing reading glasses. While it really feels like I'm getting the true sense of the message on a small device without glasses, obvibously I'm not.
Teachable moment.
Thanks for engaging on this with me.
I know that mid-40s feeling...!
;-)
I know that mid-40s feeling...!
;-)
Certainly contexts in which preservation of night vision is important and otherwise darkened environments make light content on dark backgrounds the best-and-only-viable option.
Context isn't everything, but sometimes it's the only thing.
BTW, I can only vaguely recall that mid-40s feeling. Enjoy it!
Quick note - My comments are about traditional screen based media. Not print, or e-ink, etc. Just wanted to clarify...
Can I point out that in the digital world how you paint the text is a variable -- unless embedded in an image.
For accessibility purposes you can have type presented using your CSS and the user can tirn off CSS or use their own CSS using common;y available accessibility tools. The user can make the type larger and select the fore/background color contrast if you use WCAG methodologies. Text readers of course ignore the presentation layer altogether. And then there's the ultimate fallback - reading the ALT tag values.
This is USER experience design where you need to design to the user - to your audience. However, this is User EXPERIENCE design, and the experience -- the emotional response to that experience can be key to your success. Finally, its User Experience DESIGN -- where you have to craft the result to solve a problem using composition, color, contrast, shapes and the negative space around those shapes.
You just have to understand that dark space presses on light space and the light has to be beefed up a bit to fight back. That's not a rule but a principle based on the physiologist response of the human eye. This doesn't usually matter with black type on white but is critical with white type on black.