Color Contrast Crash Course for Interface Design

There are an estimated 285 million people in the world who are visually impaired. This number includes anyone from legally blind, to those with less than 20/20 vision.

This short guide, written during the creation of the Contrast MacOS app, will help you achieve the accessibility standards outlined in the WCAG 2.0, specifically with foreground and background color when it comes to text on digital screens.

TL;DR

  • Fail — Your text doesn’t have enough contrast with the background. You probably want to make it darker. This is a score of less than 3.0.
  • AA Large — The smallest acceptable amount of contrast for type sizes of 18px and larger. This is a score of at least 3.0.
  • AA — This is the sweet spot for text sizes below ~18px. This is a score of at least 4.5.
  • AAA — This is enhanced contrast with a score of at least 7.0. Think longer form articles that will be read for a significant period of time.

Decorative elements or text that is part of a logo or brand name have no minimum contrast requirements.

There are other factors to consider in order to be fully compliant with AA and AAA standards, but this will get you off to a great start.

Curated by (Lifekludger)
Read full article at Source: Color Contrast Crash Course for Interface Design – Matt D. Smith – Medium

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: