Accessible colors how to#

Tertiary (“accent” or “trim”) color – Used less frequently, this color can be mixed into any of the aforementioned places to add variety.Perhaps a warm (red/orange/yellow) primary is offset with a cool (blue/green/turquoise) selection. Either this color or the tertiary color should offer significant contrast from the primary color. Useful for alternate buttons, hover states on links, and solid background sections, it could also be taken from your logo. Secondary color – A second color that complements the primary color.Primary color – Usually taken from your branding and logo, this color will be used frequently on the website, be it on buttons, links, borders, and more.Now, just how many of these do we need? The Colors You WantĪ website demands more than just a single color. Meanwhile, the endless shades in between leads to more complicated-looking combinations, like #fcba03. The most common representation of color on the Web is the hexadecimal code, or “hex code,” which is comprised of six symbols, like this:Įach symbol is either a 0-9 or a letter, a-f.Ī pure white is #ffffff. Google’s color picker shows us that colors can be expressed in many ways: As we will see later, it is the relationship between the chosen colors that matters. There are no “right” or “wrong” colors it’s an artist’s decision, or a business owner’s call. What’s in a Color Palette?Ī color palette consists of several colors that you’ll use repeatedly across your website.

Accessible colors how to#

In this post, we will cover tools for color selection, and, importantly, describe how to test if you’ve chosen an accessible, ADA-compliant palette. Need colors for your website and want to pick the right ones? Read on. The contrast between the colors on your website is what counts, specifically in the text like you’re reading now.

Because content is at the core of any marketing strategy, hard-to-see content is a major problem to avoid. Poorly-selected colors can make text all across your site hard to read. But it’s more than that: Color selection can also greatly impact website accessibility for disabled site visitors. Color is a big deal it communicates personality, tone, and overall business branding.