Step 1: Define Your Brandīrand color palettes are a visual way to supplement your brand’s story. Color theory is not my strongest skill, so I will not dive into the mechanics of color or anything like that here. There are many ways to do this, but I am going to show you what my process looks like. How to Create an Accessible Color Palette From Scratch With color being an important part of brand identity and tone, you will want to make sure you have some accessible color combinations as early in your brand development process as possible. a social icon)īe mindful of buttons, tabs, accordions, or any other text in your design.

Any icons on the background color that are acting as links or buttons (i.e.

Link text color on hover, and link text color if there is a change when it has been visited.

You will know what colors you can combine with other colors, and what color combinations in your palette should be avoided.Īt a minimum for your digital color palette, the following color combos should pass WCAG standards: When you create an accessible color palette, you equip yourself with the tools you need to maximize your design efforts. What Color Combos Should Meet the Contrast Standards? It may not always be easy to catch if a color combo has enough contrast with the naked eye. You don’t want to spend a lot of time and effort designing your website or social media graphics, only for an important potential customer to not be able to read your main call to action, or miss out on your key brand messaging. This is expressed as a ratio, for example white on white has a contrast ratio of 1:1. Screenshot from the WebAIM Contrast Checker Tool.Ĭontrast, as defined by the WCAG guidelines, is the perceived brightness between two colors. The text color and the background color have a contrast ratio of 1.27:1, which fails WCAG AA and AAA Standards. Bad color contrast makes this color combo hard to read. Have you ever seen a graphic that was hard to read, or you couldn’t make out the words overlayed on an image? That is most likely because the contrast ratio between the colors was not high enough.

There are levels of standards that go into AA (double-A) or AAA (triple-A) compliance, with AAA guidelines being the higher standard. Most designers aim to adhere to the WCAG 2.0 Standard or the 2.1 Standard, with guidance released in March 2021 for the 2.2 update.

Their guidelines for accessibility are known as the Web Content Accessibility Guidelines, or WCAG (pronounced wik-agg). The W3C sets the technical foundations that the entire internet is built upon. The standards of web accessibility are set by the World Wide Web Consortium aka the W3C, an organization founded by the guy who literally invented the internet, Tim Berners-Lee. Where Do the Accessibility Standards Come From? When you adhere to accessibility standards, you are providing a better user experience to all of your visitors. Web accessibility is the practice of designing and developing websites, apps, or other tech products so that all web users, especially those with disabilities and those who use assistive technologies, can access information easily and equally. How to Create an Accessible Color Palette From Scratch.Why Create an Accessible Color Palette?.Where Do the Accessibility Standards Come From?.

Accessible color palette