Website Design schematic
Some links on this page are affiliate links, which means that if if you make a purchase from them Silphium Design LLC makes a small commission at no extra cost to you. Silphium Design LLC appreciates your support! More information on affiliate links can be found here.

Spread the love

Consistent colors and font

Ideally they should match the logo of your business or brand

When you design your website you want to be consistent with the colors and font. Preferably these should be the colors and font used in your logo. If you have a logo already designed then use it to guide you. If you do not already have a logo there are many logo tools available or you can design one yourself using a program such as Inkscape, GIMP, or Photoshop.

Things to consider in a logo are:

Try to design one that is unique and draws your chosen market. Use a color that can be seen by all people including those who are color blind. Colors that can be confused include red and green, but also purple since these people cannot see the red in the purple. Also, make sure that the logo looks good in black and white.

Complementary Font

Make sure that the font used is complementary and matches the overall theme of your brand. Resources to look for complementary fonts include:

ADA Compliant

You need to make sure that your website is ADA compliant to the WCAG 2.1 AA standard. WCAG stands for Web Content Accessibility Guidelines. A checklist of these guidelines can be found on the Essential Accessiblity website. Basically you need to make sure that:

  • You use a large and defined font.
  • Do not use animations on your site that start automatically or flashes of light. The flashes of light are hard on people who have epilepsy or can trigger migraine headaches.
  • Make sure your color contrast is greater than 7:1 for small print and 4.5:1 for larger print (18pt +). Color contrast can be checked using the WebAIM color contrast checker.
  • Your headers need to make logical sense and can be tabbed through using a tab key. This means you do not have a larger header (i.e. h2) below a smaller one (i.e. h3).

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

2 × two =