Accessible Color Palettes: Choosing Accessible Colors

Title Image for Accessible Color Palettes: Choosing Accessible Colors

Color is a fundamental component of accessible site design. You’ll need to make sure to contrast your text with background, stay mindful of color-blind viewers, and test your site’s appearance under a variety of conditions. Below we’ll cover some of the fundamentals of accessible color palettes so you can keep your site readable.

Color Contrast: The Foundation of Accessible Color Palettes

When choosing website colors for accessibility, your primary consideration should be color contrast. The idea here is to select readable colors which have very different hues or shades. You’ll normally want one brighter color and one darker color, so they stand out from each other. If the text and background are contrasting colors, then the text will be easier to read.

Color contrast is measured in terms of relative luminance by comparing the brightness of two colors. The great possible contrast ratio is 21 — which is the relative luminance between white and black.

Where Color Contrast Matters

Text and background color contrast isn’t simply an aesthetic guideline. Providing clear, readable text in a contrasting color helps visitors to your site read easily. Contrast is a fundamental component of various accessibility standards; The WCAG requires normal text to have a contrast ratio of at least 7 to 1.

You also need to make sure that important, usable features like forms, buttons, sliders, and other interactive areas are clearly contrasted from the background. Think of color contrast like a roadmap, directing the attention of your site visitors to what’s important. Link color contrast is also important, with the WCAG recommending that links contrast both the regular text on a page and the page’s background color. Use the web accessibility organization WebAIM’s Link Contrast Checker if you want to see how your site’s links stack up to standard accessibility recommendations.

A comparison image of good and bad color contrast. Text on an orange background, "Bad Contrast" in yellow and "Good Contrast" in black.
The orange background is #F0AA14. The yellow text #FFFC67 has a contrast ratio of only 1.85, but black text #000000 has a contrast ratio of 10.46.

Designing for the Color Blind

Color blindness is a major accessibility concern, as it occurs in five to eight percent of men and around one percent of women. Color blindness makes certain colors difficult to distinguish — red-green color blindness is the most common, but other forms such as blue-yellow color blindness exist.

As a rule, avoid using color combinations for essential site elements that are difficult for the color blind to distinguish. For example, don’t put red text on a green background.

If you’re planning out your site’s design, it’s worth running your logos, charts, and overall design through a Color Blindness Simulator. These tools will help you avoid problematic color combinations early in the design process.

Color combinations to avoid in important components include red-green, blue-green, yellow-red,
blue-yellow, and purple-red. You can still use these for decorative purposes, just make sure distinguishing between them isn’t required for anything essential.

Other Design Considerations

Prioritize the Meaningful

Focus on providing contrast for informative text and interactive items like buttons, links, and form-fillable boxes. There’s nothing wrong with using similar colors and a subdued color scheme for purely decorative portions of your page. Just be absolutely certain that the most important, interactive portions of your website are accessible — and check that the decorative portions don’t get in the way!

Aim for Color Independence

Don’t rely on color alone to distinguish information or features on your site. Have you ever noticed how graphs will frequently include dots, stripes, or other distinguishing features in addition to a color code? How about the way articles on our site display code samples?

print("hello, world!")

The text is a different color, yes, but it also uses a different font, along with highlighting. Those style changes are independent of the color change — and are still distinguishable even when the color is not.

Testing it Out

Is Your Site Readable in Grayscale?

Use a browser extension or a plugin like One Click Accessibility to check out how your site looks in grayscale. Without color, can you still easily distinguish what everything does? Do your links still stand out? A quick review early in your site design process can save you trouble later on.

Be Mindful of Lighting

Some color combinations that look fine in a well lit office won’t be nearly as readable in other lighting conditions. Imagine that you’ve built the most aesthetically pleasing website for an insurance company. The warm pastels for the site looked great on your high end laptop with a 4k display, but how will the text stand out on a cheap phone under the noon day sun? If your customers are likely to call upon your site under a variety of lighting conditions, test your site out under those conditions across a variety of devices.

Give your small business a digital presence with our fast, secure Shared Hosting solutions. Easily manage your websites with the industry-leading control panel on up to 20x faster web hosting that fits your budget.
InMotion Hosting Contributor
InMotion Hosting Contributor Content Writer

InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!

More Articles by InMotion Hosting

Was this article helpful? Join the conversation!