| Color Palette |
WCAG Compliant ColorsWe are working towards designing a AAA compliant site. The constraints are significant, but the value is immense. Font ColorsTo highlight a word or phrase you may want to use a colored font. For fonts, WCAG sets very high standards for contrast ratios. Choosing a color that keeps a minimum font-background contrast is critical, for example, when using a projector on a bright room. If you can assume a background, you can use this color contrast check tool to evaluate your color choices. Sometimes, though, the background may be out of our control. For example, when embedding, printing, or accessing the content through a specialized browser. In these cases, there are only 26 (256-bit) colors that meet the strictest contrast standards. These are:
You can produce a high-contrast message by inverting these colors. Selecting Background ColorsSelect light colors first. This heuristic helps limit the amount of hard contrast through the page, resulting in a more fluid design.
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
Readable High Saturation
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
Negative ContrastThis choice is very disruptive. Content that serves the primary goal on a page should be in positive contrast. Content that serves a secondary goal should not be calling that much attention to itself. You should rarely need to use this combination. Make sure when you do that the situation really requires it.
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
Warning: Color suggestions below have not been tested against WCAG compiance.Use with caution when applying to student related materials. We plan to review and update this document in due time. Page ElementsThe following list of colors can be used as a starting point to create page elements such as titles, pullouts, highlights, etc.
ExamplesElements
1 2 3 4 5 6 HighlightsI named the colors after some yummy ingredients from my kitchen. I named the colors after some yummy ingredients from my kitchen. I named the colors after some yummy ingredients from my kitchen. I named the colors after some yummy ingredients from my kitchen. I named the colors after some yummy ingredients from my kitchen. I named the colors after some yummy ingredients from my kitchen. Article CalloutsArticle callouts should go between regular paragraph like this one. “The default style is class="callout"” Article callouts should go between regular paragraph like this one. “Improvement in Post Secondary Education will require converting teaching from a ‘solo sport’ to a community based research activity.” Article callouts should go between regular paragraph like this one. “Improvement in Post Secondary Education will require converting teaching from a ‘solo sport’ to a community based research activity.” Article callouts should go between regular paragraph like this one. “Improvement in Post Secondary Education will require converting teaching from a ‘solo sport’ to a community based research activity.” Article callouts should go between regular paragraph like this one. “Improvement in Post Secondary Education will require converting teaching from a ‘solo sport’ to a community based research activity.” Article callouts should go between regular paragraph like this one. “Improvement in Post Secondary Education will require converting teaching from a ‘solo sport’ to a community based research activity.” Article callouts should go between regular paragraph like this one. Blocks - ObjectivesCharcoal is what happens sometimes after I use them! Charcoal is what happens sometimes after I use them! Charcoal is what happens sometimes after I use them! Charcoal is what happens sometimes after I use them! Charcoal is what happens sometimes after I use them! Charcoal is what happens sometimes after I use them! Notices -TipsSpinach leaves do not have intestines.
Spinach leaves do not have intestines.
Spinach leaves do not have intestines.
Spinach leaves do not have intestines.
Spinach leaves do not have intestines.
Spinach leaves do not have intestines.
Sections - AreasBlueberries offer less antioxidants per dollar than red cabbage, but they are so good in smoothies.
Blueberries offer less antioxidants per dollar than red cabbage, but they are so good in smoothies.
Blueberries offer less antioxidants per dollar than red cabbage, but they are so good in smoothies.
Blueberries offer less antioxidants per dollar than red cabbage, but they are so good in smoothies.
Blueberries offer less antioxidants per dollar than red cabbage, but they are so good in smoothies.
Blueberries offer less antioxidants per dollar than red cabbage, but they are so good in smoothies.
Alerts - Warnings
|