This week Robert Hardy, our district website accessibility specialist, shares about how to ensure your content has a sufficiently high contrast ratio. Please call Robert with any accessibility questions at Ext. 6105. He is more than happy to talk by phone or schedule a time to meet with you.
When designing content, it is important to consider the perceived contrast of text or graphical elements against their background. Text with a low contrast ratio can be difficult to read and may cause issues with eye strain or reader fatigue.
The Web Content Accessibility Guidelines (WCAG), defines a minimum contrast ratio of 4.5:1 for regular text, and 3:1 for large text. For most textual content, black or dark gray text on a white background has a sufficiently high contrast ratio. For instance, the text within this blog has a ratio of 11:1, far surpassing the minimum threshold.
Care should be taken when changing font colors. Here are some examples of text color combinations and their ratios against a white background:
- Low contrast gray text Ratio: 1.3:1
- Sufficient contrast gray text Ratio: 4.6:1
- Low contrast blue text Ratio: 1.9:1
- Sufficient contrast blue text Ratio: 6.1:1
- Sufficient contrast red text Ratio: 5.6:1
Additional care should be taken when altering background colors. Generally, including a background of the same color type will create contrast issues and should be avoided. Here are some examples of low contrast content using the sufficiently contrasted colors from above:
- Low contrast gray text on a gray background text Ratio: 2.1:1
- Low contrast blue text on blue background Ratio: 2.6:1
- Low contrast red text on red background Ratio: 1.5:1
When designing graphical content, such as flyers or website layouts, it can be challenging to ensure sufficient contrast when placing text over an image. To do so, you can use design elements such as text shadows or text outlines, as we have done on our district page.
By including a text outline, we are able to display white text over a complex, and occasionally white background.
Low contrast text is generally apparent to a content author, but these tools can help to check the contrast ratios of your content:
- Colour Contrast Analyser – Works for both Mac and Windows and can check contrast across multiple applications.
- Color Contrast Analyzer – Google Chrome extension that visually displays the perceived contrast of content. Useful for designing web content.
If you have questions about using these tools or ensuring the contrast of your content is sufficient, please feel free to reach out to Robert Hardy (6105), the district’s Website Accessibility Specialist.
Two more SEBB benefit meetings available
Early last week, the Communications and Community Relations department sent an email to all OSD employees titled “SEBB Open Enrollment begins today.” Below is a reprint of that email, which contains important information about open enrollment.
Everyday Heroes is a regular feature in this staff blog. Remember to submit names of employees districtwide who have done something deserving of encouragement and praise. Give a shout out to one of your colleagues at your school or support building and watch for it to appear in an upcoming Everyday Heroes blog post.
The Olympia School District is committed to helping keep students, staff, parents/guardians and community members healthy throughout the flu season.
The Olympia School District has proclaimed October 2019 as Walk to School Month.
Is your school officially represented on social media? If not, let’s fix that!
“Radium Girls,” presented by Capital High School Theatre, takes the stage this month.
Here's The Scoop 
You must be logged in to post a comment.