{"id":202,"date":"2020-11-12T15:55:49","date_gmt":"2020-11-12T15:55:49","guid":{"rendered":"http:\/\/sites.msudenver.edu\/accessible-design\/?page_id=202"},"modified":"2020-11-19T17:06:58","modified_gmt":"2020-11-19T17:06:58","slug":"non-text-contrast","status":"publish","type":"page","link":"https:\/\/sites.msudenver.edu\/accessible-design\/contrast-scale\/non-text-contrast\/","title":{"rendered":"Non-Text Contrast"},"content":{"rendered":"<p class=\"p1\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\">The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s): user interface components, in order to identify their states and function, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author. Same applies to parts of graphics required to understand the content, except when a particular presentation essential to the information being conveyed.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\"><a href=\"https:\/\/webaim.org\/articles\/contrast\/\">https:\/\/webaim.org\/articles\/contrast\/<\/a><\/span><\/p>\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\"><a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#identify-purpose\">https:\/\/www.w3.org\/TR\/WCAG21\/#identify-purpose<\/a><\/span><\/p>\n<p>&nbsp;<\/p>\n<p class=\"p1\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\"><b>Interface Components<\/b><\/span><\/p>\n<p class=\"p2\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\">that identify state and function:<\/span><\/p>\n<p class=\"p1\"><span style=\"font-family: verdana, geneva, sans-serif\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-181 alignleft\" style=\"font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif\" src=\"http:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/3Asset-2-100.jpg\" alt=\"a looking glass icon for search navigation shows the successful contrast ratio\" width=\"166\" height=\"162\" \/> The looking glass and the adjacent<\/span><\/p>\n<p class=\"p1\"><span style=\"font-family: verdana, geneva, sans-serif\">black color is over 3:1<\/span><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p class=\"p1\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\"><b>Parts of Graphics<\/b><\/span><\/p>\n<p class=\"p2\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\">that are a part the content:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-180 alignleft\" src=\"http:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/3Asset-1-100.jpg\" alt=\"A white cloud and light blue raindrops on a black background. Both the cloud and the raindrops follow the ratio guidelines\" width=\"176\" height=\"173\" \/><\/p>\n<p class=\"p1\"><span style=\"font-family: verdana, geneva, sans-serif\">In this icon both a cloud and raindrops<\/span><\/p>\n<p class=\"p1\"><span style=\"font-family: verdana, geneva, sans-serif\">are important in understanding content.<\/span><\/p>\n<p class=\"p2\">\n","protected":false},"excerpt":{"rendered":"<p>The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s): user interface components, in order to identify their states and function, except for inactive components or where the appearance of the component is determined by the user agent [&hellip;]<\/p>\n","protected":false},"author":870,"featured_media":0,"parent":16,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"class_list":["post-202","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/pages\/202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/users\/870"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/comments?post=202"}],"version-history":[{"count":0,"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/pages\/202\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/pages\/16"}],"wp:attachment":[{"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/media?parent=202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}