a11yTips — Provide enhanced contrasts for regular sized text

Provide enhanced contrasts for regular sized text

no. 045

Make sure a contrast ratio of at least 7 to 1 exists between text and background

Color combinations are used to convey information all the time, but how efficient the conveyed information is entirely depends on the end user’s ability to perceive contrast between those colors. Therefore, making sure that end users can perceive the difference between the color of the text and the color of the background behind the text is critical. Hence, the importance of providing a sufficient contrast ratio, whenever color combinations are used.

To do so, simply make sure that any foreground/background color combinations for regular sized text that is less than 18 point (if not bold) and less than 14 point (if bold) meets a ratio of at least 7 to 1. Color contrast ratio can be easily measured, using readily available tools on the Web, such as the one referenced in “Testing Methodology” below. Doing so will ensure that people who are colorblind – but also people with low vision or those viewing the content in less-than-optimal lighting settings – will have better chances of adequately perceiving colors.

User Story

As a colorblind user, I want interfaces to rely [...]

Read article at dboudreau.tumblr.com

Article Taxonomies

Categories:
Fatal error: Uncaught Error: Object of class WP_Error could not be converted to string in /home/webable/www/www/wp-content/themes/webable/content-mcm.php:65 Stack trace: #0 /home/webable/www/www/wp-includes/template.php(792): require() #1 /home/webable/www/www/wp-includes/template.php(725): load_template('/home/webable/w...', false, Array) #2 /home/webable/www/www/wp-includes/general-template.php(206): locate_template(Array, true, false, Array) #3 /home/webable/www/www/wp-content/themes/webable/single-mcm_article.php(15): get_template_part('content-mcm') #4 /home/webable/www/www/wp-includes/template-loader.php(106): include('/home/webable/w...') #5 /home/webable/www/www/wp-blog-header.php(19): require_once('/home/webable/w...') #6 /home/webable/www/www/index.php(17): require('/home/webable/w...') #7 {main} thrown in /home/webable/www/www/wp-content/themes/webable/content-mcm.php on line 65