Optimize Text Readability with Color, Hierarchy and WCAG
Subscribe for Updates
Monthly Color Scheme Digest<br>Every 1st, get all the new schemes posted during the previous month sent to your inbox.
Company and Product Updates<br>Whenever something big happens, or new features launch, you can be the first to know.
Relaunch Alert<br>As soon as the new Mac and PC version is ready, we'll send you a one time email to get you started.
Join the Color Schemers
We respect your inbox as much as we respect a well-crafted color scheme. Your email is safe with us ‐ no third-party nonsense, no spam. Easily unsubscribe with one click, no hard feelings.
Color Schemer<br>Introduction to Color Theory
A Brief History of Color Theory:<br>The Color Wheel and Harmony
Techniques for Creating<br>Harmonious Color Combinations
Additive vs. Subtractive:<br>The Two Ways Color Happens Coming Soon
Is RYB and the Color Wheel<br>Wrong and Outdated?
Color Models and Systems
Comparing RGB, HSL and CMYK: Strengths and Limitations
Color Management and Calibration Across Different Displays
Introduction to Modern Color Systems<br>and Perceptual Color Spaces
Gamut and Wide-Color Displays:<br>sRGB vs Display P3 Coming Soon
Applying Color Theory
From RYB to Perceptual:<br>What Changes in Practice Coming Soon
Monochromatic Color Schemes:<br>When and How to Apply Coming Soon
Applying Perceptual Color Spaces<br>in Design with Color Schemer Coming Soon
How to Mix Colors and<br>Create Even Gradients Coming Soon
Creating a Cohesive Color System<br>for Your Brand and Design Coming Soon
Contrast and Accessibility
Optimize Text Readability with<br>Color, Hierarchy and WCAG
Creating Accessible Designs for People with Color Vision Deficiencies
How Popular is Dark Mode, and Is It Actually Useful? Coming Soon
Color Schemer has been launched on your Mac App Store<br>Return to Website
Launch Failed? Click Here
Color Schemer
Menu
Desktop Studio for Mac and PC
Scheme Gallery Curated color palettes
Gradient Gallery Seamless color blends
Color Theory Course Learn for Free
Desktop Studio<br>Schemes
Gradients<br>Course
Download Now
» Color Theory Course » Contrast and Accessibility
Optimizing Text Readability with WCAG
A polished color palette can still leave people struggling. Good contrast helps you nail it.<br>Measuring contrast with WCAG simply comes down to comparing the color of your text or UI element against its background. There are special math formulats that measure how much light both colors emit, and provides a ratio for the level of contrast. It's essential for people with vision issues, but might actually provide great enhancement to all of your users.
Do Apple's green text bubbles have a contrast problem?<br>The debate over "green" and "blue" chat bubbles may extend far beyond social status, typing indicators and read receipts. Is it possible that our hatred for green bubbles is derived from an accessibility problem? The green is much brighter than the blue, which runs into a contrast problem against the white text. Take a a look and decide for yourself.
Are we still on for tonight?<br>iMessage blue Passes for large text, but not body text.<br>3.46:1 ✓
Yep, see you at eight!<br>iMessage green Far too bright behind white text.<br>2.23:1 ×
Yep, see you at eight!<br>Darker green An improvement, but still short of 4.5:1.<br>3.15:1 ✓
WCAG has different levels of what is considered acceptable for contrast. WCAG Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA raises those minimums to 7:1 and 4.5:1. Font weight matters too: bolder text gets more leniency. At least for those really struggling, the bold text settings on iPhone can help with the green bubbles.
Test contrast with Color Schemer<br>You can use the "Mix" section in Color Schemer to check two colors against each other or to mix them through various color spaces. When trying to find a good combination for text and a background, it can help you tune the darkness of each color easily to hit the target.
Use contrast to shape visual hierarchy<br>Contrast naturally tells the users eye what they need to notice first. Headings and primary actions usually need the strongest contrast. Secondary text can be softer, but at least that the bare minimum of the WCAG threshold.
Continue to Techniques for creating harmonious color combinations
Table of Contents
Introduction to Color Theory
A Brief History of Color Theory:<br>The Color Wheel and Harmony
Techniques for Creating<br>Harmonious Color Combinations
Additive vs. Subtractive:<br>The Two Ways Color Happens Coming Soon
Is RYB and the Color Wheel<br>Wrong and Outdated?
Color Models and Systems
Comparing RGB, HSL and CMYK: Strengths and Limitations
Color Management and Calibration Across Different Displays
Introduction to Modern Color Systems<br>and Perceptual Color Spaces
Gamut and Wide-Color Displays:<br>sRGB vs Display P3 Coming Soon
Applying Color Theory
From RYB to Perceptual:<br>What Changes in Practice Coming Soon
Monochromatic Color Schemes:<br>When...