a11yTips — Provide sufficient contrasts for large sized text

Provide sufficient contrasts for large sized text

no. 041

Make sure a contrast ratio of at least 3 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 large sized text that is at least 18 point (if not bold) or at least 14 point (if bold) meets a minimum of 3 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 on color [...]

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(812): require() #1 /home/webable/www/www/wp-includes/template.php(745): 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