[Ucrfacultyandstaff] UCR Digital Deep Clean Week 10: Color Contrast
UCR Provost
provost at ucr.edu
Wed May 6 11:35:45 PDT 2026
[image: UC Riverside logo]
The UCR Digital Deep Clean
[image: A sunlit craft room and digital workspace featuring UCR brand
colors of blue, gold, lime, and orange.]
Week Ten: The Craft Room
The final week! We’re in the home-stretch of our 10-week Digital Declutter
Challenge. While we’ve made incredible progress together, our work is not
over. Please ensure you’ve read the spring quarter update on digital
accessibility from Provost Watkins
<https://insideucr.ucr.edu/announcements/2026/04/23/provosts-spring-quarter-update-digital-accessibility>
.
This week, we’re heading into the “Craft Room." In a craft room, picking
the right colors makes a project beautiful. In the digital world, the right
colors make a project legible. If there isn't enough contrast between your
text and its background, the information becomes invisible to Highlanders
with low vision, color blindness, or even someone trying to read a screen
in the bright Riverside sun. High contrast reduces eye strain for everyone
and ensures your digital content is readable on any device.
Week Ten Guidance
[image: An over-the-shoulder view of a person using a laptop to view a
colorful color contrast grid.]
Using UCR Colors
When determining how to incorporate the UCR color palette, we
recommend reviewing
two key resources provided by University Relations
<https://brand.ucr.edu/ucr-colors>:
-
The UCR Accessibility Contrast Grid
<https://brand.ucr.edu/sites/default/files/uc-riverside-brand-color-accessibility-contrast-grid.jpg>:
This is your "cheat sheet" for campus colors. It shows exactly which
combinations of UCR Blue, Gold, and our secondary colors pass WCAG 2.1 AA
standards. If a combination is marked "DNP" (Does Not Pass), it’s a signal
to try a different pairing.
-
The Rule of Tints: On the web, we must be careful with color tints
(lightened versions of our brand colors). Light tints (10-30%) should never
be used for text. While they make great background blocks, they must be
paired with high-contrast, dark text (such as 100% UCR Blue or Black) to
remain readable.
To make sure your message "pops" for every Highlander, use a tool like
the WebAIM
Contrast Checker <https://webaim.org/resources/contrastchecker/> or
Siteimprove <https://www.siteimprove.com/> to verify your colors before you
publish. Visit the UCR Brand Colors page <https://brand.ucr.edu/ucr-colors>
to see the full palette and download the accessible color combination chart.
The Weekly Challenge
[image: A workspace featuring a monitor displaying the UCR Brand Identity
website's color page and a laptop showing a color contrast checker.]
-
Consult the Grid: Review your presentations, digital flyers, emails,
webpages, etc. Check your primary color combinations against the UCR
Accessibility Contrast Grid
<https://brand.ucr.edu/sites/default/files/uc-riverside-brand-color-accessibility-contrast-grid.jpg>
.
-
Test Your Contrast: Use a tool like the Siteimprove Color Contrast
Checker <https://www.siteimprove.com/toolkit/color-contrast-checker/>
or WebAIM
Contrast Checker <https://webaim.org/resources/contrastchecker/> for any
custom colors outside our brand palette. Aim for at least a 4.5:1 ratio.
-
Lighten the Load: If your text is hard to read against the background,
darken your font color or lighten your background until it "pops."
Faculty Focus
When building your courses, remember that color should never be the only
way you communicate meaning.
-
The "Black and White" Test: If you printed your page in grayscale, would
it still make sense? If you use green for "Correct" and red for
"Incorrect," add a text label or an icon (check/x) to ensure colorblind
students aren't left guessing.
-
Use the Built-in Checker: The Canvas Rich Content Editor has a built-in
Accessibility Checker (the person icon). It will instantly flag contrast
issues and help you pick a compliant shade from the palette.
XCITE Guidance on Color Contrast <https://teaching.ucr.edu/color-contrast>
SDRC Guidance on Presentations
<https://sdrc.ucr.edu/accessible-powerpoint-color-and-contrast>
Canvas Accessibility Checker Guidance
<https://community.instructure.com/en/kb/articles/664351-how-do-i-use-the-accessibility-checker-in-canvas>
WebAIM Contrast Checker <https://webaim.org/resources/contrastchecker/>
Website Wranglers
UCR Brand Colors Guidance <https://brand.ucr.edu/ucr-colors>
Siteimprove Color Contrast Checker
<https://www.siteimprove.com/toolkit/color-contrast-checker/>
Siteimprove Color Contrast Guidance
<https://help.siteimprove.com/support/solutions/articles/80001050538-accessibility-rule-color-contrast-does-not-meet-requirement-explained>
Color contrast is critical on our webpages and placing text over a busy
background image often fails contrast tests.
-
Use Overlays: Add a solid or semi-transparent background block behind
your text to ensure the background doesn't swallow your words.
-
Siteimprove Automation: Siteimprove automatically scans your HTML for
contrast failures. If it flags a "Custom" color you've added, check it
against the Accessibility Contrast Grid
<https://brand.ucr.edu/sites/default/files/uc-riverside-brand-color-accessibility-contrast-grid.jpg>
to find a compliant alternative.
Did You Miss Previous Weeks or Want to Review?
You can find all of the accessibility guidance and resources provided as
part of the Digital Deep Clean challenge on the Digital Accessibility
webpage!
Visit the Digital Accessibility Webpage to Learn More
<https://accessibility.ucr.edu/digital-accessibility>
Access barrier? Report digital accessibility issues or request remediation
<https://ucrsupport.service-now.com/ucr_portal?id=ucr_accessibility_form_login>
of inaccessible digital content.
University of California, Riverside
900 University Ave.
Riverside, CA 92521
951-827-1012 | ucr.edu <https://www.ucr.edu/>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://scotmail.ucr.edu/pipermail/ucrfacultyandstaff/attachments/20260506/d53e27aa/attachment-0001.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image
Type: image/png
Size: 126601 bytes
Desc: not available
URL: <https://scotmail.ucr.edu/pipermail/ucrfacultyandstaff/attachments/20260506/d53e27aa/attachment-0004.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image
Type: image/png
Size: 166853 bytes
Desc: not available
URL: <https://scotmail.ucr.edu/pipermail/ucrfacultyandstaff/attachments/20260506/d53e27aa/attachment-0005.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image
Type: image/png
Size: 136980 bytes
Desc: not available
URL: <https://scotmail.ucr.edu/pipermail/ucrfacultyandstaff/attachments/20260506/d53e27aa/attachment-0006.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image
Type: image/png
Size: 38168 bytes
Desc: not available
URL: <https://scotmail.ucr.edu/pipermail/ucrfacultyandstaff/attachments/20260506/d53e27aa/attachment-0007.png>
More information about the Ucrfacultyandstaff
mailing list