Accessibility; font size and color contrast

7 Dec 2012 - 5:39am
1 year ago
15 replies
3148 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.

Comments

9 Dec 2012 - 9:58pm
RMattB
2010

This one differentiates between fonts above and below 18pt: http://snook.ca/technical/colour_contrast/colour.html

10 Dec 2012 - 10:38am
RichExperiences
2010

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?

 

 

10 Dec 2012 - 1:35pm
philipbrook
2008

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.

 

 

10 Dec 2012 - 2:31pm
jonkarpoff
2009

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.

 

AttachmentSize
Text Test 1.jpg 81.47 KB
Type Test 2.jpg 56.63 KB
11 Dec 2012 - 10:28am
philipbrook
2008

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

11 Dec 2012 - 10:28am
philipbrook
2008

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

11 Dec 2012 - 10:28am
philipbrook
2008

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

10 Dec 2012 - 2:46pm
RichExperiences
2010

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

 

 

11 Dec 2012 - 10:21am
philipbrook
2008

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.

11 Dec 2012 - 10:37am
RichExperiences
2010

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.

 

11 Dec 2012 - 10:58am
philipbrook
2008

I know that mid-40s feeling...!

;-)

11 Dec 2012 - 11:04am
philipbrook
2008

I know that mid-40s feeling...!

;-)

12 Dec 2012 - 9:57am
Doug Anderson
2004

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!

12 Dec 2012 - 1:39pm
RichExperiences
2010

Quick note - My comments are about traditional screen based media. Not print, or e-ink, etc.  Just wanted to clarify...

12 Dec 2012 - 3:17pm
jonkarpoff
2009

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.

Syndicate content Get the feed