Introduction To Color Contrast

Often one of the largest sources of errors is calculated on websites according to Web Content Accessibility Guidelines (WCAG).

Color Contrast Guidelines

Achieving the appropriate color contrast is often harder than one would think based on all the nuances that go into the design of a page.

Color contrast impacts the readability of your content. It is more important to those who are visually impaired such as blindness, low vision, or color blindness, in theory, the greater the contrast the better the usability regardless of the device used and its surroundings. WGAG Color Checker

• For “normal” sized text or images of text, the minimum ratio is 4.5:1.
• For “large” sized text or images of text, the minimum ratio is 3:1.
• These allow for AA compliance per the Web Content Accessibility Compliance Guidelines (WCAG)

The Color Wheel Theory

When choosing the right colors, looking for ways to incorporate tint, tone or shade could make a color selection more accessible while preserving the original color provided.

Color Combination

Used for type, design, product, and digital experiences. Mix and match to find optimal combinations. Sometimes size matters. Something might be inaccessible at a smaller size but accessible at a larger size usually over 18px.

Image & Video Contrast

Colors used for type, design, product, and digital experiences over mixed media choose larger sizes and combinations that offer the highest level of contrast. It is best to place your elements in a location with the least amount of variance for video experiences.

Image & Video Contrast

Typography is often overlooked when thinking about color contrast guidelines. As a general rule the darker the background the thicker the font weight and the greater the line height and letter spacing should be to improve readability.