Color Palette
Color palettes are a common element of a website’s aesthetic. A color palette is a set of typically 4-6 colors that is used consistently and uniformly across a website to promote harmony and integration of site materials and for visual appeal. You can build your own color palette online for free from various tools.
Example Palette
Color palette generators we recommend:
- Coolors Generate your own custom color palette, play with colors, and export it. Although you can make an account, one is not required to use and export color palettes.
- Adobe Spark Make your own mood board that suggests a color palette based on images you upload.
Additional aids in the journey through colors:
- Color Claim Play with color combinations (resource found by 2017-19 Digital Learning Fellow Annie Saddler ’17)
- Color Contrast Checker Good color contrast is an important part of web accessibility guidelines. This is a way to check text to color background contrast.
Style Guide
If there are many collaborators on a website, it’s a good idea to establish a style guide for consistency across posts and pages, or any site content for that matter. A style guide includes, but is not limited to, details such as
- Fonts
- Heading sizes
- Image sizes
- Captioning images format (full sentences or phrases, dates, authors, links?)
- How to write an author’s name (Ex. S. Richard or Sundi Richard or Sundi ’05)
- Colors
- Titling
- Text alignments
A style guide can also be much more than this. Examples of style guides:
You can choose how detailed and in-depth the style guide is as well as how much flexibility there is for customization. Some base level of uniform standards across all content is helpful. Each project is its own case and what is included can depend on what kinds of media, images, and content is being created. For example, it may matter more to have a standard image size if images are important where as the way titles are written may matter more if there is a filterable portfolio that aggregates all of the titled posts into a larger section.
Accessibility
Accessible design is a part of good design. Some basic principles of accessibility include:
- Write alternative text for all images. This is a short phrase that describes an image in context for those who can’t see it.
- Use in-built headings and bullet options as opposed to making the size larger manually or your own use of “*” or “~” for lists.
- Have good color contrast between text and the background color
- Run an accessibility check on a webpage with WAVE evaluation tool. It will notify you of any accessibility errors on your web page, what they mean, where they are (usually), and how to fix them.
- Hyperlinks should describe the link.
- Don’t do this: Click here or Learn more
- Do this: DuckDuckGo Data Privacy Search Engine
- Don’t rely on colors alone to make a point.
- Visit our page on accessibility resources to learn more.
