Improve Text Contrast with Chrome's Color Picker

Cole Turner
Cole Turner
3 min read
Cole Turner
Improve Text Contrast with Chrome's Color Picker
Blog
 
LIKE
 
LOVE
 
WOW
 
LOL

Text color contrast is how we see words on a webpage against the background. In other words, it's how we make words the words pop off the screen. This article some of the information I learned while trying to optimize text accessibility on my website.

Good contrast is important for everyone. For some, it's necessary.

The following figures for guidance on how to best provide good contrast for users with visual disabilities and other accessibility (a11y) needs. These figures are provided by the Web Content Accessibility Guidelines (WCAG) website.

The Web Content Accessibility Guidelines uses A/AA/AAA leveling to describe their requirements for ADA Compliance. The success criteria for these levels will vary for each accessibility feature.

Level A is the minimum level.

Level AA is the next level and will have additional requirements to satisfy circumstances that present beyond Level A.

Level AAA is the maximum criteria that will have more challenging requirements in order to satisfy a wider range of circumstances.

When it comes to design, if we can meet Level AAA, that should be the goal - in order to make the interface more accessible to a wider range of users.

In the following examples below, we are using Google Chrome's color picker in the developer tools. The color picker will present guides to help choose a color that is more accessible.

Level A does not have requirements for text color contrast. White text on a white background will have a radio of 1:1. Here is some typical light grey text that has a contrast ratio of 2.10, for comparison:

Google Chrome's color picker, demonstrating a color with Text Color Contrast Ratio 2.10

The WCAG provides a Level AA requirement of 4.5:1 contrast ratio for normal text and 3:1 for large text. This makes the text easier to read for most users. However, because of the font size, some users will still have difficulty reading this text.

Google Chrome's color picker, demonstrating a color with Text Color Contrast Ratio 5.83

The WCAG provides a Level AAA requirement of a 7:1 contrast ratio for normal text and 4.5:1 for large text. This makes the text easier to read for most users. However, because of the font size, some users will still have difficulty reading this text.

Google Chrome's color picker, demonstrating a color with Text Color Contrast Ratio 7.11

That's better. And thanks to Google Chrome's dev tools, it's easy to identify when text color needs improvement. Using the color picker, we can detect the color contrast and use the guides to choose a better color.

Accessibility benefits everyone, and it's great to see tooling bridge the gap to inform us how to make better decisions. I'm impressed by Google Chrome's color picker and can't wait to use it more in my work.

 
LIKE
 
LOVE
 
WOW
 
LOL

More Stories

Melt of the Day: Brisket, Muenster, & Grilled Onions

2 min read

You can't go wrong with brisket. This recipe uses Snow's BBQ, Texas Monthly's #1 Pick, and grilled onions for the perfect brisket and grilled cheese melt.

Lessons Learned in Freelancing

12 min read

If you want to become a freelance web developer, these are the lessons that will help you have a great time working with clients and being effective.

See more posts

Read it before anyone else. Subscribe to my newsletter for early access to the latest news in software engineering, web development, and more.