{"id":198,"date":"2026-06-19T15:27:06","date_gmt":"2026-06-19T19:27:06","guid":{"rendered":"https:\/\/cms.web.umflint.edu\/accessibility\/?page_id=198"},"modified":"2026-07-06T15:21:04","modified_gmt":"2026-07-06T19:21:04","slug":"color-contrast","status":"publish","type":"page","link":"https:\/\/www.umflint.edu\/accessibility\/color-contrast\/","title":{"rendered":"Color Contrast"},"content":{"rendered":"\n<div class=\"wp-block-cover fb-cover-text-box wp-duotone-black-and-white\" style=\"margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;min-height:100%;aspect-ratio:unset;\"><img decoding=\"async\" class=\"wp-block-cover__image-background\" alt=\"\" src=\"https:\/\/www.umflint.edu\/accessibility\/wp-content\/themes\/flintblock\/assets\/images\/sidewalk-art.jpg\" style=\"object-position:50% 95%\" data-object-fit=\"cover\" data-object-position=\"50% 95%\"\/><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-90 has-background-dim wp-block-cover__gradient-background has-background-gradient has-blue-gradient-gradient-background\"><\/span><div class=\"wp-block-cover__inner-container has-global-padding is-layout-constrained wp-container-core-cover-is-layout-15d3db16 wp-block-cover-is-layout-constrained\">\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--70);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70)\">\n<h1 class=\"wp-block-heading has-brand-white-color has-text-color has-link-color has-xx-large-font-size wp-elements-c0fb5ddfd8710a7b956f36c8c363a24b\">Ensuring Basic Color Contrast<\/h1>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--60)\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-0e47273b wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><nav class=\"is-responsive is-vertical is-style-sidebar is-style-sidebar--1 wp-block-navigation is-layout-flex wp-container-core-navigation-is-layout-bd946717 wp-block-navigation-is-layout-flex\" aria-label=\"Sidebar Navigation\" \n\t\t data-wp-interactive=\"core\/navigation\" data-wp-context='{\"overlayOpenedBy\":{\"click\":false,\"hover\":false,\"focus\":false},\"type\":\"overlay\",\"roleAttribute\":\"\",\"ariaLabel\":\"Menu\"}'><button aria-haspopup=\"dialog\" aria-label=\"Open menu\" class=\"wp-block-navigation__responsive-container-open\" \n\t\t\t\tdata-wp-on--click=\"actions.openMenuOnClick\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t><svg width=\"24\" height=\"24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M4 7.5h16v1.5H4z\"><\/path><path d=\"M4 15h16v1.5H4z\"><\/path><\/svg><\/button>\n\t\t\t\t<div class=\"wp-block-navigation__responsive-container\"  id=\"modal-2\" \n\t\t\t\tdata-wp-class--has-modal-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-class--is-menu-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-watch=\"callbacks.initMenu\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t\tdata-wp-on--focusout=\"actions.handleMenuFocusout\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t>\n\t\t\t\t\t<div class=\"wp-block-navigation__responsive-close\" tabindex=\"-1\">\n\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-dialog\" \n\t\t\t\tdata-wp-bind--aria-modal=\"state.ariaModal\"\n\t\t\t\tdata-wp-bind--aria-label=\"state.ariaLabel\"\n\t\t\t\tdata-wp-bind--role=\"state.roleAttribute\"\n\t\t\t>\n\t\t\t\t\t\t\t<button aria-label=\"Close menu\" class=\"wp-block-navigation__responsive-container-close\" \n\t\t\t\tdata-wp-on--click=\"actions.closeMenuOnClick\"\n\t\t\t><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z\"><\/path><\/svg><\/button>\n\t\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-container-content\" \n\t\t\t\tdata-wp-watch=\"callbacks.focusFirstElement\"\n\t\t\t id=\"modal-2-content\">\n\t\t\t\t\t\t\t\t<ul class=\"wp-block-navigation__container is-responsive is-vertical is-style-sidebar is-style-sidebar--1 wp-block-navigation\"><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/www.umflint.edu\/accessibility\/\"><span class=\"wp-block-navigation-item__label\">Home<\/span><\/a><\/li><li data-wp-context=\"{ &quot;submenuOpenedBy&quot;: { &quot;click&quot;: false, &quot;hover&quot;: false, &quot;focus&quot;: false }, &quot;type&quot;: &quot;submenu&quot;, &quot;modal&quot;: null, &quot;previousFocus&quot;: null }\" data-wp-interactive=\"core\/navigation\" data-wp-on--focusout=\"actions.handleMenuFocusout\" data-wp-on--keydown=\"actions.handleMenuKeydown\" data-wp-on--pointerenter=\"actions.openMenuOnHover\" data-wp-on--pointerleave=\"actions.closeMenuOnHover\" data-wp-watch=\"callbacks.initMenu\" tabindex=\"-1\" class=\"wp-block-navigation-item has-child open-on-hover-click wp-block-navigation-submenu\"><a class=\"wp-block-navigation-item__content\" href=\"https:\/\/www.umflint.edu\/accessibility\/resources\/\"><span class=\"wp-block-navigation-item__label\">Campus Resources<\/span><\/a><button data-wp-bind--aria-expanded=\"state.isMenuOpen\" data-wp-on--click=\"actions.toggleMenuOnClick\" aria-label=\"Campus Resources submenu\" class=\"wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle\" ><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M1.50002 4L6.00002 8L10.5 4\" stroke-width=\"1.5\"><\/path><\/svg><\/button><ul data-wp-on--focus=\"actions.openMenuOnFocus\" class=\"wp-block-navigation__submenu-container wp-block-navigation-submenu\"><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/www.umflint.edu\/accessibility\/resources\/grackle\/\"><span class=\"wp-block-navigation-item__label\">Grackle<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/www.umflint.edu\/accessibility\/resources\/panorama\/\"><span class=\"wp-block-navigation-item__label\">Panorama<\/span><\/a><\/li><li class=\"wp-block-navigation-item open-on-hover-click wp-block-navigation-submenu\"><a class=\"wp-block-navigation-item__content\" href=\"https:\/\/www.umflint.edu\/accessibility\/resources\/syllabus-template\/\"><span class=\"wp-block-navigation-item__label\">Syllabus Template<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/www.umflint.edu\/accessibility\/meeting-minutes-templates\/\"><span class=\"wp-block-navigation-item__label\">Meeting Minutes Templates<\/span><\/a><\/li><\/ul><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/www.umflint.edu\/accessibility\/guides\/\"><span class=\"wp-block-navigation-item__label\">Best Practices Guides<\/span><\/a><\/li><li data-wp-context=\"{ &quot;submenuOpenedBy&quot;: { &quot;click&quot;: false, &quot;hover&quot;: false, &quot;focus&quot;: false }, &quot;type&quot;: &quot;submenu&quot;, &quot;modal&quot;: null, &quot;previousFocus&quot;: null }\" data-wp-interactive=\"core\/navigation\" data-wp-on--focusout=\"actions.handleMenuFocusout\" data-wp-on--keydown=\"actions.handleMenuKeydown\" data-wp-on--pointerenter=\"actions.openMenuOnHover\" data-wp-on--pointerleave=\"actions.closeMenuOnHover\" data-wp-watch=\"callbacks.initMenu\" tabindex=\"-1\" class=\"wp-block-navigation-item has-child open-on-hover-click wp-block-navigation-submenu\"><a class=\"wp-block-navigation-item__content\" href=\"https:\/\/www.umflint.edu\/accessibility\/rethinking-pdfs\/\"><span class=\"wp-block-navigation-item__label\">Rethinking PDFs<\/span><\/a><button data-wp-bind--aria-expanded=\"state.isMenuOpen\" data-wp-on--click=\"actions.toggleMenuOnClick\" aria-label=\"Rethinking PDFs submenu\" class=\"wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle\" ><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M1.50002 4L6.00002 8L10.5 4\" stroke-width=\"1.5\"><\/path><\/svg><\/button><ul data-wp-on--focus=\"actions.openMenuOnFocus\" class=\"wp-block-navigation__submenu-container wp-block-navigation-submenu\"><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/www.umflint.edu\/accessibility\/rethinking-pdfs\/shortcomings-and-frustrations-of-pdfs\/\"><span class=\"wp-block-navigation-item__label\">Shortcomings and Frustrations of PDFs<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/www.umflint.edu\/accessibility\/rethinking-pdfs\/myths-and-paths-forward\/\"><span class=\"wp-block-navigation-item__label\">Myths and Paths Forward<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/www.umflint.edu\/accessibility\/rethinking-pdfs\/sharing-read-only-files\/\"><span class=\"wp-block-navigation-item__label\">Sharing Read-Only Files<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/www.umflint.edu\/accessibility\/rethinking-pdfs\/converting-a-pdf-to-word\/\"><span class=\"wp-block-navigation-item__label\">Converting a PDF to Word<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/www.umflint.edu\/accessibility\/rethinking-pdfs\/pdf-alternatives\/\"><span class=\"wp-block-navigation-item__label\">PDF Alternatives<\/span><\/a><\/li><\/ul><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/www.umflint.edu\/accessibility\/email-archive\/\"><span class=\"wp-block-navigation-item__label\">Email Communications<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/spg.umich.edu\/policy\/601.20\" target=\"_blank\"  ><span class=\"wp-block-navigation-item__label\">Accessibility Standard Practice Guide (SPG)<\/span><\/a><\/li><\/ul>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><\/nav><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n\n\n<h2 class=\"wp-block-heading has-x-large-font-size\">What Is Color Contrast?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Color contrast refers to the difference in lightness or darkness between text and its background. The higher the contrast, the easier it is for everyone to read, especially those with visual impairments. A good rule of thumb is to make sure that your text is easily distinguishable from its background without straining the eyes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-large-font-size\">Why Color Contrast Matters<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Color contrast plays an important role in making text readable for everyone, particularly for students with visual impairments, such as color blindness or low vision. When there isn\u2019t enough contrast between text and its background, some students may struggle to read and understand your content. By ensuring good color contrast, you\u2019re helping everyone engage fully with your materials.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-x-large-font-size\">How to Ensure Good Color Contrast<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Use Dark Text on Light Backgrounds (or Vice Versa)<\/strong>\n<ul class=\"wp-block-list\">\n<li>A simple way to ensure good contrast is to use dark-colored text on a light background (like black text on a white background) or light-colored text on a dark background.<\/li>\n\n\n\n<li>Example:&nbsp;<strong>Black text on a white background<\/strong>&nbsp;is easy to read, while&nbsp;<strong>light gray text on a white background<\/strong>&nbsp;can be difficult for some students to see.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Avoid Similar Colors Together<\/strong>\n<ul class=\"wp-block-list\">\n<li>Avoid placing colors that are too similar next to each other, like light blue text on a light gray background. This lack of contrast makes it difficult for some students to read.<\/li>\n\n\n\n<li>Example: Instead of&nbsp;<strong>light blue text on a gray background<\/strong>, use&nbsp;<strong>navy blue text on a white or light background<\/strong>&nbsp;for better clarity.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Use Online Tools to Check Contrast<\/strong>\n<ul class=\"wp-block-list\">\n<li>There are free online tools, like the&nbsp;<a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noreferrer noopener\">WebAIM Contrast Checker<\/a>, that can help you see if your color combinations are accessible.<\/li>\n\n\n\n<li>Simply input your text color and background color, and the tool will tell you if the contrast is good enough to be readable by everyone.<\/li>\n\n\n\n<li>In Canvas, use the&nbsp;<a href=\"https:\/\/community.canvaslms.com\/t5\/Canvas-Basics-Guide\/How-do-I-use-the-Accessibility-Checker-in-the-Rich-Content\/ta-p\/618238\" target=\"_blank\" rel=\"noreferrer noopener\">accessibility checking tool<\/a>&nbsp;to evaluate color contrast along with other accessibility issues.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading has-x-large-font-size\">Examples of Good vs. Poor Color Contrast<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-grid wp-container-core-group-is-layout-ddbf6ee2 wp-block-group-is-layout-grid\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-bd946717 wp-block-group-is-layout-flex\">\n<h3 class=\"wp-block-heading has-large-font-size\">Good Contrast<\/h3>\n\n\n\n<p class=\"has-text-primary-color has-brand-white-background-color has-text-color has-background has-link-color wp-elements-3cda1c1a51f205255952996789c0d0c5 wp-container-content-69bc4bdf wp-block-paragraph\">Black text on a white background<\/p>\n\n\n\n<p class=\"has-brand-maize-color has-brand-blue-background-color has-text-color has-background has-link-color wp-elements-c1d671d4063da0629cbbc5fb1186f2ef wp-block-paragraph\">Yellow text on a dark blue background<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-bd946717 wp-block-group-is-layout-flex\">\n<h3 class=\"wp-block-heading has-large-font-size\">Poor Contrast<\/h3>\n\n\n\n<p class=\"has-border-primary-color has-brand-white-background-color has-text-color has-background has-link-color wp-elements-c66256c4da15c485e87a8ca3851dae3b wp-block-paragraph\">Light gray text on a white background<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Above:&nbsp;<em>Light gray text on a white background<\/em><\/p>\n\n\n\n<p class=\"has-brand-maize-color has-taubman-teal-background-color has-text-color has-background has-link-color wp-elements-15960edc688cb97d530bd4a0a913f2e4 wp-block-paragraph\">Yellow text on a light green background<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Above:\u00a0<em>Yellow text on a light green background<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n\n\n\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns has-text-alternate-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8448b2d8 wp-block-columns-is-layout-flex\" style=\"margin-bottom:var(--wp--preset--spacing--0)\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading has-x-large-font-size\">Best Practices<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Keep It Simple<\/strong>: Stick to classic color combinations like black on white or dark blue on light yellow. You don\u2019t need to worry about specific contrast ratios if you focus on making text easily visible.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Consider Your Audience<\/strong>: Remember that some students may have color blindness. Avoid relying on color alone to convey important information. For example, instead of just saying \u201cthe items in red are due soon,\u201d consider adding a label like \u201cthe items in red (labeled \u2018due soon\u2019)\u201d to ensure clarity for everyone.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-brand-maize-background-color has-background is-layout-flex wp-container-core-columns-is-layout-9ff25def wp-block-columns-is-layout-flex\" style=\"margin-top:var(--wp--preset--spacing--0)\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading has-x-large-font-size\" style=\"padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">What Can I Do Now? <\/h2>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">Following the guidelines above will help you avoid color contrast issues that may make engaging with your content complex for some people. Consider the readability of each element as you create your pages\u2014does the text stand out enough against the background? Is the content easy to read without straining? Use online tools like the WebAIM Contrast Checker or Canvas\u2019 built-in accessibility checker to verify your contrast choices. These tools help confirm that your content meets accessibility standards and is accessible for all students to read. Consistently verifying color choices ensures everyone can easily access and engage with the material.<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>What Is Color Contrast? Color contrast refers to the difference in lightness or darkness between text and its background. The higher the contrast, the easier it is for everyone to read, especially those with visual impairments. A good rule of thumb is to make sure that your text is easily distinguishable from its background without [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-198","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.umflint.edu\/accessibility\/wp-json\/wp\/v2\/pages\/198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.umflint.edu\/accessibility\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.umflint.edu\/accessibility\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.umflint.edu\/accessibility\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/www.umflint.edu\/accessibility\/wp-json\/wp\/v2\/comments?post=198"}],"version-history":[{"count":8,"href":"https:\/\/www.umflint.edu\/accessibility\/wp-json\/wp\/v2\/pages\/198\/revisions"}],"predecessor-version":[{"id":910,"href":"https:\/\/www.umflint.edu\/accessibility\/wp-json\/wp\/v2\/pages\/198\/revisions\/910"}],"wp:attachment":[{"href":"https:\/\/www.umflint.edu\/accessibility\/wp-json\/wp\/v2\/media?parent=198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}