{"id":59,"date":"2020-11-05T21:55:24","date_gmt":"2020-11-05T21:55:24","guid":{"rendered":"http:\/\/sites.msudenver.edu\/accessible-design\/?page_id=59"},"modified":"2020-11-19T05:51:00","modified_gmt":"2020-11-19T05:51:00","slug":"color-ratios","status":"publish","type":"page","link":"https:\/\/sites.msudenver.edu\/accessible-design\/color-ratios\/","title":{"rendered":"Color Ratios"},"content":{"rendered":"<p class=\"p1\"><span style=\"font-size: 14pt;font-family: verdana, geneva, sans-serif\">A basic rule with color contrasts is to remember to have at least 4.5:1 ratio between colors, according to <span class=\"s1\">Web Content <\/span>Accessibility Guidelines (WCAG). This rule is most pertinent when using regular sized text, where as for larger text a rule of 3:1 ratio is successful .<\/span><\/p>\n<p class=\"p1\"><span style=\"font-size: 14pt;font-family: verdana, geneva, sans-serif\">There are different tools to reference when designing for <\/span><br \/>\n<span style=\"font-size: 14pt;font-family: verdana, geneva, sans-serif\">color accessibility, here are our favorite ones:<\/span><\/p>\n<p class=\"p1\"><span style=\"font-size: 14pt;font-family: verdana, geneva, sans-serif\"><a href=\"https:\/\/colorable.jxnblk.com\/\"><span class=\"s1\">C<\/span><span class=\"s2\">olorable<br \/>\n<\/span><\/a><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\"><span class=\"s1\">Contrast Checker Online<\/span><\/a><span class=\"s2\"><br \/>\n<\/span><a href=\"https:\/\/color.adobe.com\/create\/color-accessibility\"><span class=\"s1\">Adobe Color Accessibility Tool<\/span><\/a><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><\/h2>\n<figure id=\"attachment_232\" aria-describedby=\"caption-attachment-232\" style=\"width: 967px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-232\" src=\"http:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/color-ratio.jpg\" alt=\"Color ratio chart for text\" width=\"967\" height=\"631\" srcset=\"https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/color-ratio.jpg 766w, https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/color-ratio-300x196.jpg 300w\" sizes=\"auto, (max-width: 967px) 100vw, 967px\" \/><figcaption id=\"caption-attachment-232\" class=\"wp-caption-text\">Color ratio chart for text<\/figcaption><\/figure>\n<h2><\/h2>\n<p><strong><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\">\u00a0<\/span><\/strong><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A basic rule with color contrasts is to remember to have at least 4.5:1 ratio between colors, according to Web Content Accessibility Guidelines (WCAG). This rule is most pertinent when using regular sized text, where as for larger text a rule of 3:1 ratio is [&hellip;]<\/p>\n","protected":false},"author":860,"featured_media":0,"parent":0,"menu_order":0,"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-59","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/pages\/59","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\/860"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/comments?post=59"}],"version-history":[{"count":0,"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/pages\/59\/revisions"}],"wp:attachment":[{"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/media?parent=59"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}