{"id":5161,"date":"2024-04-14T22:26:06","date_gmt":"2024-04-14T14:26:06","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5161"},"modified":"2024-04-14T22:31:12","modified_gmt":"2024-04-14T14:31:12","slug":"ensure-your-text-adheres-to-color-contrast-standards","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/ensure-your-text-adheres-to-color-contrast-standards\/","title":{"rendered":"Ensure your text adheres to color contrast standards"},"content":{"rendered":"<div class=\"docs_rich-text w-richtext\">Perhaps you appreciate the subtle utilization of dim text against an even darker backdrop \u2014 however, it&#8217;s likely to be unreadable by most individuals visiting your website, especially those with visual impairments. Prioritize inclusivity and accessibility in your design decisions, and utilize the Color contrast checker in the color picker to ensure that all individuals can comprehend your text.<\/p>\n<p>In the upcoming section, you will discover all there is to know about the Color contrast checker, covering the following points:<\/p>\n<ol>\n<li>Comprehend the significance of adequate color contrast ratios<\/li>\n<li>Validate your color contrast ratio<\/li>\n<li>Rectify your color contrast ratio<\/li>\n<\/ol>\n<p>Enroll in the complete accessibility course.\u00a0<\/p>\n<h2>Comprehend the significance of adequate color contrast ratios<\/h2>\n<p>Adequate color contrast between text and the background enhances the user experience, accessibility, and readability on your site for all, particularly benefiting those with visual disabilities. <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#contrast-minimum\" target=\"_blank\" rel=\"noopener\">WCAG provides recommended ratios<\/a> for optimal contrast based on text size. Contrast represents the difference in brightness (or luminance) between two colors and ranges from 1:1 (e.g., white text on a white background) to 21:1 (e.g., black text on a white background).<\/p>\n<h3>Color contrast guidelines for AA (minimum)<\/h3>\n<ul>\n<li>Text and visuals should have a ratio of 4.5:1<\/li>\n<li>Ample text (18 point or 14 point bold) requires a ratio of 3:1<\/li>\n<\/ul>\n<h3>Color contrast guidelines for AAA (enhanced)<\/h3>\n<ul>\n<li>Text and visuals should have a ratio of 7:1<\/li>\n<li>Ample text (18 point or 14 point bold) necessitates a ratio of 4.5:1<\/li>\n<\/ul>\n<blockquote><p><strong>Note:<\/strong> While WCAG contrast ratio guidelines do not directly affect images (including logos), it&#8217;s recommended to adhere to a 4.5:1 ratio for images containing prominent text. However, be mindful that images of text can pose challenges and often remain incomprehensible to visitors with visual disabilities \u2014 opt for stylized text whenever feasible.<\/p><\/blockquote>\n<h2>Validate your color contrast ratio<\/h2>\n<p>The adequacy of the contrast ratio relies on the foreground (your text) and background colors (the solid backdrop against which the text is displayed), as well as font size and weight. Utilize Webflow\u2019s built-in color contrast checker to assess the contrast ratio of text on your site and make adjustments if necessary. This can be accomplished directly from the color picker in Webflow, which not only showcases the contrast ratio of text but also the corresponding WCAG level rating.\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b949c5977079d53e626be9_60ad18092b2fb69e9051af6e_qndinq1zhtlacimffemkfpsqgxvquugk9lhom5gy6n9nx1wttcc5mgw5cjue1s695bzhq6ud9lw5uwzlnwnigo7avz_quwyalxgt3vljnknsn1ptfpctfgfdmntkuk_rdgt7gile.png\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"Arrows point to a dark gray heading (the foreground) against a black background.\" title=\"64b949c5977079d53e626be9_60ad18092b2fb69e9051af6e_qndinq1zhtlacimffemkfpsqgxvquugk9lhom5gy6n9nx1wttcc5mgw5cjue1s695bzhq6ud9lw5uwzlnwnigo7avz_quwyalxgt3vljnknsn1ptfpctfgfdmntkuk_rdgt7gile\"><\/div>\n<\/figure>\n<blockquote><p><strong>Note: <\/strong>The Color contrast checker does not assess the contrast of text elements against image elements (e.g., if your text is situated atop an image).<\/p><\/blockquote>\n<p>To evaluate the contrast ratio of your text:<\/p>\n<ol>\n<li>Select the <strong>text element<\/strong> you wish to assess<\/li>\n<li>Access <strong>Style panel<\/strong> &gt; <strong>Typography<\/strong><\/li>\n<li>Click on the <strong>color swatch<\/strong> of the text element to unveil the color picker<\/li>\n<li>Review the <strong>Contrast ratio<\/strong> section within the color picker to ascertain your text&#8217;s WCAG level rating (e.g., Fail, AA, or AAA)<\/li>\n<\/ol>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b949c5977079d53e626bf8_60ad1809a31b7bc6a5f2fe54_r-azjp9wmoss6hf-iulevbozaj9t6vp8kytmdj0ijed-__gz5h9-ddbi774gcj6ohnu4cfnzmbotmehp3vw1yxfz64a6xvtv3lnbj2y4fochooai4sbxx0qptaz9jpa4ckhhoalg.png\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"A dark gray heading against a black background shows a WCAG contrast ratio \u201cFail\u201d rating.\u00a0\" title=\"64b949c5977079d53e626bf8_60ad1809a31b7bc6a5f2fe54_r-azjp9wmoss6hf-iulevbozaj9t6vp8kytmdj0ijed-__gz5h9-ddbi774gcj6ohnu4cfnzmbotmehp3vw1yxfz64a6xvtv3lnbj2y4fochooai4sbxx0qptaz9jpa4ckhhoalg\"><\/div>\n<\/figure>\n<p>The WCAG level rating is determined by the background color and the font size, weight, and color, which is clarified with explanatory text that appears upon clicking the question mark icon. (This contrast ratio segment exclusively appears while modifying the typography color of text elements.)<\/p>\n<p>To access the Contrast ratio explanatory text for your text element:\u00a0<\/p>\n<ol>\n<li>Select the <strong>text element<\/strong> of interest<\/li>\n<li>Open the <strong>Style panel<\/strong> &gt; <strong>Typography<\/strong><\/li>\n<li>Click on the <strong>color swatch<\/strong> of the text element to activate the color picker<\/li>\n<li>Press the <strong>\u201cquestion mark\u201d icon<\/strong> associated with Contrast ratio\u00a0<\/li>\n<\/ol>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b949c5977079d53e626bf5_60ad180a72b28a37ccb88a31_jxgpumqgicobmgg4ka_ssy4pjp23yafsyntb7kxlxkk00g7pn-n7-gkfpkgso6w3-xletnuqoadcbb7raes06fg1grf5u1akh8fxfo6xnsks-5gbxm9kcc9ifcqizlylnwdrywd2.png\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The Color contrast ratio checker highlights the \u201cquestion mark\u201d icon that can be pressed to read helper text.\" title=\"64b949c5977079d53e626bf5_60ad180a72b28a37ccb88a31_jxgpumqgicobmgg4ka_ssy4pjp23yafsyntb7kxlxkk00g7pn-n7-gkfpkgso6w3-xletnuqoadcbb7raes06fg1grf5u1akh8fxfo6xnsks-5gbxm9kcc9ifcqizlylnwdrywd2\"><\/div>\n<\/figure>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b949c5977079d53e626c14_60ad180ab5b2533770788ab7_7oiq7mi4cvyfkij8cl8-vfj8nseyzkrseou1ghniuodz95se4zg0lw_wiptu1bjp43ei3qvnodhwju68lzeqar9vyfdd7nxbfq5d_tqsccqb5gxyraq_x-tcmjxclqvipzyt_77m.png\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"Helper text is highlighted in the Color contrast ratio checker.\" title=\"64b949c5977079d53e626c14_60ad180ab5b2533770788ab7_7oiq7mi4cvyfkij8cl8-vfj8nseyzkrseou1ghniuodz95se4zg0lw_wiptu1bjp43ei3qvnodhwju68lzeqar9vyfdd7nxbfq5d_tqsccqb5gxyraq_x-tcmjxclqvipzyt_77m\"><\/div>\n<\/figure>\n<h2>Rectify your color contrast ratio<\/h2>\n<p>If your text is categorized as failing the WCAG contrast ratio assessment (Fail), consider altering the text color to a higher contrast option. As you modify your text color, you will observe a rating of AA (minimum for passing) or AAA (even more preferable).\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b949c5977079d53e626c17_60ad180a9ca7b3dea05ede95_jv74uvxnj4qcil47l3tnosmhgz5xckt77laua7r_jgabp_imngstjdy7o6niyz62rl-m1coxow9ujhaa8wtmhqkegfiffwvgwdu-hwp6on-uytifvezpgcuq5y6oft7i7yc6bmt0.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b949c5977079d53e626c17_60ad180a9ca7b3dea05ede95_jv74uvxnj4qcil47l3tnosmhgz5xckt77laua7r_jgabp_imngstjdy7o6niyz62rl-m1coxow9ujhaa8wtmhqkegfiffwvgwdu-hwp6on-uytifvezpgcuq5y6oft7i7yc6bmt0\"><\/div><figcaption>A medium gray heading against a black background shows a WCAG contrast ratio rating of AA (minimum to pass).\u00a0<\/figcaption><\/figure>\n<figure\n\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b949c5977079d53e626bf0_60ad180ad3fe9c7f6e1a6320_hgpqje0a47y-b1mdiombn4lp7tlyvxe-g3hp3kiazj4xke8rph9jste-lcnvd_m1wim9em-4vnjjvh3cdaaknnyqm2y4m1gt5wibwoo4mjhwy3yx1dk3r5hmx8ka8gyu8whthoka.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b949c5977079d53e626bf0_60ad180ad3fe9c7f6e1a6320_hgpqje0a47y-b1mdiombn4lp7tlyvxe-g3hp3kiazj4xke8rph9jste-lcnvd_m1wim9em-4vnjjvh3cdaaknnyqm2y4m1gt5wibwoo4mjhwy3yx1dk3r5hmx8ka8gyu8whthoka\"><\/div><figcaption>The headline in a pale gray against a dark backdrop illustrates a WCAG contrast ratio score of AAA (the highest level).\u00a0<\/figcaption><\/figure>\n<p>You can also select the Contrast ratio eye symbol to present the bracket where you achieve AAA, AA, and Fail contrast ratio guidelines amid your forefront shade and any solid backdrop color.\u00a0<\/p>\n<p>To inspect the WCAG grade scope of your text color:\u00a0<\/p>\n<ol>\n<li>Choose the <strong>text element<\/strong> you wish to examine<\/li>\n<li>Unveil <strong>Style panel<\/strong> &gt; <strong>Typography<\/strong><\/li>\n<li>Hit the text element\u2019s <strong>color swatch<\/strong> to access the color selector<\/li>\n<li>Flip the <strong>\u201ceye\u201d symbol<\/strong> at the far end of the Contrast ratio division on and off to observe the WCAG grade scope<\/li>\n<\/ol>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b949c5977079d53e626be6_60ad180a14d4df22dcf07168_whtkvnkouxtdtitfumzihre2et69a_nyxkan-ipk6z50hwi_ybnyq2cw_rrthdncnkzobnpo8971kcivupdfoavwy9qgsxmckn8mfjng6i7fbwfvip04dfesa_d-fusnibsdfswq.png\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The Color contrast checker displays ratio range patterns between AAA to Fail by clicking the \u201ceye\u201d icon in the color picker.\" title=\"64b949c5977079d53e626be6_60ad180a14d4df22dcf07168_whtkvnkouxtdtitfumzihre2et69a_nyxkan-ipk6z50hwi_ybnyq2cw_rrthdncnkzobnpo8971kcivupdfoavwy9qgsxmckn8mfjng6i7fbwfvip04dfesa_d-fusnibsdfswq\"><\/div>\n<\/figure>\n<p>The range patterns are computed by examining each blend of saturation and luminosity for shade and transparency \u2014 the curves adjust as you modify shade or transparency. Bright text on a dark backdrop will demonstrate an AAA rating in the top left of the spectrum to Fail in the bottom right, and vice versa for dark text against a light backdrop.<\/p>\n<blockquote><p><strong>Fascinating:<\/strong> The shade contrast analyzer deploys an algorithm to evaluate the luminosity contrast between 2 shades (contrast) and rates it in accordance with WCAG guidelines for text size. The algorithm makes alterations for font thickness as bold text might be tinier and still legible. Tinier text necessitates a greater luminosity contrast to be readable.<\/p><\/blockquote>\n<p>Find out more about the significance of shade contrast in this part of our Webflow University video tutorial on Advanced web typography and understand how to enhance your website\u2019s accessibility.<strong>\u200d<\/strong><\/p>\n<p><strong>WCAG References: <\/strong><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/contrast-minimum.html\" target=\"_blank\" rel=\"noopener\">Success Criterion 1.4.3: Contrast (Minimum)<\/a>, <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/contrast-minimum.html\" target=\"_blank\" rel=\"noopener\">Success Criterion 1.4.6: Contrast (Enhanced)<\/a>, <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/contrast-enhanced.html\" target=\"_blank\" rel=\"noopener\">Success Criterion 1.4.5: Images of Text<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use Webflow\u2019s Color contrast checker in the color picker to make sure your text meets accessibility standards and is legible against your background.","protected":false},"author":2,"featured_media":5282,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-5161","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5161"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5161\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5185"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}