Initial Publication Date: March 11, 2022

Web and document accessibility for SERC

Colors and contrast

This information is relevant if you build webpages, chromes, or promotional materials in which you can choose colors of text.  If your position requires you to do web work or make color printed or digital materials, please take the time to go through the entire exercise.   If you rarely do this in your SERC position, we recommend that you read the introduction to understand the importance of contrast.  You may skip the contrast checking exercise unless you are interested.

Why is contrast important?

 

For sighted users with visual impairments, such as color blindness, low vision, or even situational challenges such as small screens or bright ambient light, it can be difficult to read text or see graphics when difference in colors between foreground and background is perceived to be low.  Text that may be clearly legible to one user might be hard to distinguish for another.  The best way to ensure that the most sighted users can read your content is to keep a high level of contrast between background colors and text colors (or foreground graphic colors).  This makes text legible for sighted users with vision impairments, and improves the impact and legibility of your webpages and graphics for all sighted users.

How do we make sure contrast is high enough?

 

For normal text in web pages and documents alike, the guideline used to determine sufficient contrast for those with low vision, color blindness, or other disabilities is a minimum contrast ratio of 4.5:1 between the text (or graphic) color and the background, calculated using the hex codes describing the colors in html.

While a Serckit feature may warn you of low contrast while making a chrome, it is important to be able to check existing text or other content for sufficient contrast, as well as graphics that you may include in a document or upload to a website.


Contrast checking exercise: Visit this Climate Change and the Biosphere index page (or another webpage you'd like to test).

 

 

  • If you are using Firefox or Chrome, you can download Colorzilla to extract hex codes of the colors of the text or background on the page (choose "Pick color from page"; clicking will automatically copy the hex code of your selection to the clipboard); or in Chrome, select and right click on text, choose "Inspect" to open Developer Tools, and under "Styles" you will find hex codes for the selection.
  • Copy and paste the foreground and background colors into the WebAIM color contrast checking tool to measure their contrast.

Which of the following is true of the h1 text: "Climate and the Biosphere: Unit Overview"?  Can you predict whether this text will pass or fail contrast guidelines?
[INCORRECT]Double check that you have selected the proper colors for the foreground (text) and background.  The contrast ratio should be 6.31:1.
[CORRECT]With a contrast ratio of 6.31:1, this text is sufficiently high contrast at a normal size, surpassing the 4.5:1 ratio required to meet AA-level compliance, but falling short of the 7:1 ratio for AAA-level compliance.  In most cases, passing WCAG AA is enough contrast for our purposes.
[INCORRECT]Double check that you have selected the proper colors for the foreground (text) and background.  The contrast ratio should be 6.31:1.
Which of the following is true of the h2 text: "Why study weather, climate, and the biosphere"?   Can you predict whether this text will pass or fail contrast guidelines?
[INCORRECT]Double check that you have selected the proper colors for the foreground (text) and background.  The contrast ratio should be 2.53:1, which is too low to pass WCAG AA guidelines.
[CORRECT]With a contrast ratio of 2.53:1, this text is not sufficiently high contrast at any size.